globals
Validates against assignment/mutation of globals during render, part of ensuring that side effects must run outside of render.
This is an evaluation implementation and may contain false positives or negatives that have not yet been fully audited. Review each report carefully before applying fixes.
Full Name in eslint-plugin-react-x
react-x/globalsFull Name in @eslint-react/eslint-plugin
@eslint-react/globalsFeatures
🧪
Rule Details
Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently between development and production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler.
Examples
Mutating module-level variables during render
Module-level variables are shared across all component instances. Mutating them during render creates hidden shared state that React cannot track.
// Problem: Global counter
let renderCount = 0;
function Component() {
renderCount++; // Mutating a global variable during render
return <div>Count: {renderCount}</div>;
}// Recommended: Use useState to manage the count
function Component() {
const [clickCount, setClickCount] = useState(0);
const handleClick = () => {
setClickCount(c => c + 1);
};
return (
<button onClick={handleClick}>
Clicked: {clickCount} times
</button>
);
}Modifying window or DOM globals during render
Writing to browser globals during render causes side effects that leak outside the component and may behave differently between server and client.
// Problem: Modifying a window property
function Component({ userId }) {
window.currentUser = userId; // Global side effect
return <div>User: {userId}</div>;
}// Recommended: Sync external state in an effect
function Component({ title }) {
useEffect(() => {
document.title = title; // Side effect moved out of the render phase
}, [title]);
return <div>Page: {title}</div>;
}Mutating global arrays or objects
Pushing to or modifying global collections during render makes their state unpredictable across renders and component instances.
// Problem: Mutating a global array
const events = [];
function Component({ event }) {
events.push(event); // Global array mutation
return <div>Events: {events.length}</div>;
}// Recommended: Use Context to pass global values
function Component() {
const user = useContext(UserContext);
return <div>User: {user.id}</div>;
}Cache manipulation during render
Even caches that seem local can be mutated during render, making their contents depend on render order rather than predictable data flow.
// Problem: Modifying a cache during render
const cache = {};
function Component({ id }) {
if (!cache[id]) {
cache[id] = fetchData(id); // Mutating the cache during render
}
return <div>{cache[id]}</div>;
}// Recommended: Use useMemo to compute and cache the value
function Component({ id }) {
const data = useMemo(() => fetchData(id), [id]);
return <div>{data}</div>;
}