useCallback() invalidates too often in practice

This is related to https://github.com/facebook/react/issues/14092, https://github.com/facebook/react/issues/14066, https://github.com/reactjs/rfcs/issues/83, and some other issues.

The problem is that we often want to avoid invalidating a callback (e.g. to preserve shallow equality below or to avoid re-subscriptions in the effects). But if it depends on props or state, it’s likely it’ll invalidate too often. See https://github.com/facebook/react/issues/14092#issuecomment-435907249 for current workarounds.

useReducer doesn’t suffer from this because the reducer is evaluated directly in the render phase. @sebmarkbage had an idea about giving useCallback similar semantics but it’ll likely require complex implementation work. Seems like we’d have to do something like this though.

I’m filing this just to acknowledge the issue exists, and to track further work on this.

[sophiebits]

@sokra An alternate would be:

function useEventCallback(fn) {
  let ref = useRef();
  useLayoutEffect(() => {
    ref.current = fn;
  });
  return useCallback(() => (0, ref.current)(), []);
}

This doesn’t require the args like yours has. But again, you can’t call this in the render phase and the use of mutation is dicey for concurrent.

[gaearon]

We’ve submitted a proposal to solve this. Would appreciate your input!

https://github.com/reactjs/rfcs/pull/220