React Hooks useEffect Explained

Published by Pawan Sargar on

React useEffect explained

Use Effect is one of the most important React Hooks after Use State. As the useState is used to handle or manage component states, the useEffect was made to manage the Side Effects.

In this post I’ll explain what are side effects? and what is useEffect hook? with all possible use cases.

What is an Effect or (Side Effect)?

Side Effects are everything else that might be happening in our application.

eg:- Sending HTTP Requests, or storing something in browser storage

If we make an HTTP request for every state change inside our Functional component, the result can be what you want but not every time.

Because, in response to the HTTP Request, if you change any state then you can create an infinity loop.

Because, you would send a request whenever a function re-runs, and in response to the request, you change the state which triggers the function again.

Therefore, such side effects shouldn’t directly go inside the component function. Because that would most likely create bugs, infinity loops, or send too many HTTP requests.

So, how can we handle such side effects?

UseEffect() Hook –

To handle such side effects, there’s a tool provided by React, called userEffect() , it’s a special React Hook. It’s a function that we can run inside the component.

useEffect() is called with two arguments with two parameters.

useEffect(() => { ... }, [ dependencies ]);

So, the first argument is a function that should be executed AFTER every component evaluation IF the specified dependencies are changed.

The second argument is the specified Dependencies. There’s an Array full of dependencies, and whenever the dependencies change the first function will re-run.

So, then inside that function, you can pass your side-effect code and you can specify your dependencies for your function. So, ONLY whenever your dependency changes the function will re-run the side effect code that you provided.

Use Cases –

UseEffect besides useState is one of the most important React Hook you have and you need to understand it.

I will make this clear that at which point in time, the part of useEffect hook executes.

useEffect(() => {
    console.log("Effect Running!");
  });

If you use the useEffect without Dependencies, sure it’s valid to use. What will happen is, useEffect will be executed for every state update.

If you check your console, the “Effect Running” will be executed on every state updated.

Now, after you add an empty dependency,

useEffect(() => {
    console.log("Effect Running!");
  }, []);

This will only execute, only when the component is rendered first time. Not for every subsequent state change.

Now, we after we add a dependency,

useEffect(() => {
    console.log("Effect Running!");
  }, [emailInput]);

This will only run whenever the component is re-evaluated and the state of emailInput is changed.

We also have a clean up function,

useEffect(() => {
    console.log("Effect Running!");

    return () => {};
  }, [emailInput]);

This cleanup function return () => {}; runs before the state function runs, but not before the first time it runs.

If we do not have Dependency in clean up function,

useEffect(() => {
    console.log("Effect Running!");

    return () => {};
  }, []);

Now, Effect will only run whenever the component is removed from the dom.

I hope this post was helpful! If it was let us know your thoughts in the comment section below.

Pawan Sargar
Follow him
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *