useEffect Basics

Rendering should be pure. Talking to the outside world is a side effect.

Side effects include: fetching, timers, subscriptions, changing document.title, talking to a widget that is not React.

useEffect lets you run that code after React has painted the screen.

After paint

The function inside useEffect runs after the browser shows the input.

That way the paint is not blocked by extra work.

Cleanup

If you start a timer or a subscription, return a function that stops it.

React runs the cleanup before the next effect, and when the component unmounts.

Do not fetch in render

Putting fetch in the component body would start a new request every render.

That can loop forever. Put it in an effect, or in event handlers.

Effects are not for transforming data

If you can compute it during render, do that. Effects are for syncing with something outside React.

Tip: If you feel you need an effect to copy props into state, pause. You can often render from props directly.