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!

[garipov]

Thank you for your reply.

I was just following the documentation and assumed I wouldn't need useMemo in regular cases. However, I see your point.

Just in case this could be improved someday, I noticed that everything works correctly without the map function.
For example this code works pretty well:

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

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

  return (
    <div>
      <Items data={processedData} onClick={handleClick} />
    </div>
  );
}

But as soon as I add a map

const items = processedData.map(data => <Item data={data} />)

it becomes the issue.
Hope it might help one day. Thank you for your attention.

[0xShubhamSolanki]

Hey @garipov, no worries, following the docs is exactly the point, and the compiler's still evolving, so this feedback is gold! That map twist is spot on; it creates a fresh array every render, nuking child memos downstream. If you've got time, drop a repro on the react-compiler GitHub (sandbox with/without the map), it'll give the team a nudge toward finer dep caching. Keep those sharp eyes peeled, man.