no-unused-state
Warns about state variables that are defined but never used.
This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
Full Name in eslint-plugin-react-x
react-x/no-unused-stateFull Name in @eslint-react/eslint-plugin
@eslint-react/no-unused-stateFeatures
🧪
Rule Details
This rule warns about state variables declared via useState (or similar state hooks) that are defined but never read.
Examples
State declared but never read in the component
If only useState is called and the setter is destructured, but the state value itself is never read, this state has no actual effect on rendering.
// Problem: data is declared but never read
import { useState } from "react";
function Component() {
const [data, setData] = useState(0);
return <div />;
}// Recommended: remove the state if it is not needed; otherwise use it in JSX
import { useState } from "react";
function Component() {
const [data, setData] = useState(0);
return <div>{data}</div>;
}Options
Shared Settings
Custom state and effect hooks can also be configured via shared ESLint settings, which apply consistently across all rules in the plugin:
{
"settings": {
"react-x": {
"additionalStateHooks": "/^(useMyState|useCustomState)$/u",
}
}
}