React useEffect Hook when only one of the effect's deps changes, but not the others

Question

I have a functional component using Hooks:

function Component(props) {
  const [ items, setItems ] = useState([]);

  // In a callback Hook to prevent unnece         


        

Answer 1

An easy way out is to write a custom hook to help us with that

// Desired hook
const useCompare = (val) => {
    const prevVal = usePrevious(val)
    return prevVal !== val
}

// Helper hook
const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
}

and then use it in useEffect

const Component = (props) => {
    const hasItemIdChanged = useCompare(props.itemId);
    useEffect(() => {
        if(hasItemIdChanged) {
         // ...
        }
    }, [items, props.itemId])
}