Creating custom hooks in React - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this custom hook usage?

Consider the following React custom hook and component. What will be displayed when the component renders?

React

import React, { useState, useEffect } from 'react';

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return count;
}

function Counter() {
  const count = useCounter(0);
  return <div>{count}</div>;
}

A The component displays 0 initially and increments by 1 every second.

B The component displays 0 and never changes.

C The component throws an error because hooks cannot be used inside functions.

D The component displays NaN because the state is not initialized properly.

💡 Hint

Think about how useEffect with an empty dependency array works and how setInterval updates state.

The custom hook useCounter initializes state to the given initial value (0). The useEffect sets up an interval that increments the count every second. The component renders the current count, so it starts at 0 and increments by 1 every second.

📝 Syntax

intermediate

Which option correctly defines a custom hook that returns window width?

Which of the following custom hooks correctly returns the current window width and updates on resize?

A

function useWindowWidth() {
  const [width, setWidth] = React.useState();
  window.addEventListener('resize', () => setWidth(window.innerWidth));
  return width;
}

B

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    window.onresize = () => setWidth(window.innerWidth);
  }, []);
  return width;
}

C

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

D

function useWindowWidth() {
  const [width, setWidth] = React.useState(window.innerWidth);
  React.useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
  }, []);
  return width;
}

💡 Hint

Remember to clean up event listeners in useEffect to avoid memory leaks.

Option C correctly sets up a resize event listener inside useEffect and cleans it up on unmount. Option C adds listeners on every render causing leaks. Option C assigns window.onresize but does not clean up. Option C adds listener but never removes it.

🔧 Debug

advanced

Why does this custom hook cause an infinite render loop?

Examine the custom hook below. Why does it cause an infinite render loop?

React

import { useState, useEffect } from 'react';

function useData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, [data]);
  return data;
}

A Because the effect depends on 'data', it runs after every state update, causing continuous fetches.

B Because 'setData' is missing from the dependency array, React warns about missing dependencies.

C Because 'fetch' is asynchronous, it causes the component to crash.

D Because 'useState' is called inside 'useEffect', which is invalid.

💡 Hint

Think about what triggers useEffect and how state updates affect dependencies.

The effect depends on 'data', so every time 'data' changes, the effect runs again, fetching data and updating state, which triggers the effect again. This creates an infinite loop. The dependency array should be empty or include only stable dependencies.

❓ state_output

advanced

What is the value of 'count' after clicking the button twice quickly?

Given this custom hook and component, what will be the value of count after clicking the button twice quickly?

React

import React, { useState } from 'react';

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

function Counter() {
  const [count, increment] = useCounter();
  return <button onClick={increment}>{count}</button>;
}

A The count increases by 4 after two quick clicks, showing 4.

B The count increases by 1 after two quick clicks, showing 1.

C The count increases by 2 after two quick clicks, showing 2.

D The count increases by 3 after two quick clicks, showing 3.

💡 Hint

Remember that React state updates may be batched and that setCount(count + 1) uses the current closure value.

The increment function closes over the count value from the render when it was created. Within one click, both setCount(count + 1) calls use the same stale count and batch to a single update (+1). For two quick clicks before re-render, the second click uses the same increment function (still closing over the initial count), queuing more sets to the same value. Thus, count shows 1.

🧠 Conceptual

expert

Why should custom hooks start with 'use' prefix?

Why is it important that custom React hooks start with the prefix use?

A Because hooks without 'use' prefix will cause syntax errors in JSX files.

B Because it is a naming convention that helps developers recognize hooks but has no effect on React behavior.

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

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

💡 Hint

Think about how React detects hooks and enforces rules like calling hooks only at the top level.

React uses the 'use' prefix to detect hook calls and apply the rules of hooks. This detection helps React warn about incorrect usage and ensures hooks work correctly. Without the prefix, React cannot identify the function as a hook.

Practice

1. What is the main reason to create a custom hook in React?

easy

A. To create new HTML elements

B. To reuse stateful logic across multiple components

C. To style components with CSS

D. To replace React components entirely

Solution

1. Step 1: Understand the purpose of hooks

   Hooks let you use React features like state and effects inside functions.

2. Step 2: Identify why custom hooks are used

   Custom hooks let you reuse stateful logic easily across components without repeating code.

3. Final Answer:

   To reuse stateful logic across multiple components -> Option B

4. Quick Check:

   Custom hooks = reuse logic [OK]

Hint: Custom hooks always reuse logic, not UI or styles [OK]

Common Mistakes:

• Thinking custom hooks create UI elements
• Confusing hooks with styling tools
• Believing hooks replace components

2. Which of the following is the correct way to name a custom hook in React?

easy

A. hookUseFetch

B. fetchDataHook

C. FetchData

D. useFetchData

Solution

1. Step 1: Recall naming rules for custom hooks

   Custom hooks must start with the word "use" to follow React conventions.

2. Step 2: Check each option

   Only "useFetchData" starts with "use" correctly.

3. Final Answer:

   useFetchData -> Option D

4. Quick Check:

   Custom hook names start with "use" [OK]

Hint: Custom hooks always start with 'use' prefix [OK]

Common Mistakes:

• Naming hooks without 'use' prefix
• Using PascalCase without 'use'
• Placing 'use' in the middle or end

3. Consider this custom hook code:

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

What will useWindowWidth() return when used inside a component?

medium

A. The height of the browser window

B. An error because window is undefined

C. The current width of the browser window, updating on resize

D. A function to resize the window

Solution

1. Step 1: Analyze the hook's state and effect

   The hook uses state to store window.innerWidth and updates it on resize events.

2. Step 2: Understand the returned value

   The hook returns the current width, which updates whenever the window resizes.

3. Final Answer:

   The current width of the browser window, updating on resize -> Option C

4. Quick Check:

   Custom hook returns updated window width [OK]

Hint: Custom hooks return values or functions, not errors here [OK]

Common Mistakes:

• Confusing width with height
• Thinking it returns a function
• Assuming window is undefined in browser

4. What is wrong with this custom hook code?

import { useState, useEffect } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });
  return count;
}

medium

A. It causes an infinite loop because setCount is called inside useEffect without dependencies

B. It returns a function instead of a value

C. It will never update count because useEffect has an empty dependency array

D. It uses useState incorrectly by initializing with 0

Solution

1. Step 1: Check useEffect dependencies

   The effect has no dependency array.

2. Step 2: Understand setCount behavior

   setCount(count + 1) runs on every render since there are no dependencies, causing an infinite loop of re-renders.

3. Final Answer:

   It causes an infinite loop because setCount is called inside useEffect without dependencies -> Option A

4. Quick Check:

   Missing deps in useEffect = infinite loop [OK]

Hint: useEffect without deps array runs every render [OK]

Common Mistakes:

• Thinking the effect runs only once without deps array
• Confusing return value type
• Misunderstanding dependency array role

5. You want to create a custom hook useFetch that fetches data from a URL and returns { data, loading, error }. Which approach correctly handles loading state and errors inside the hook?

hard

A. Use useState for data, loading, error; use useEffect to fetch and update states with try/catch inside async function

B. Use only useState for data and ignore loading and error states

C. Fetch data directly in the component and pass it to the hook as a parameter

D. Use useEffect without useState and return data from fetch promise

Solution

1. Step 1: Identify state needs for fetch

   Fetching data requires tracking data, loading status, and errors, so useState is needed for all three.

2. Step 2: Use useEffect with async fetch and error handling

   Inside useEffect, define an async function with try/catch to fetch data and update states accordingly.

3. Final Answer:

   Use useState for data, loading, error; use useEffect to fetch and update states with try/catch inside async function -> Option A

4. Quick Check:

   Fetch with useState and useEffect + try/catch [OK]

Hint: Manage data, loading, error with useState and useEffect [OK]

Common Mistakes:

• Ignoring loading or error states
• Fetching outside useEffect causing infinite loops
• Returning unresolved promises