PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
useState lets a React function component remember information between renders; useEffect synchronizes a component with something outside React. In a Zelda-style analogy, state is the heart count or selected item the game remembers, while an Effect might keep an external music player in sync. The analogy helps distinguish their jobs, but their behavior follows React’s rules.
What do useState and useEffect do?
Both are Hooks, but they solve different problems. State belongs to the component and can affect what it renders. An Effect connects a committed render to an external system, such as a browser API, network connection, subscription, or non-React widget.
| Question | useState |
useEffect |
|---|---|---|
| Main job | Remember component information and request a render when it changes. | Synchronize the component with an external system. |
| Typical reason to use it | A user interaction changes a score, selection, or form value. | A committed render needs to establish or update a connection or other external synchronization. |
| Cleanup | No setup-and-cleanup pair; the setter supplies the next state. | Setup can return a cleanup function to undo a connection or subscription. |
| Common mistake | Expecting the current render’s state variable to change immediately after calling its setter. | Using an Effect for data that can be calculated during rendering. |
These distinctions are central to React’s built-in Hooks and its guidance on synchronizing with Effects.
How do I use useState?
Declare the remembered value
Call useState at the top level of a function component. It returns the value for the current render and a setter that requests a render with the next value.
#1 Best Overall
import { useState } from 'react';
function HeartCounter() {
const [hearts, setHearts] = useState(3);
return (
<button onClick={() => setHearts(value => value + 1)}>
Hearts: {hearts}
</button>
);
}Here, hearts is the current render’s value. setHearts requests that React use the next value and render again. It does not mutate hearts in place.
Use an updater when the next value depends on the previous one
The setter can take a value or an updater function. When a change is based on the previous state, use the function form, such as setHearts(value => value + 1). React passes the pending state to the updater and uses its return value as the next state.
Calling a setter does not replace the state variable captured by the handler that is already running. If you call setHearts and then read hearts again in that same handler, you still read the value from that render. The next render receives the updated value. See React’s useState reference for the setter and initializer details.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →When do I need an Effect?
Use one to synchronize with something outside React
An Effect is appropriate when a component must establish or maintain a connection to an external system—for example, subscribing to updates or controlling a browser API. Its setup runs after React commits a render. If the setup creates an ongoing connection, return a cleanup function that disconnects it.
import { useEffect } from 'react';
function MusicSync({ player, trackId }) {
useEffect(() => {
player.play(trackId);
return () => {
player.stop();
};
}, [player, trackId]);
return null;
}This example assumes player.play starts playback for the supplied track and player.stop stops that player. When player or trackId changes, React cleans up the previous synchronization before setting up the new one.
Let dependencies describe the synchronization
The dependency array contains the reactive values the Effect reads and needs to stay synchronized with. React compares each dependency with its previous value using Object.is. When a dependency changes, React runs the prior cleanup, then runs setup with the new values. Dependencies are not a timing menu: do not omit a value the Effect uses just to force a preferred schedule. Instead, make the synchronization and the values it needs clear. The useEffect reference describes setup, cleanup, and dependencies.
When should I avoid an Effect?
Do not use one to calculate render data
If a value can be calculated from props or state during rendering, calculate it there rather than copying it into state and updating that state with an Effect. For example, derive a displayed total directly from the items used to calculate it. An Effect is for synchronization with an external system, not for orchestrating ordinary data flow inside the component.
Do not use one just because state changed
A state update already asks React to render again. If the only goal is to respond to a click or compute the next state, do that in the event handler or during rendering as appropriate. Add an Effect when that render must also synchronize with an external system.
Best Value
Where can Hooks be called?
Call Hooks at the top level of a function component or custom Hook, before any conditional return. Do not call useState or useEffect inside an if, loop, event handler, or nested function. Keeping Hook calls in a stable order lets React associate each call with the right state and Effect. The Rules of Hooks explain the constraint.
What does Effect cleanup and Strict Mode mean?
When dependencies change, React cleans up the previous Effect before setting up its replacement. When a component is removed, cleanup undoes the synchronization that setup established. Make cleanup mirror setup: for instance, unsubscribe from the subscription that setup started.
In development, React Strict Mode runs an additional setup-and-cleanup cycle before the first real setup. This is a check that cleanup correctly reverses setup; it is not a production double-run. If an extra connection or action appears during development, inspect whether cleanup fully undoes the setup rather than suppressing the Effect.
Recommended Free Tools
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
