useEffect call recursively when add functional props as dependency

What is the current behavior?

1. Define a component with useEffect and useState

const [style, setStyle] = useState({ color: "#000000" });
const [signature, setSignature] = useState("Your Name");

useEffect(() => {
    html2canvas(document.getElementById("signature-container")).then(
     canvasEl => {
       onChange(canvasEl.toDataURL());
      },
   );
}, [signature, style]);

1. Pass onChange function as props <Text onChange={handleChange} />

It’s warn need to add onChange prop into dependency array of useEffect but If I add onChange prop into the array, useEffect call recursively

What is the expected behavior? Don’t need to warn if user don’t pass function props as dependency

[gaearon]

OK this is interesting. Normally you’d fix this by passing an onChange with a stable identity:

const handleChange = useCallback(() => {
  /* do stuff */
}, [/* its deps */])

<Text onChange={handleChange} />

But in your case it wouldn’t work because it’s inside Formik’s render prop callback.

I’m not sure what’s the idiomatic solution here from Formik’s point of view.

But in your case, it seems like it’s not actually important to re-run onChange if the onChange function itself changes. Therefore, you can use a ref to explicitly track its latest value:

  const latestOnChange = useRef(onChange);
  useEffect(() => {
    latestOnChange.current = onChange;
  }, [onChange]);

And then you can all latestOnChange.current in the effect.

https://codesandbox.io/s/l5z8z3jj3z

[enrique-ramirez]

Was there ever a proper answer to @gaurav5430 's question? I’m wondering the same. It feels odd to ask parents to pass functions with stable identity’s as props. There’s no way to know WHEN you need to do this, and asking them to use useCallback everywhere don’t seem like a good idea.

I, too, have a shared component library and it seems to me unfeasible to ask consumers to always pass useCallback or else have the component break. I’ve relied on the useRef hack for a while, but it comes with its own limitations. Sometimes I also just ignore the empty dependency list and be done with it.

Quick sample would be a modal component:

const Modal = ({ onClose }) => {
  useEffect(() => {
    const closeOnEscape = (event) => event.key === 'Escape' ? onClose() : null

    document.body.addEventListener('keydown', closeOnEscape)
    return () => document.body.removeEventListener('keydown', closeOnEscape)
  }, [])

  return createPortal(...)
}

Is there a best practice for this, @gaearon ?