What is side-effect in ReactJS and how to handle it?

What is side Effects

ReactJS is a UI library. It’s job is to render the UI and update it on user's interaction or events. Eg: if a user has clicked on a button then update the UI accordingly. However, there are many events which doesn't require any user's interaction or event. Eg: API data on load of application, a user has logged in and we want to keep the users information and update the themes, or other information. Such requirements which doesn't need any user events, or interaction is known as "side effects" in ReactJS

Why we need side effects

There are a lot more operations in ReactJS which won't require user's events/interactions but they are crucial to do the application work.

what is useEffect hook

useEffect() is a hook by ReactJS and it allows us to handle such side effects in the react component. It give us the correct way to handle the side effects in ReactJS code.

Loved this blog? I have created a video on the same topic and in Hindi:(Learn useEffect in less than 15 mins) [https://youtu.be/Jbb_xJfURhI]

syntax of useEffect

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

useEffect() has 2 parts:

1. method : Here we will write our side effect code

2. dependencies : Dependencies array is a place where we declare dependencies and which will decide when useEffect() should execute

useEffect() & dependency array

useEffect() also works as the lifecycle hook in ReactJS. This would depends on the dependency array.

1 . Omit dependency array

 useEffect(() => { 
  console.log('I am running');
})

This will run every time the component will re-render and 1st time too. This is componentDidMount, and componentDidUpdate lifecycle hooks.

We should keep those side effects here which you want every time when the component is re-rendering.

2 . Blank dependency array

 useEffect(() => { 
  console.log('I am running');
},[])

This will run only once at the initial mount of the component and after that it won't run. You can have those side effects which you only want at the first time of mounting of your component. Eg: API request.

3 . Value in dependency Array

 useEffect(() => { 
  console.log('I am running');
},[ count ])

Here we have added a state in the dependency array. This will make the useEffect to run once at the load time, and then whenever the state count will change. This will act as the componentDidUpdate and componentDidMount

4 . cleanup

If we need to do any cleanup of side-effect before the unmounting, and component re-render before the component re-render due to change in the state we can use the useEffect to do the same.

Please remember this is optional

 useEffect(() => { 
  console.log('I am running');
   return () => {
      // your clean up code
   }
},[ count ])

Happy Learning!!