DEV Community

Cover image for The useEffect Cheatsheet
Mohammad Bagher Abiyat
Mohammad Bagher Abiyat

Posted on • Originally published at bugged.dev

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
Enter fullscreen mode Exit fullscreen mode

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
}); 
Enter fullscreen mode Exit fullscreen mode
  • 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
}, []);
Enter fullscreen mode Exit fullscreen mode
  • 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]);
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (12)

Collapse
 
jaco9419 profile image
Jorge

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

Collapse
 
aslemammad profile image
Mohammad Bagher Abiyat

Thank you Jorge, I appreciate this.

Collapse
 
tubaashuruq profile image
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. ادعية لرجوع الزوج

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good code snippets.

Collapse
 
aslemammad profile image
Mohammad Bagher Abiyat

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

Collapse
 
gamevnlc profile image
ToujouAya

Awesome, it's simple and helpful nice article

Collapse
 
aslemammad profile image
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.

Collapse
 
poetro profile image
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.

Collapse
 
aslemammad profile image
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.

Collapse
 
mistryvatsal profile image
Vatsal Mistry

Explained in clear words! Appreciated. 👍👌

Collapse
 
aslemammad profile image
Mohammad Bagher Abiyat

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.