React Rules
Component and hook code ordering
1 rules1 auto-isFixable
On This Page
react-code-order
auto-isFixable
Enforce consistent ordering in components: refs > state > redux > router > context > hooks > derived > memo > callback > handlers > effects > return
Why: A consistent code structure makes components predictable and easier to navigate
Correct
javascript
const UserDashboard = ({ title }) => { const inputRef = useRef(null); const [count, setCount] = useState(0); const dispatch = useDispatch(); const navigate = useNavigate(); const { data } = useFetchData(); const isReady = !!data; const resetHandler = () => setCount(0); useEffect(() => {}, []); return <div>{title}</div>;};Incorrect
javascript
const BadComponent = ({ title }) => { useEffect(() => {}, []); const [count, setCount] = useState(0); return <div>{title}</div>;};eslint.config.js
javascript
"code-style/react-code-order": "error"