Tools: What is useState in React? Explained with Practical Examples

useState is a React Hook that allows functional components to manage state. It returns a state variable and a setter function. When the setter function is called, React re-renders the component with updated state. const [state, setState] = useState(initialValue); state → Current value setState → Function to update the value initialValue → Starting value Why Do We Need useState? React components re-render when state changes. No user interaction handling No toggle functionality State makes your UI interactive. When button is clicked setCount(count + 1) runs UI updates automatically Example 2: Toggle Button false → Initial state Clicking button flips the value This pattern is used in: Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK:
import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );
} export default Counter; **What Happens Here?** Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK:
import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );
} export default Counter; **What Happens Here?** COMMAND_BLOCK:
import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <h2>Count: {count}</h2> <button onClick={() => setCount(count + 1)}>Increment</button> </div> );
} export default Counter; **What Happens Here?** COMMAND_BLOCK:
import { useState } from "react"; function Toggle() { const [isOn, setIsOn] = useState(false); return ( <div> <h2>{isOn ? "Light ON 💡" : "Light OFF 🌙"}</h2> <button onClick={() => setIsOn(!isOn)}> Toggle </button> </div> );
} Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK:
import { useState } from "react"; function Toggle() { const [isOn, setIsOn] = useState(false); return ( <div> <h2>{isOn ? "Light ON 💡" : "Light OFF 🌙"}</h2> <button onClick={() => setIsOn(!isOn)}> Toggle </button> </div> );
} COMMAND_BLOCK:
import { useState } from "react"; function Toggle() { const [isOn, setIsOn] = useState(false); return ( <div> <h2>{isOn ? "Light ON 💡" : "Light OFF 🌙"}</h2> <button onClick={() => setIsOn(!isOn)}> Toggle </button> </div> );
} - state → Current value
- setState → Function to update the value
- initialValue → Starting value - No dynamic UI
- No user interaction handling
- No form handling
- No toggle functionality - Initial value is 0
- When button is clicked
- setCount(count + 1) runs
- React updates state
- Component re-renders
- UI updates automatically - false → Initial state
- Clicking button flips the value
- UI updates instantly - Dark mode toggle
- Show/Hide password
- Dropdown menus
- Modal open/close