An effect is code that runs after React updates the screen, usually for interacting with things outside React.
Examples: Fetching data, Subscribing to events, Updating the document title.
The problem starts when developers use it for normal calculations.
Example:
useEffect(() => {
setTotal(price * quantity)
}, [price, quantity])This creates unnecessary work.
total can already be calculated during rendering.The effect adds another state update, another render, and another thing to debug.
A useful question:
Does this code synchronize with something outside React?
If not, it probably doesn't belong inside
useEffect.