Which of the following describes the rules for using React hooks?

Which of the following describes the rules for using React hooks?

• A. You may call hooks conditionally inside any function.
• B. You can call hooks anywhere, including inside loops and nested functions.
• C. You should only call hooks from class components.
• D. You should only call hooks at the top level of React function components or custom hooks.

Answer: (D)

Hooks must be called in a predictable, consistent order. That’s why you only call them at the top level of function components or inside custom hooks. When hooks are invoked in the same order on every render, React can reliably associate each hook call with its corresponding state or effect. If you call a hook inside a conditional, a loop, or a nested function, the number or order of hook calls can change between renders, leading to broken state and bugs. Hooks aren’t used in class components, which rely on this.state and lifecycle methods instead. So the rule to follow is to call hooks at the top level of function components or custom hooks.

Hooks must be called in a predictable, consistent order. That’s why you only call them at the top level of function components or inside custom hooks. When hooks are invoked in the same order on every render, React can reliably associate each hook call with its corresponding state or effect. If you call a hook inside a conditional, a loop, or a nested function, the number or order of hook calls can change between renders, leading to broken state and bugs. Hooks aren’t used in class components, which rely on this.state and lifecycle methods instead. So the rule to follow is to call hooks at the top level of function components or custom hooks.