The useEffect Cheatsheet

When I started ReactJS, I really enjoyed my first steps, component, props and many fun things about react. One of that features was useEffect; it was fun but complicated for me while I struggled to learn it.

Now I want to share my mental model in this small cheat sheet to help you learn useEffect better or own a better mental model.

Philosophy

useEffect is not a lifecycle hook. It's a mechanism for synchronizing side-effects (fetch, setTimeout, ...) with the state of your app. EpicReact.dev

The main goal is not using useEffect for the component lifecycle but using it to do stuff when state-changes (re-renders).

useEffect(() => {
  // A: run whenever the deps changes
  return {
      // B: Optional, runs before 1, we call this the clean-up function
  }
}, deps); // deps is Optional too

useEffect's running steps:

• 1: Run A
• 2: Wait for new state changes (component re-renders)
• 3: If the deps changed
  • Run B to cleanup the previous render's side-effects
  • Go to 2

Dependencies

• No dependency: the side-effect function (A) will run on every state-change (re-render)

useEffect(() => {
  // I depend on everything, I'll run on every re-render
}); 

• Empty Array: There's nothing to listen to its changes, so it'll run the side-effect function just one time at the state initialization (first render)

useEffect(() => {
  // I depend on nothing, I'll run just one time
}, []);

• Non-Empty Array: The side-effect function runs on every dependency changes (at least one of the dependencies)

useEffect(() => {
  // I depend on state1, state2 and prop1
  // I'll run on every change of these dependencies
}, [state1, state2, prop1]);

Each Render Has Its Own Effects

I really love the "Each Render has its own Effects" title; I think almost all hooks rely on that title. We should note that every render has its own function body and its own values. The same goes for the side-effect function; check this.

useEffect(() => {
  console.log(count)
}, [count]);

let's do some fake state changes and see what happens to the side-effect function.

// in the first render, `count` is 0
// The side-effect function is going to be like this
() => {
  console.log(0)
}
// assume we change `count` to 1 (setCount(1)), next render is like that
() => {
  console.log(1)
}
// and so on...

That's how useEffect works around dependencies.

• PDF on GitHub

I hope you enjoyed this Cheatsheet. Don't forget to share and send reactions to my article. If you wanted to tell me something, tell me on Twitter or mention me anywhere else, You can even subscribe to my newsletter and follow me on Github.

Comments

[Jorge]

I like it when articles are simply explained like this one. Thabk you for sharing!

[Mohammad Bagher Abiyat]

Thank you Jorge, I appreciate this.

[TubaaShuruq]

Thanks, some interesting points on here. I’m currently building a single page app using React and WordPress and the hooks are proving very useful. ادعية لرجوع الزوج

[Andrew Baisden]

Good code snippets.

[Mohammad Bagher Abiyat]

Thank you, Andrew. You can follow my Github and Twitter for more fun snippets.

[ToujouAya]

Awesome, it's simple and helpful nice article

[Mohammad Bagher Abiyat]

Thank you ToujouAya, folks like you make me happier and give me the energy to do more stuff. You can follow my Github and Twitter for more fun things.

[Peter Galiba]

You forgot to provide details about what you should do in B, and how should you prepare it. It is important in the light of the React 17 release.

[Mohammad Bagher Abiyat]

Thanks for the suggestion; yes, I thought about it. But as it's a beginners tutorial more and a cheatsheet simultaneously, it'd be little complicated talking about the clean-up function.
Anyway, Thank you, Peter, for your time and suggestions.

[Vatsal Mistry]

Explained in clear words! Appreciated. 👍👌

[Mohammad Bagher Abiyat]

Thank you Vatsal, I appreciate it. you can follow my Github and Twitter for more fun things.