A function is called when values it doesn't depend on are changed

[garipov]

While researching the example from the React website

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };
  ...
}

I found that expensiveProcessing function is called when onClick handler is changed, even though it doesn't depend on onClick. Here is compiled code:

if ($[0] !== data || $[1] !== onClick) {
    const processedData = expensiveProcessing(data);
    ...
}

I believe this is not optimal, and the expected compiled code should look like:

let t1;
if ($[0] !== data) {
  t1 = expensiveProcessing(data);
  $[0] = data;
  $[1] = t1;
} else {
  t1 = $[1];
}

[0xShubhamSolanki]

Hey @garipov, yeah I see what you're saying about that compiled code. The React Compiler (Forget) is basically lumping together the checks for all props used in the component, so even if expensiveProcessing only cares about data, it re-runs when onClick changes too. It's kinda a trade-off in the current setup to keep things from getting too split up in deps, but it does cause extra work like you pointed out.
To fix it for now, just slap a useMemo around the expensive bit and tie it only to [data]:

function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => expensiveProcessing(data), [data]);

  const handleClick = (item) => {
    onClick(item.id);
  };
  // ...
}

That way it skips recomputing unless data actually updates, and ignores onClick. Compiler won't mess with it if you do this manually. If you run into this a lot, maybe open a feature request on the docs for more precise auto-memo stuff? Let me know if that helps!