Useful hooks - useStateWithCallback, useChanagesEffect

useChangesEffect.js

const useChangesEffect = (callback, dependencies, dependencyNames = null) => {
  const prevValues = useRef(dependencies);

  useEffect(() => {
    const changes = [];
    for (let i = 0; i < prevValues.current.length; i++) {
      if (!shallowEqual(prevValues.current[i], dependencies[i])) {
        changes.push(dependencyNames ? dependencyNames[i] : i);
      }
    }
    callback(changes);
    prevValues.current = dependencies;
  }, dependencies);
};

// Usage1
useChangesEffect((changes) => {
  if (changes.includes(0)) {
    console.log('dep1 changed');
  }
  if (changes.includes(1)) {
    console.log('dep2 changed');
  }
}, [dep1, dep2]);

// Usage2
useChangesEffect((changes) => {
  if (changes.includes('dep1')) {
    console.log('dep1 changed');
  }
  if (changes.includes('dep2')) {
    console.log('dep2 changed');
  }
}, [dep1, dep2], ['dep1', 'dep2']);

useStateWithCallback.js

const { useState, useRef, useEffect } = require('react');

const useStateWithCallback = (initialState) => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(() => undefined);

  const setStateCB = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

  useEffect(() => {
    callbackRef.current?.();
  }, [state]);

  return [state, setStateCB];
};

export default useStateWithCallback;