![\"usestate](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/08\/useState-in-React-JS-1.webp\")
The useState Hook gives your functional components easy-to-use built-in state functionality. Before Hooks in React JS, you could only store a state in Class components, so functional components were limited to stateless UI rendering. Now that the useState Hook is part of React, it can create an interface for dynamic storage and data updates in your functional components.<\/p>\n
\ud83d\udc49 In simple terms: useState allows your React app to remember values between renders<\/strong>.<\/p>\n Example:<\/p>\n Here, count is the state variable<\/strong>, and setCount is the function to update the state<\/strong>.<\/p>\n The syntax of useState in React JS<\/strong> is simple:<\/p>\n const<\/span> [state, setState] = useState(initialValue);<\/p>\n The best way to understand when useState is useful is to imagine building an app in which:<\/p>\n Without the useState Hook, you would have no access to make your components “remember” something. Each render would reset the state to the default value in your component.<\/p>\n \ud83d\udc49 Tip: When updating objects or arrays with useState in React JS<\/strong>, always use the spread operator<\/strong> to avoid overwriting the entire state.<\/p>\n One common mistake with useState in React<\/strong> is trying to update the state directly.<\/p>\n \u274c Wrong:<\/p>\n count = count + <\/span>1;<\/p>\n \u2705 Correct:<\/p>\n setCount<\/span>(count + 1);<\/p>\n Understanding this difference helps you structure your React apps better.<\/p>\n Some common mistakes with very new React developers when using useState:<\/p>\n It\u2019s used for adding state (data that changes) in functional components.<\/p>\n Yes! You can use as many as you like.<\/p>\n Let\u2019s build a to-do list<\/strong> using useState:<\/p>\n Here we used useState in React<\/strong> with both strings and arrays.<\/p>\n Learning to use the useState in React JS<\/strong> is the first step in developing toward an understanding of React Hooks overall. Once you become good with using useState you will find it much easier to learn and understand useEffect, useContext, and useReducer.<\/p>\n If you are a beginning React developer I would suggest trying to build small apps with just the useState Hook in React. Some app examples would be a counter, data entry form, or a simple todo list.<\/p>\n If you are new to learning React JS, the very first hook that you will encounter will the useState hook. Understanding useState in React JS is extremely important, because it is the fundamental way of managing dynamic data inside your components. In this article, we will break down useState in React, go over why it […]<\/p>\n","protected":false},"author":9,"featured_media":10506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3366],"tags":[8491,8489,7967,8492,8488,8490,7964,8487],"class_list":["post-10503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-react-beginner-tutorial","tag-react-functional-components","tag-react-hooks","tag-react-js-examples","tag-react-state-management","tag-update-state-in-react","tag-usestate-in-react","tag-usestate-in-react-js"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/10503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=10503"}],"version-history":[{"count":0,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/10503\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/10506"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=10503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=10503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=10503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}import React, { useState } from \"react\";\u00a0\r\n\r\nfunction Counter()\r\n\r\n{\u00a0\r\n\r\nconst [count, setCount] = useState(0);\u00a0\u00a0\r\n\r\nreturn (\u00a0\u00a0\u00a0\r\n\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<h2>You clicked {count} times<\/h2>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<button onClick={() => setCount(count + 1)}>Click Me<\/button>\u00a0\u00a0\u00a0\r\n\r\n<\/div>\u00a0\r\n\r\n);\r\n\r\n}<\/pre>\nSyntax of useState in React<\/h2>\n
\n
Why Do We Need useState in React?<\/h2>\n
\n
Different Examples of useState in React JS<\/h2>\n
1. useState with String<\/strong><\/h3>\n
function Greeting()\r\n\r\n{\u00a0\r\n\r\nconst [name, setName] = useState(\"John\");\u00a0\u00a0\r\n\r\nreturn (\u00a0\u00a0\u00a0\r\n\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<p>Hello, {name}!<\/p>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<button onClick={() => setName(\"Sarah\")}>Change Name<\/button>\u00a0\u00a0\u00a0\r\n\r\n<\/div>\u00a0\r\n\r\n);\r\n\r\n}<\/pre>\n2. useState with Numbers<\/strong><\/h3>\n
const [count, setCount] = useState(0);<\/pre>\n
3. useState with Boolean<\/strong><\/h3>\n
const [isVisible, setIsVisible] = useState(false);<\/pre>\n
4. useState with Objects<\/strong><\/h3>\n
const [user, setUser] = useState({ name: \"Alex\", age: 25 });<\/pre>\n5. useState with Arrays<\/strong><\/h3>\n
const [items, setItems] = useState([\"Apple\", \"Banana\"]);<\/pre>\n
Updating State Correctly in React<\/h2>\n
Difference Between State and Props in React<\/h2>\n
\n
Common Mistakes with useState in React JS<\/h2>\n
\n
FAQs on useState in React<\/h2>\n
Q1: What is useState in React JS used for?<\/h3>\n
Q2: Can I use multiple useState hooks in one component?<\/h3>\n
Q3: What is the difference between useState and useEffect?<\/h3>\n
\n
Real-World Example of useState in React<\/h2>\n
![\"usestate](\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2025\/08\/Real-World-Example-of-useState-in-React.webp\")
import React, { useState } from \"react\";\u00a0\r\n\r\nfunction TodoApp()\r\n\r\n{\u00a0\r\n\r\nconst [tasks, setTasks] = useState([]);\u00a0\r\n\r\nconst [input, setInput] = useState(\"\");\u00a0\u00a0\r\n\r\nconst addTask = () => {\u00a0\u00a0\u00a0\r\n\r\nsetTasks([...tasks, input]);\u00a0\u00a0\u00a0\r\n\r\nsetInput(\"\");\u00a0\r\n\r\n};\u00a0\u00a0\r\n\r\nreturn (\u00a0\u00a0\u00a0\r\n\r\n<div>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<h2>My To-Do List<\/h2>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<input value={input} onChange={(e) => setInput(e.target.value)} \/>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<button onClick={addTask}>Add Task<\/button>\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<ul>\r\n\r\n\u00a0 {tasks.map((task, index) => (\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<li key={index}>{task}<\/li>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0 ))}\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\r\n<\/ul>\u00a0\u00a0\u00a0\r\n\r\n<\/div>\u00a0\r\n\r\n);\r\n\r\n}<\/pre>\nFinal Thoughts<\/h2>\n
Related Reads<\/h2>\n
\n