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 body 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?

Example of a non-reactive JavaScript function

Example of a reactive JavaScript function

When does React run an Effect?

How to run Effects on every render

How to run Effects only after a function component’s mounting

How to run Effects only on mount, and if the component’s reactive values change

What to know about the dependency array

Important Things to Know About the Effect Hook in React

Effect Hooks are best for connecting components with external systems

Remove unnecessary reactive objects and functions from the dependency array

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 best declared outside your component

Dynamic objects and functions are best declared inside your Effect Hook

Extract the primitive values of the objects your component received as its props

Effects run twice in development