useEffect: A whole new mental model

react.js

Are you still afraid of side Effects and useEffect ?

You are good in react and using react components you are mostly satisfied, But still sometimes when you useEffect, the pieces don’t quite fit together. You have a nagging feeling that you’re missing something. It seems similar to class lifecycles… but is it really? You find yourself asking questions like:

• 🤔 How do I replicate componentDidMount with useEffect?
• 🤔 How do I correctly fetch data inside useEffect? What is []?
• 🤔 Do I need to specify functions as effect dependencies or not?
• 🤔 Why do I sometimes get an infinite refetching loop?

If you also have questions like these then this blog is specially for you.

Hello, I am Nishant. I am a student and developer, and you should know that I was also not a big fan of side effects and useEffect. If you can relate to this, don’t worry; after working on many projects (small and large), I discovered few cools ways to learn side effects that every developer should know.

So, How do we learn useEffect ?

Yoda will help you to learn useEffect……….😄

“Unlearn what you have learned.” — Yoda

yoda, starwars

😄😄😄😄Lets see what that means-

First of all, What are side Effects ?

If your React component affects anything outside of itself, it’s called a side effect.

Side effects shouldn’t happen during component render. Therefore they do not belong to the body of a functional component. React has a special place for them.

Then, How do we Deal with side effects ?

The special place for side effects in react is inside the useEffect hook. Hence the name.

By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.

Let’s try it

The useEffect does not run during the render. It runs after the render, which is what we want. But we still have the same problem. That’s because, by default, useEffect will run after every component render.

Running effects conditionally:

There is a way to run effects conditionally, not after every render. The useEffect hook accepts the dependency list as a second argument. React will only re-run the effect if any dependency in the list changes. Let’s try it out:

When you pass an empty array as a dependency list, the effect will run only once, after the first render. It prevents the infinite loop from happening in our case. However, you might notice that our fetch function relies on the props.id .

Reacting to changes

Let’s pick up where we left off and see what happens when we change the component’s props.

ahhhh…………Nothing Happens 🤔

We would expect the component to react to prop change and fetch another product, but nothing happens. That’s because we have an empty dependency list.

If the side effect relies on any props or state variables, we should put them in the dependency list. After every render, React will check whether any dependency has changed, and if it did, will re-run the effect.

This is all about useEffect……………
wait what about questions I asked did you forget to answer ?

Nahhhhhhhhhhhhhh………………..I didn’t 😄😄. Lets answer those questions….

Question -1 : How do I correctly fetch data inside useEffect? What is []?

Read this to learn how to fetch data using useEffect. Dependency arrays ( [] ) are a concept that is tightly coupled to hooks in React (thus also to function components). Some hooks, like useEffect and useCallback have 2 arguments. The first one is a callback (a function), and the second one is the dependency array. It takes the form of an array of variables.

Question -2 : Do I need to specify functions as effect dependencies or not?

The recommendation is to hoist functions that don’t need props or state outside of your component, and pull the ones that are used only by an effect inside of that effect. If after that your effect still ends up using functions in the render scope (including function from props), wrap them into useCallback where they’re defined, and repeat the process. Why does it matter? Functions can “see” values from props and state — so they participate in the data flow.

Question -3 : Why do I sometimes get an infinite refetching loop?

This can happen if you’re doing data fetching in an effect without the second dependencies argument. Without it, effects run after every render — and setting the state will trigger the effects again. An infinite loop may also happen if you specify a value that always changes in the dependency array. You can tell which one by removing them one by one. However, removing a dependency you use (or blindly specifying []) is usually the wrong fix. Instead, fix the problem at its source.

Hope now you understand the concept of side Effect and useEffect………
If you do then support me and do follow me on my social accounts 😄😄

LinkedIn
GitHub
Mail

👋👋 Happy Hacking and good learning.👋👋