State management is a crucial concept in React. State allows components to dynamically update UI based on data changes.
However, managing state properly takes some practice. Let’s walk through the basics of handling state in React:
Creating State
The useState hook defines state variables:
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
}
useState accepts the initial state value and returns:
- The current state
- A function to update it
Reading State
To display state in UI, simply reference the variable:
<p>You clicked {count} times</p>
React will re-render components on state change to reflect new values.
Updating State
Call the setter function to update state:
const increment = () => {
setCount(prevCount => prevCount + 1);
}
<button onClick={increment}>Increment</button>
Always use the setter - don’t modify state directly.
State Batching
State updates are batched for better performance:
const [count, setCount] = useState(0);
const increment3Times = () => {
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
}
This will only increment once instead of 3 times.
State Dependency
State values are guaranteed to be up-to-date if they are declared within the same component:
const [count, setCount] = useState(0); // count is always fresh
const increment = () => {
setCount(c => c + 1);
console.log(count); // 0 (not updated yet)
}
Summary
useStatehook declares state variables- Reference state variables to display state
- Call setters to update state
- Updates are batched for performance
- State within a component is always fresh
Correctly managing local component state is a key React skill. State allows powerful, dynamic applications.
