React’s useEffect Hook

Initially, coming from a class-based React context, I had a hard time understanding hooks.

And the hook I had the hardest time with was useEffect.

Gladly, I understood it, and I now want to show you what useEffect is and how you can use it.

A quick hook introduction

Hooks were added to React in 16.8 and enable us to write functional components while still using state and other React features like lifecycle methods without a need for classes.

Some hooks also enable you to set state in functional components. This doesn’t sound like much, but unlike class components, where you had to modify your component’s state for React to notice, you need to tell React when something changed in functional components, too.

The useEffect hook

useEffect is a hook meant to be used when you want to perform side effects.

Manually changing the DOM or fetching data are examples of this.

By default, this hook runs after each render, which means that every time React sees the need to rerender.

Use cases of useEffect

If you are aware of React’s class-style lifecycle methods: