Where must hooks be called?

Where must hooks be called?

• A. Inside conditional blocks or loops.
• B. After the render phase in lifecycle methods.
• C. In class components only.
• D. At the top level of a function component or a custom hook.

Answer: (D)

Hooks must be called at the top level of a function component or a custom hook. This ensures the order of every hook call stays the same across renders, which React relies on to correctly attach state and effects to each hook. Calling a hook inside a conditional, loop, or nested function would change that order from render to render. That breaks React’s internal bookkeeping and can lead to errors or unpredictable behavior. By placing all hook calls at the top level, you guarantee a stable sequence, and you use the hook results later in render logic or effects as needed. Within a component, you should call the hooks unconditionally in the function body, and then use conditional logic to decide what to render or how to react based on the hook values. Similarly, a custom hook follows the same rule: its hook calls must be at the top level of the function, not inside conditionals. Other options miss this requirement because hooks aren’t tied to lifecycle methods or class components, and they aren’t meant to be invoked after rendering. The correct approach is to call them at the top level of a function component or a custom hook.

Hooks must be called at the top level of a function component or a custom hook. This ensures the order of every hook call stays the same across renders, which React relies on to correctly attach state and effects to each hook.

Calling a hook inside a conditional, loop, or nested function would change that order from render to render. That breaks React’s internal bookkeeping and can lead to errors or unpredictable behavior. By placing all hook calls at the top level, you guarantee a stable sequence, and you use the hook results later in render logic or effects as needed.

Within a component, you should call the hooks unconditionally in the function body, and then use conditional logic to decide what to render or how to react based on the hook values. Similarly, a custom hook follows the same rule: its hook calls must be at the top level of the function, not inside conditionals.

Other options miss this requirement because hooks aren’t tied to lifecycle methods or class components, and they aren’t meant to be invoked after rendering. The correct approach is to call them at the top level of a function component or a custom hook.