Episode 2 — React Frontend Architecture NextJS / 2.7 — Useful Hooks in React

2.7 — Exercise Questions: Useful Hooks in React

How to use this material:

  1. Try each question without looking at the sub-topic files first
  2. Write actual code — don't just think about the answer
  3. If stuck for more than 5 minutes, revisit the relevant sub-topic
  4. After answering, check your understanding by explaining why to yourself
  5. Mark questions you got wrong and revisit them in 48 hours

2.7.a — Understanding React Hooks (Q1–Q20)

Q1. Define what a "hook" is in React in one sentence. What two conditions make a function qualify as a hook?

Q2. Name the three specific problems that hooks were designed to solve. Give a one-line description of each.

Q3. Write the simplest possible function component that uses useState. What happens when the button is clicked?

Q4. Before hooks, what were the two main patterns for sharing stateful logic between components? Name one disadvantage of each.

Q5. Explain the difference between the "class lifecycle" mental model and the "hooks synchronization" mental model. When thinking about useEffect, should you think about "when" or "what"?

Q6. A hook stores state in a linked list indexed by call order. What happens if hook #2 is skipped on the second render (e.g., wrapped in an if statement)?

Q7. True or False: Calling setCount(5) and then immediately reading count on the next line will give you 5.

Q8. What does "each render has its own everything" mean? If you click a button that calls setTimeout(() => alert(count), 3000), will the alert show the count from when you clicked or the latest count? Why?

Q9. Custom hooks share state between components — true or false? If ComponentA and ComponentB both call useCounter(), do they share the same count?

Q10. List 5 built-in hooks and describe when you'd use each in one line.

Q11. Why do hooks return arrays instead of objects? Show how naming would differ with object destructuring.

Q12. Write a hook called useWindowWidth that returns the current window width and updates on resize. Identify which built-in hooks you'd use and why.

Q13. A function named formatDate calls useState inside it. Will this work? Why or why not?

Q14. Name two React features that still REQUIRE class components in 2025. Why haven't hooks replaced them yet?

Q15. Explain lazy initialization in useState. When would you use useState(() => ...) instead of useState(value)?

Q16. What is the "closure model" in hooks? How does it differ from the this.state model in classes?

Q17. Name three frameworks outside React that were inspired by hooks. What is each one's equivalent feature called?

Q18. If you need the LATEST value inside a setTimeout callback (not the closure value), what should you use?

Q19. Draw the hook linked list for this component:

function Example() {
  const [name, setName] = useState('');
  useEffect(() => {}, []);
  const ref = useRef(null);
}

Q20. In the evolution from mixins → HOCs → render props → hooks, what specific problem did each new pattern solve that the previous one couldn't?

2.7.b — Rules of Hooks (Q21–Q40)

Q21. State the two Rules of Hooks. Which one prevents calling hooks inside if statements?

Q22. What is the technical reason behind Rule 1 (top-level only)? It's not about code style — what data structure does React use internally?

Q23. Find the bug in this code and explain what will go wrong on re-renders:

function Profile({ showBio }) {
  const [name, setName] = useState('');
  if (showBio) {
    const [bio, setBio] = useState('');
  }
  const [email, setEmail] = useState('');
}

Q24. This code has an early return before hooks. Rewrite it to follow the rules:

function UserCard({ user }) {
  if (!user) return null;
  const [expanded, setExpanded] = useState(false);
  return <div>{expanded ? user.bio : user.name}</div>;
}

Q25. Can you call a hook inside a for loop? Why or why not? What's the correct alternative?

Q26. What npm package enforces the Rules of Hooks? What two ESLint rules does it provide?

Q27. The exhaustive-deps rule warns that count is missing from the dependency array. What bug does this prevent?

useEffect(() => {
  document.title = `Count: ${count}`;
}, []);

Q28. Name three valid locations where you CAN call hooks. Name three locations where you CANNOT.

Q29. A function named useFormatCurrency(amount) contains no hook calls inside it. Is this technically a hook? What's the problem with this naming?

Q30. Rewrite this code to follow the rules while keeping the same behavior:

function Dashboard({ isAdmin }) {
  if (!isAdmin) return <UserView />;
  const [stats, setStats] = useState(null);
  useEffect(() => { fetchStats().then(setStats); }, []);
  return <AdminView stats={stats} />;
}

Q31. The && short-circuit operator: Is condition && useEffect(() => {}, []) a valid hook call? Why?

Q32. Can you use hooks inside a try/catch block? Rewrite this correctly:

try {
  const [data, setData] = useState(null);
} catch (e) {}

Q33. When should you suppress the exhaustive-deps warning? What must you always include when suppressing?

Q34. Explain why the React Compiler makes the Rules of Hooks even more important than before.

Q35. What error message does React throw when you call a hook outside a component? Quote the first line.

Q36. useEffect has a function dependency that changes every render. Give two solutions to stabilize it.

Q37. Write the correct component structure order: hooks zone, derived values zone, early returns zone, render zone.

Q38. This custom hook has a bug. Find it:

function useFetch(url) {
  if (!url) return { data: null, loading: false };
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => { /* fetch */ }, [url]);
  return { data, loading };
}

Q39. In React 18+ with the Compiler, what does the compiler do with useMemo and useCallback? Why does hook rule compliance matter for this?

Q40. Explain the difference between a conditional hook CALL (banned) and conditional LOGIC inside a hook (allowed). Give examples of each.

2.7.c — Commonly Used Hooks (Q41–Q60)

Q41. Write a useState example that uses lazy initialization. When does the initializer function run?

Q42. What's wrong with this code? How do you fix it?

const [count, setCount] = useState(0);
function handleTriple() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

Q43. useState with an object: Write code to update ONLY the age property of { name: 'Alice', age: 25 } without losing name.

Q44. What are the three configurations of useEffect's dependency array? Give the syntax and use case for each.

Q45. Write a useEffect that fetches user data with proper cleanup using AbortController. Handle both the success and abort cases.

Q46. Explain the execution order: When does the effect run relative to the browser painting the screen? When does cleanup run?

Q47. Create a ThemeContext with createContext, a ThemeProvider, and a useTheme custom hook that throws if used outside the provider.

Q48. Why should you memoize Context Provider values with useMemo? What happens if you don't?

Q49. Give two use cases for useRef: one involving DOM access and one involving a mutable value that shouldn't trigger re-renders.

Q50. Write a usePrevious hook that returns the previous value of a prop or state variable. Which hook combination do you need?

Q51. When is useCallback actually necessary? Give the three specific scenarios where it provides real benefit.

Q52. Your teammate wrapped every function in useCallback. Explain why this might actually HURT performance instead of helping.

Q53. When is useMemo actually necessary? List two scenarios where it provides real benefit and two where it's unnecessary overhead.

Q54. Convert this code using useState to useReducer. When would useReducer be a better choice?

const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

Q55. What does useId do? Why can't you just use Math.random() or a counter for IDs?

Q56. Explain useTransition with an example. What does isPending tell you? What does startTransition do?

Q57. Split context for performance: Why would you split UserContext and ThemeContext instead of using one AppContext?

Q58. What is "derived state"? Give an example of derived state stored in useState (wrong) vs computed during render (right).

Q59. Write the complete Context + Reducer pattern: create a TodoContext, TodoDispatchContext, a todoReducer, and hooks to consume them.

Q60. Build a custom useLocalStorage(key, initialValue) hook that reads from localStorage on mount and saves on every change. Which hooks do you combine?

Good luck! Remember: the goal is understanding, not memorization.