Effect Hooks

Types of Effects in React

How to Know the Effects That Require Cleanup

How to Know the Effects That Do Not Require Any Cleanup

How to Clean Up a Component’s Effects

When does React run the cleanup function?

Effect’s setup code vs Effect’s cleanup function

How to Specify When React Effects Should Run

Syntax of the Effect Hook

What is a reactive value in React?

Why are props reactive values in React?

Are all functions and variables reactive values?

Should functions or objects be in a dependency array?

Is the object returned by useRef a reactive value?

Is the useRef().current property a reactive value?

When does React run an Effect?

How to run Effects after every render

How to run Effects only after a function component’s first render

How to run an Effect after the first render, and when any of its dependencies change

What to know about the dependency array

Important Things to Know About the Effect Hook in React

Effects are best used to synchronize components with external systems.

Avoid unnecessary object and function dependencies by restructuring your Effect

Why does the dependency array view functions and objects declared in a component’s body as changed items on every render?

Static objects and functions are often best declared outside the component

Consider declaring dynamic objects and functions inside your Effect Hook

Depend on the primitive values an Effect actually needs instead of an entire object

React runs an extra setup → cleanup → setup cycle in development with strict mode