React Hooks Custom Hooks 3

Question 1

What is the purpose of a useDebounce custom hook?

Accepted Answer

To delay updating a value until the user stops changing it for a specified time

Answer

useDebounce delays propagating a value change until a quiet period elapses, reducing rapid-fire side effects.

Question 2

How does a usePrevious custom hook work?

Accepted Answer

It stores the current value in a ref after each render and returns the previous render's value

Answer

A useEffect inside the hook updates the ref after each render, so the ref holds the value from the previous render.

Question 3

What is a useOnClickOutside custom hook typically used for?

Accepted Answer

Detecting clicks outside a referenced element to close dropdowns or modals

Answer

useOnClickOutside attaches a document click listener and fires a callback when the click target is outside the given ref.

Question 4

Why should custom hooks avoid directly modifying DOM nodes without going through React?

Accepted Answer

Imperative DOM mutations can conflict with React's virtual DOM reconciliation

Answer

React controls the DOM via reconciliation; bypassing it with direct mutations can cause inconsistencies and bugs.

Question 5

How does a useToggle custom hook differ from a plain useState(false) call?

Accepted Answer

useToggle encapsulates the toggle logic so consumers only get [value, toggle] without managing the setter

Answer

useToggle hides the setter and exposes a stable toggle function, reducing boilerplate in every consumer.

React Practice Test