react-hooks/globals
Disallow reassigning variables declared outside a component or hook during render
Also called react_hooks/globals, react/globals
React decides when and how often a component renders. In development, Strict Mode renders it twice. If rendering assigns to a variable that lives outside the component, that variable's value depends on how many times React happened to render.
You can assign in an effect or an event handler, because that code doesn't run during render.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react-hooks/globals" = "error" # or "warn"Examples#
example.jsx1 problem
let renderCount = 0;
function Counter() {
renderCountError: Cannot reassign variables declared outside of the component/hookVariable renderCount is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render). = renderCount + 1;
return <div>Rendered {renderCount} times</div>;
}A function that's called during render counts too:
example.jsx1 problem
let total = 0;
function Cart({ items }) {
const add = item => {
totalError: Cannot reassign variables declared outside of the component/hookVariable total is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render). = total + item.price;
};
items.forEach(add);
return <div>{total}</div>;
}example.jsxNo problems
function Cart({ items }) {
let total = 0;
for (const item of items) {
total = total + item.price;
}
return <div>{total}</div>;
}example.jsxNo problems
import { useEffect } from "react";
let mountedPages = 0;
let lastClicked = null;
function Page({ id }) {
useEffect(() => {
mountedPages = mountedPages + 1;
}, []);
return <button onClick={() => { lastClicked = id; }}>Open</button>;
}Changing a property of an outside object is a job for react-hooks/immutability, not this rule:
example.jsxNo problems
const config = { theme: "light" };
function Page() {
config.theme = "dark";
return <div className={config.theme} />;
}