How to use state in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using state allows React components to store and update data that changes over time, triggering re-renders when values change. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented state management in thousands of React components for enterprise applications. From my expertise, the most effective approach is using the useState hook with proper initialization. This method provides simple state management and predictable component behavior.
Use the useState hook to declare state variables with initial values and update functions.
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
)
}
The useState hook returns an array with the current state value and setter function. Pass the initial value to useState, then use the setter function to update state. When state changes, React automatically re-renders the component with the new value. Use functional updates when new state depends on previous value.
Best Practice Note:
This is the same approach we use in CoreUI React components for state management.
