React’s useState and useEffect hooks are essential tools for managing state and side effects in functional components. However, they serve distinct purposes, and knowing when to use each—or when to avoid them entirely—can make your code cleaner and more efficient.
This guide covers:
useState and useEffect douseState vs. useEffect vs. local variablesThe useState hook manages state—data that persists across renders and triggers re-renders when updated. It’s ideal for tracking component-specific data like user inputs or UI toggles.
State refers to any data that is specific to a component and can change over time. When state changes, the component will re-render to reflect the updated data.
const [count, setCount] = useState(0);count: The current value of the state.setCount: A function to update the value of count.useState(0): Initializes count with a value of 0.The useEffect hook handles side effects—operations that interact with the outside world (e.g., APIs, DOM updates) or need to run at specific lifecycle moments (mount, update, unmount).
Side effects refer to anything that happens outside of your React component that needs to be synchronized with your app. This can include fetching data, updating the DOM, or even logging.
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(setData);
}, [count]);useEffect runs after the component renders and fetches data from an API when the count state changes.Sometimes, you don’t need either hook. Local variables or event handler logic can suffice for transient or render-specific computations.
function Component() {
const temporaryValue = Math.random(); // No need for useState
return <p>{temporaryValue}</p>;
}Local variables are used for data that only exists during one render. These are quick calculations or values that don’t need to be persisted across renders.
function Toggle() {
const [isOn, setIsOn] = useState(false);
return <button onClick={() => setIsOn(!isOn)}>{isOn ? 'On' : 'Off'}</button>;
}isOn) changes, the component re-renders, updating the text on the button.function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(setData);
}, []); // Runs once on mount
return <div>{data ? data.message : 'Loading...'}</div>;
}[]). It fetches data from an API and updates the data state with the response.function Calculator() {
const handleAdd = () => {
const a = 5; // Local variable, no state needed
const b = 10;
alert(a + b);
};
return <button onClick={handleAdd}>Add</button>;
}handleAdd function uses local variables (a and b) for one-off calculations. Since there's no need for the values to persist between renders, useState or useEffect is unnecessary.| Feature | useState | useEffect |
|---|---|---|
| Purpose | Manage state | Handle side effects |
| Triggers Render | Yes, when state updates | No, runs after render |
| Runs When | On state change | On mount/update/unmount |
| Dependency | None | Optional dependency array |
| Use Case | UI-related data | External interactions |
function Counter() {
const [count, setCount] = useState(0); // State for UI
useEffect(() => {
document.title = `Count: ${count}`; // Side effect
}, [count]); // Runs when count changes
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}count for the UI. Every time the state changes, the component re-renders, showing the new count.count changes. The empty dependency array ensures this only runs when count updates.function Form() {
const [input, setInput] = useState(''); // State for input
const isValid = input.length > 3; // Local variable, no hook needed
return (
<div>
<input value={input} onChange={e => setInput(e.target.value)} />
<p>{isValid ? 'Valid' : 'Too short'}</p>
</div>
);
}input for the form. The state is updated as the user types.isValid is computed directly from the input value in the render function. Since isValid is only used for display, no state or effect is needed.function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(interval); // Cleanup
}, []); // Runs once on mount
return <p>Seconds: {seconds}</p>;
}seconds for the UI. This state is updated every second.seconds every second. The cleanup function clearInterval ensures that the interval is cleared when the component unmounts.useState.useEffect.
