Reusing logic with hooks in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this custom hook usage?

Consider this React component using a custom hook that counts clicks. What will be displayed after clicking the button 3 times?

React

import React, { useState } from 'react';

function useClickCounter() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(c => c + 1);
  }
  return { count, increment };
}

export default function Clicker() {
  const { count, increment } = useClickCounter();
  return (
    <>
      <button onClick={increment}>Click me</button>
      <p>Clicked {count} times</p>
    </>
  );
}

A Clicked undefined times

B Clicked 3 times

C Clicked NaN times

D Clicked 0 times

💡 Hint

Think about how the state updates with each click and how the count is displayed.

The custom hook useClickCounter manages a count state starting at 0. Each click calls increment, which increases count by 1. After 3 clicks, count is 3, so the paragraph shows 'Clicked 3 times'.

📝 Syntax

intermediate

Which option correctly defines a custom hook that returns a boolean toggle?

You want a custom hook named useToggle that returns a boolean state and a function to flip it. Which code is correct?

A

function useToggle() {
  const [value, setValue] = useState(false);
  const toggle = () => setValue(value => !value);
  return { value, toggle };
}

B

function useToggle() {
  const [value, setValue] = useState(false);
  const toggle = () => setValue(v => !v);
  return [value, toggle];
}

C

function useToggle() {
  const [value, setValue] = useState(false);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

D

function useToggle() {
  const [value, setValue] = useState(false);
  function toggle() {
    setValue(!value);
  }
  return { value, toggle };
}

💡 Hint

Remember to use the functional update form to avoid stale state.

Option A correctly uses the functional update form setValue(value => !value) to toggle the boolean state and returns an object with value and toggle function. This avoids stale closure issues.

🔧 Debug

advanced

Why does this custom hook cause an infinite loop?

Examine this custom hook and component. Why does it cause an infinite render loop? function useData() { const [data, setData] = useState(null); fetch('https://api.example.com/data') .then(res => res.json()) .then(setData); return data; } function Component() { const data = useData(); return

{data ? data.message : 'Loading...'}

; }

A Because the component returns null instead of JSX.

B Because setData is called with a wrong argument type causing an error.

C Because useState is used incorrectly without initial value.

D Because fetch is called on every render inside the hook without useEffect, causing continuous state updates.

💡 Hint

Think about what happens when state updates inside a hook without controlling side effects.

The fetch call runs on every render because it is not inside useEffect. Each fetch updates state with setData, triggering a re-render, which triggers fetch again, causing an infinite loop.

❓ state_output

advanced

What is the final count displayed after clicking the button twice?

Given this component using a custom hook, what number will show after clicking the button two times? function useCounter() { const [count, setCount] = useState(0); function increment() { setCount(count + 1); setCount(count + 1); } return { count, increment }; } function Counter() { const { count, increment } = useCounter(); return ; }

A Count: 2

B Count: 0

C Count: 1

D Count: 4

💡 Hint

Remember how React batches state updates and how stale state values affect setState calls.

Each button click calls increment(), which executes two setCount(count + 1) using the stale count value captured in the closure from that render. React batches the identical updates into a single state update, so the count increases by only 1 per click. After two clicks, the count is 2, displaying 'Count: 2'.

🧠 Conceptual

expert

Which statement best explains why custom hooks must start with 'use'?

Why do React custom hooks have to start with the word 'use'?

A Because React relies on the 'use' prefix to identify hooks and enforce rules of hooks during compilation and runtime.

B Because it is a naming convention to help developers remember which functions are hooks, but React does not enforce it.

C Because hooks starting with 'use' automatically get memoized by React for performance.

D Because only functions starting with 'use' can access React context.

💡 Hint

Think about how React detects hooks to apply special rules.

React uses the 'use' prefix to detect hooks and apply the rules of hooks, like calling hooks only at the top level and in React functions. This detection happens during compilation and runtime.