React Hooks 3

Question 1

Why must hooks be called at the top level of a component?

Accepted Answer

To ensure hooks run in the same order on every render

Answer

React relies on the call order of hooks being consistent across renders, so they cannot be called conditionally or inside loops.

Question 2

What is the recommended way to update state based on the previous state in useState?

Accepted Answer

Pass an updater function to the setter

Answer

Passing a function like setCount(prev => prev + 1) guarantees you work with the latest state value.

Question 3

Which hook lets you customize the instance value exposed to parent components when using ref forwarding?

Accepted Answer

useImperativeHandle

Answer

useImperativeHandle customizes the ref value exposed to parent components, typically used with forwardRef.

Question 4

How does useLayoutEffect differ from useEffect?

Accepted Answer

useLayoutEffect fires synchronously after DOM mutations but before paint

Answer

useLayoutEffect runs synchronously after DOM mutations and before the browser paints, useful for measuring layout.

Question 5

What is a custom hook?

Accepted Answer

A JavaScript function whose name starts with 'use' that calls other hooks

Answer

A custom hook is a reusable function starting with 'use' that can call other hooks to share stateful logic.

React Practice Test