Equivalent to componentDidUpdate using React hooks

Question

tldr; How do I simulate componentDidUpdate or otherwise use the key prop with an array to force my component to be reset?

Answer 1

use a custom hook

export const useComponentDidUpdate = (effect, dependencies) => {
  const hasMounted = useRef(false);

  useEffect(
    () => {
      if (!hasMounted.current) {
        hasMounted.current = true;
        return;
      }
      effect();
    }, 
    dependencies
  );
};

Effect will not run after the initial render. Thereafter, it depends on the array of values that should be observed. If it's empty, it will run after every render. Otherwise, it will run when one of it's values has changed.