useEffectX: A better alternative to useEffect
Tags: react, reacthook, reactnative, javascript
Published: 2020-08-16 14:53:27

---
title: useEffectX: A better alternative to useEffect
published: true
date: 2020-08-15 17:01:01 UTC
tags: react,reacthook,reactnative,javascript
canonical_url: https://medium.com/@anilchaudhary453/a-better-alternative-to-useeffect-420737670211
---

![](https://cdn-images-1.medium.com/max/1024/0*DW2sTbM9H7Eb1iTC)<figcaption>Photo by <a href="https://unsplash.com/@avery_james?utm_source=medium&amp;utm_medium=referral">Avery Morrow</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

My experience with [React hooks](https://reactjs.org/docs/hooks-intro.html) have been amazing. In this article, I will precisely talk on one of the most prominent hooks that we use on a daily basis which is **_useEffect._**

I am assuming the readers coming to this article has good understanding on useEffect. If not, please first go through the concept at [reactjs.org](https://reactjs.org/docs/hooks-reference.html#useeffect).

So essentially, **_useEffect_** react to changes in dependency list. They have replaced **_componentDidMount, componentDidUpdate, componentWillUnmount and componentWillReceiveProps in_** class based react components.

It’s very common to react to changes in props values or state values over the lifetime of a component. we also need to compare previous values and current values when reacting to changes often. In the class based component, we had **_componentDidUpdate_** for the similar use-cases.

It has following interface:

```jsx
componentDidUpdate(prevProps, prevState, snapshot)
```

You have access to **_prevProps(previous props)_** and **_prevState(previous state)_**, which can be used to make comparisons and react appropriately.

What about useEffect, how would you do those kind of comparison with them?

### Solution 1

You can have a **_usePrevious_** custom hook which will always give you the previous value and that you make use in your useEffect to complete the comparison. Let’s see some code.

{% codesandbox keen-lovelace-t27gj %}

Notice, how **_usePrevious_** hook helps us by keeping a track of previous value. Now think about scenario, when there are more than one dependency in our useEffect. We need to make use of **_usePrevious_** hook that many times or we have to re-define our **_usePrevious_** hook to track an array of dependency.

> **_Isn’t it too much of work every time ?_**

**_Can we have something similar to componentDidUpdate ? We can have previous and current values of the dependencies as the argument of the callback of useEffect._**

That could save us a lot of time while working with update scenarios in useEffect hook.

### Solution 2

I was able to package everything in a npm package, which can act as a drop in replacement for useEffect anywhere. I call it **_useEffectX._** Let’s see the the same example we showed in above codesandbox with our shiny new **_useEffectX._**

{% codesandbox ancient-frog-t7tc0 %}


Notice now , how we have access to previous values in the arguments of useEffectX’s callback itself. We don’t need any usePrevious hook now plus the arguments are completely optional same with any function. The code snippets below will also work exactly same as official **_useEffect_**

```
useEffectX(() => {
  console.log(val, someotherVal)
}, [val, someotherVal])

useEffectX(() => {
 console.log("do something after every render")
})
```

Thanks. Please let me know , what you all think about this **_useEffectX._**

{% github simbathesailor/use-effect-x %}


[https://twitter.com/simbatheesailor](https://twitter.com/simbatheesailor)