Andrew's Digital Garden

useEffect

useEffect lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

useEffect runs on every render. You can skip effects by passing an array ('dependencies array') to the useEffect. Now, the useEffect will skip if all variables in the array are the same value as the previous render.

The dependencies array should include all values that change over time and are used by the effect.

If you pass an empty array [] it will stop the effect from being re-run. Effectively this will run the useEffect twice, once on first render, and once on last render.

[[react]] [[reacthooks]]

useEffect