DEV Community

How to mimic componentDidUpdate() with React Hooks

SavagePixie on October 11, 2019

useEffect is a very useful hook. It receives a callback function that executes when the component has mounted and every time it updates. So it work...

Read full post

Hammed Oyedele • Oct 12 '19 • Edited

How about converting this to a custom hook?

import React, { useRef, useEffect, useState } from 'react'

// I also made it to support running when specific values update in deps
// The default value for deps will be undefined if you did not pass it
// and will have the same effect as not passing the parameter to useEffect
// so it watch for general updates by default
function useDidUpdate (callback, deps) {
  const hasMount = useRef(false)

  useEffect(() => {
    if (hasMount.current) {
      callback()
    } else {
      hasMount.current = true
    }
  }, deps)
}

// Usage:

function App () {
  useDidUpdate(() => {
    doStuff()
  })
}

// Or:

function AppTwo () {
  const [count, setCount] = useState(0)

  useDidUpdate(() => {
    doStuffIfCountUpdates()
  }, [count])
}

✌️✌️✌️

Matt Mayson • Jan 30 '20

Wow guys that really solved a problem i had.. useeffect doesn't imitate componentDidUpdate even after using prop as the last parameter , i used Hammeds solution with useDidUpdate and i just added a prevprops var . seems to be working fine so far.

Rudy Nappée • Oct 12 '19 • Edited

No, no, no folks don't do this ! It isn't the right way to use useEffect !

To mimic didMount juste pass [] as the second parameter of useEffect. To mimic didUpdate, pass all needed dependencies in the array.

But the best way to use useEffect is to avoid mimicking the old fashion lifecycle methods and understand the best coding practices hooks enables.

SavagePixie • Oct 12 '19 • Edited

So, would you care to provide a quick example of how to make useEffect not execute after the first render but execute on subsequent renders?

Or are you suggesting that one should (and indeed can) always find an alternative way that doesn't require to skip the useEffect on the first render?

Rudy Nappée • Oct 12 '19 • Edited

I agree your way doing this works perfectly and you can even wrap it in a custom hook to reuse it.

Having said that (admitting there are cases where you don't want to run a stuff on mount but still on all re-renders !), is this hack improving our code ?

According to React guys, hooks allows us to separate concerns and avoid us to write stuff like :

componentDidMount() {
   // concern 1
   // concern 2
   // concern 3
}

componentDidUpdate(prevProps) {
   if (prevProps.xxx !== this.props.xxx) {
      // concern 2
   }
   if (prevProps.yyy !== this.props.yyy) {
      // concern 3
   }
   // concern 4 (on each re-render because we can :) )
}

which is imperative, redundant and difficult to simplify. Effects are made to be used atomically, to maintain good readability :

useEffect(concern1, [...]);
useEffect(concern2, [...]);
...

If the effect concernX have to be trigged only on updates right after any user action or async stuff, IMO you better should rely on your component scope (props, states, sometimes ref or context, ...). Ex :

const [selectedColor, setSelectedColor] = useState('blank'); // or null or whatever
useEffect(() => {
   if (selectedColor !== 'blank') {
      // selectedCorolized unicorns popping
   }
}, [...]);

For readability purposes you can even put this in a custom hook and reuse the concern anywhere you want.

SavagePixie • Oct 13 '19

If the effect concernX have to be trigged only on updates right after any user action or async stuff, IMO you better should rely on your component scope (props, states, sometimes ref or context, ...). Ex:

So, if I'm understanding right what you're saying and especially this example, what you propose is to use something that already exists and that we're already monitoring to decide whether an effect hook should execute or not (and play with how that something has been initialised), rather than creating a specific reference to know whether the component has been mounted or not. Is that so?

Rudy Nappée • Oct 13 '19 • Edited

Exactly, rely on data values ans data changes instead of component lifecycle. It seems to be the way hooks are designed.

Actually all your props should be observed and changes propagated in your component render flow, it's a really different approach than class components. Dan Abramov made a really detailed blog post about that here : overreacted.io/a-complete-guide-to...

Just an apetizer :

It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me.

“Unlearn what you have learned.” — Yoda