Skip to content

[Compiler Bug]: False positive for “impure function during render” inside callback #34046

@controversial

Description

@controversial

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCASggGYA0JZAolVQnHnaQgMICGANnwBGPOAGsCAXwJUYEDAQDkMBCLwKA3AB0AdjoQAPHPgIATajyh9CVKNrZoI2ggFkAngEEsWABQBKIjoEBHCOYITKAI5QCGGUVAQAvPQU1N7alny+WrpOwaGEPNqYPHgIicm8AsJi3t54mAj+CQB8AblBIdqQfAgAdHwQAObeziUAFr0whSZyfgQA1AT1GI3ZQUGR0bHUvXCwytqESZsxeO5FGCUO2gBiUyvehcWlWYGSdADaALqvOUEA9P8CABlPA8Yx4MZlA5mGAEAYQLBvThMFhsWpNVrAN4bBBRU5xXb7BCHconMLnZ7XO48B5PS4vNbrZR4WBOOYtIgENDxbzkvCEvYwA54fxwQqIPiUhnU+4IPl4rYCnZCkVZSRMiSfeklBA-bJvFlsgjpATZCQ6EASIA

Repro steps

Run eslint-plugin-react-hooks with the react-compiler rule turned on

See

Error: Cannot call impure function during render

`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render.

Math.random() is not called during render, and is only called during a useCallback that is called outside of the component’s render cycle:

import { useRef, useEffect, useCallback } from 'react';

export default function MyApp() {
  const requestRef = useRef<number | null>(null);

  const animate = useCallback((time: number) => {
    // ⚠️ false positive “impure function called during render” here:
    console.log(Math.random() + time);
    requestRef.current = requestAnimationFrame(animate);
  }, []);

  // Start the render loop
  useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); };
  }, [animate]);

  return null;
}

How often does this bug happen?

Every time

What version of React are you using?

react@19.1.1

What version of React Compiler are you using?

eslint-plugin-react-hooks@0.0.0-experimental-9be531cd-20250729

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bugType: Bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions