react/purity Correctness
What it does
Validates that components and hooks are pure by checking that they do not call known-impure functions such as Math.random(), Date.now(), or performance.now() during render.
Async function components are exempt, including impure calls in nested callbacks. An async component is a Server Component: it renders once per request and does not re-render. Async hooks are still checked.
Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/purity.
Why is this bad?
Impure renders return different output for the same props and state, breaking memoization, concurrent rendering, and replayability.
Examples
Examples of incorrect code for this rule:
function Component() {
const rand = Math.random();
return <div>{rand}</div>;
}Examples of correct code for this rule:
import { useState } from "react";
function Component() {
const [rand, setRand] = useState(0);
return <button onClick={() => setRand(Math.random())}>{rand}</button>;
}
async function Posts({ posts }) {
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{Date.now()}</li>
))}
</ul>
);
}How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["react"],
"rules": {
"react/purity": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/purity": "error",
},
});oxlint --deny react/purity --react-pluginVersion
This rule was added in v1.79.0.