MENU

Things to Avoid

Hooks don't work inside classes.

Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

The eslint-plugin-react-hooks package (bundled by default in most modern React project templates) statically enforces these two rules for you and flags violations as you type, so in practice you rarely have to check them by hand.