What happens if you call a hook conditionally?

What happens if you call a hook conditionally?

• A. Calling a hook conditionally will not affect app behavior.
• B. Hook order may change, leading to errors.
• C. Conditional calls of hooks are allowed.
• D. Calling a hook conditionally violates the Rules of Hooks and will lead to errors.

Answer: (D)

Hooks must be called at the top level of a function component, in the same order on every render. Calling a hook inside a conditional means the number and order of hook invocations can differ from one render to the next. React relies on the sequence of hook calls to associate state and effects with the right places in your component; changing that sequence breaks this mapping and leads to errors. To use conditional behavior correctly, declare the hook unconditionally and place the conditional logic inside its effect or in the rendering logic after the hook has been called, or render different components conditionally. This ensures hook calls stay stable across renders, preventing runtime errors.

Hooks must be called at the top level of a function component, in the same order on every render. Calling a hook inside a conditional means the number and order of hook invocations can differ from one render to the next. React relies on the sequence of hook calls to associate state and effects with the right places in your component; changing that sequence breaks this mapping and leads to errors. To use conditional behavior correctly, declare the hook unconditionally and place the conditional logic inside its effect or in the rendering logic after the hook has been called, or render different components conditionally. This ensures hook calls stay stable across renders, preventing runtime errors.