react-hooks-js/purity

Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks/lints/purity

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on calls to nondeterministic APIs — Math.random(), Date.now(), new Date() with no arguments, crypto.randomUUID(), performance.now() — in the synchronous body of a component or hook. False positive: the call lives inside a useEffect, event handler, or useState lazy initializer (useState(() => crypto.randomUUID()) is the recommended fix and should not trigger).

Fix prompt

Use this once validation confirms the diagnostic is real.

For values needed once per mount, use useState's lazy initializer: const [id] = useState(() => crypto.randomUUID()). For values that update over time (a clock), set state from a useEffect interval. For values needed only inside an event handler, just call the impure API directly there. Render must stay deterministic to keep hydration, memoization, and StrictMode double-invocation correct. See https://react.dev/reference/eslint-plugin-react-hooks/lints/purity

Related rules

More React Compiler rules from the rules reference:

• react-hooks-js/refs: Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)
• react-hooks-js/set-state-in-effect: Validates against calling setState synchronously in an effect. This can indicate non-local derived data, a derived event pattern, or improper external data synchronization.
• react-hooks-js/set-state-in-render: Validates against setting state during render, which can trigger additional renders and potential infinite render loops
• react-hooks-js/static-components: Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering
• react-hooks-js/todo: Unimplemented features