Handling Side Effects & Working with the useEffect() Hook

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, effect(), inject(), @if/@for).

Test yourself

14 questions

1
What Side Effects Are
A side effect is any code that reaches outside the component's job of turning props and state into JSX.
2
useEffect and the Dependency Array
useEffect(setup, dependencies?) runs setup after the component renders, and re-runs it when a dependency changes.
3
When You Don't Need an Effect
Code that looks like a side effect but belongs in an event handler, a state initializer, or the render body.
4
Syncing with DOM and Browser APIs
Using an effect to keep an imperative API in step with a prop or state value.
5
Cleanup Functions
A function returned from an effect that undoes its work: clearing timers, removing listeners, or closing connections.
6
Infinite Loops, Functions as Dependencies, and useCallback
useCallback(fn, deps) returns the same function instance across renders until one of its dependencies changes.
7
Summary