You are currently viewing How to Avoid Unwanted Side Effects using useeffect React Hooks

How to Avoid Unwanted Side Effects using useeffect React Hooks

useeffect in ReactJS Hooks

If you have been working with class components you would have performed side effects in your components. For example: updating the DOM, fetching data from an API endpoint, and setting up subscriptions or timers. Since the render() method would be too early to perform side effects, you had to make use of the lifecycle methods.  Useeffect hooks in ReactJS are a close replacement for comonentDidMount, componentDidUpdate, and componentWillUnmount.

Side Effect 1: Update Document Title

ComponentDidMount(){
document.title = "you clicked ${this.state.count} times";
}

ComponentDidUpdate(){
document.title = "you clicked ${this.state.count} times";
}

For example: consider updating the document title to the current counter value on the initial render you want to set the document title to click zero times. So, this code goes into the component did mount which is executed only once in the component lifecycle. Then we would have a button to increment the count state value but when the count value increments we also need to update the document title again and for that, we add the same piece of code in the component did update lifecycle hook. This lifecycle method is called anytime the component updates and is perfect for updating the document.

Side Effect 2: Timer

ComponentDidMount(){
this.interval = setInterval(this.tick, 1000)
}

ComponentDidUnmoun(){
clearIntervall(this.interval)
}

Now let’s consider another side effect of Timer. On component DidMount, we set up a time to log to the console the string “hello” every 5 seconds. We can clear this time when the component is being removed from the DOM and we do that in the component will unmount lifecycle method.

So the component code is complete and everything works as expected but you start to render if it can be better.

READ ALSO  Perfect Scenario to Use React UseReducer and UseState Hook

Combine the two side effect

ComponentDidMount(){
document.title = "you clicked ${this.state.count} times";
this.interval = setInterval(this.tick, 1000)
}
ComponentDidUpdate(){
document.title = "you clicked ${this.state.count} times";
}
ComponentDidUnmoun(){
clearIntervall(this.interval)
}

Here’s the first thing to observe to update the document title, we are writing the same code twice. Once in ComponentDidMount() and once in ComponentDidUpdate(), exact same code but twice.
The second thing to observe is how the code is together or split apart. The code related to the timer setInterval and the clear interval are related and put into different code blocks. There are different lifecycle methods.

The code to update the DOM and set an interval, which is completely unrelated are put together. Wouldn’t it be nice to not repeat code and at the same time group together only the related code?

Conclusion

That is well the effect hook comes into the picture. The Effect hook lets you perform side effects in functional components while addressing the problems we just discussed. Useeffect hook in ReactJS is a close replacement for comonentDidMount, componentDidUpdate, and componentWillUnmount. The three lifecycle methods can be handled by the use effect hook.

Leave a Reply