"different functions with the same name", but I'm using useCallback.

[welldone-software]

"different functions with the same name", but I'm using useCallback.

[vzaidman]

fixed in v5.0.0-alpha.2

[vzaidman]

after investigating this issue I believe I have the answers.

When you mark a "huge" component with "whyDidYouRender", you expect it to not re-render where it can be prevented.

While React.useCallback is a very useful hook, it might cause problems nevertheless.

For example (i created a sandbox for this):
https://codesandbox.io/s/welldone-softwarewhy-did-you-render-usecallback-example-7co06

const UseCallbackNewFnOnClick = () => {
  const [value, setValue] = React.useState(0);

  // this useCallback returns a new function on each value change
  const handleClick = React.useCallback(() => {
    setValue(value + 1);
  }, [value, setValue]);

  return (
    <div>
      <h1>useCallback</h1>
      value: {value}
      <br />
      <HugeComponentWithButtonWeDontWantToReRender
        text="increase"
        onClick={handleClick}
      />
    </div>
  );
};

vs

const UseCallbackAlwaysSameFn = () => {
  const [value, setValue] = React.useState(0);

  // this useCallback never returns a new function
  const handleClick = React.useCallback(() => {
    setValue(value => value + 1);
  }, [setValue]);

  return (
    <div>
      <h1>useCallback</h1>
      value: {value}
      <br />
      <HugeComponentWithButtonWeDontWantToReRender
        text="increase"
        onClick={handleClick}
      />
    </div>
  );
};

If you mark a component with whyDidYouRender, it probably means you don't want it to receive a new fn all the time. this can be prevented in many ways. one of them is the way displayed in the example, another one would be not to use hooks at all.

what do you think @DaleSalcedo ?

[Hypnosphi]

Related: facebook/react#14099

[vzaidman]

yes there are. I still think about how to make it as clear and as robust as possible in this sense. if you have any suggestions, i'll be glad to hear.

[vzaidman]

Re-opened for the record because I was asked about it again:

We wait on facebook/react#14099 to be fixed so the fn returned from useCallback wan't cause a re-render of the component it is passed to.

[vzaidman]

This comparison was created before hooks were available, where passing () => to big components meant trouble. Now it's not the case however:
useCallback regenerates the fn passed to a component only if it changed.

It's indeed something that we need to rethink.

[vzaidman]

Related: facebook/react#14099

exectly

[Hypnosphi]

Possible workaround: facebook/react#14099 (comment)

// use this instead of `useCallback`
function useEventCallback(fn) {
  let ref = useRef();
  useEffect(() => {
    ref.current = fn;
  });
  return useCallback((...args) => ref.current(...args), []);
}

[DaleSalcedo]

@vzaidman yes that makes alot of sense. thank you for the example as well.

i should probably close this issue now, thanks everyone for the feedback!

[Hypnosphi]

@vzaidman there are valid cases for callback invalidation, see facebook/react#14099 (comment)

How can I tell why-did-you-render that callback reference change is expected here?