How to prevent React Compiler automatic memoization for intentionally volatile computations without using "use no memo"?

Question

I am using React Compiler v1.0 in a React 19 application. I have specific components where I intentionally want fresh calculations on every render for correctness reasons but the React Compiler is automatically memoizing them.

React Compiler automatically memoizes all values, but I have legitimate use cases where values should not be cached between renders. The "use no memo" directive disables the entire component's optimization, which throws away beneficial memoization for other parts of the component.

function RealtimeMonitor({ sensorId }) {
  // This timestamp MUST be fresh on every render for accurate monitoring
  const currentTimestamp = Date.now();
  
  // This should be memoized (expensive calculation)
  const processedData = processLargeSensorDataset(sensorId);
  
  // This should NOT be memoized (randomization needed each render)
  const chartColor = getRandomChartColor();
  
  return (
    <div>
      <Chart 
        data={processedData} 
        color={chartColor}
        timestamp={currentTimestamp}
      />
      <LastUpdated time={currentTimestamp} />
    </div>
  );
}

How can I mark specific values or computations within a component as "volatile" or "non-memoizable" while allowing React Compiler to continue optimizing the rest of the component? Is there a special directive, recommended pattern, or compiler configuration that allows mixing memoized and non-memoized computations without disabling optimization for the entire component?

Drew Reese · Accepted Answer · 2025-10-29 05:21:19Z

How can I mark specific values or computations within a component as "volatile" or "non-memoizable" while allowing React Compiler to continue optimizing the rest of the component? Is there a special directive, recommended pattern, or compiler configuration that allows mixing memoized and non-memoized computations without disabling optimization for the entire component?

Based on the current usage documentation it would appear you have only Function-level directives (Place directives at the beginning of a function to control its compilation) and Module-level directives (Place directives at the top of a file to affect all functions in that module). So the answer appears to be "No, it's all or nothing" at function or module scope.

If you have need to customize the compiler behavior more granularly than the function/module scope then the option I see is to opt-out of compiler optimization and manually optimize any computations yourself just as you would have done before using React-Compiler, i.e. using the useMemo or useCallback hooks, or memo Higher-Order Component (and any other memoization tools/libraries).

Example opting the component function out of compilation and memoizing the expensive function call:

function RealtimeMonitor({ sensorId }) {
  // Opt-out of compiler optimizations to allow dynamic values
  // to be computed each render. We don't want them to be memoized.
  "use no memo";

  // This timestamp MUST be fresh on every render for accurate monitoring
  const currentTimestamp = Date.now();
  
  // This should be memoized (expensive calculation)
  const processedData = React.useMemo(
    () => processLargeSensorDataset(sensorId),
    [sensorId]
  );
  
  // This should NOT be memoized (randomization needed each render)
  const chartColor = getRandomChartColor();
  
  return (
    <div>
      <Chart 
        data={processedData} 
        color={chartColor}
        timestamp={currentTimestamp}
      />
      <LastUpdated time={currentTimestamp} />
    </div>
  );
}

Collectives™ on Stack Overflow

How to prevent React Compiler automatic memoization for intentionally volatile computations without using "use no memo"?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related