Creating custom hooks in React - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a custom hook that uses useState.

React

import { useState } from 'react';

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

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState

Trying to use useRef for state

Forgetting to import useState

The useState hook is used to add state to a custom hook.

2fill in blank

medium

Complete the code to call the custom hook inside a functional component.

React

function Counter() {
  const [count, setCount] = [1]();
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Drag options to blanks, or click blank then click option'

AuseRef

BuseState

CuseEffect

DuseCounter

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useState directly instead of the custom hook

Not calling the hook as a function

Using useEffect instead of the custom hook

You call your custom hook useCounter inside the component to get the count and setter.

3fill in blank

hard

Fix the error in the custom hook by completing the missing return statement.

React

function useToggle(initialValue) {
  const [value, setValue] = useState(initialValue);

  function toggle() {
    setValue(!value);
  }

  return [1];
}

Drag options to blanks, or click blank then click option'

Atoggle

Bvalue

C[value, toggle]

DsetValue

Attempts:

3 left

💡 Hint

Common Mistakes

Returning only the value or only the toggle function

Returning setValue directly

Not returning anything

The hook should return both the current value and the toggle function as an array.

4fill in blank

hard

Fill both blanks to create a custom hook that fetches data and stores loading state.

React

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading([1]);
      });
  }, [[2]]);

  return { data, loading };
}

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Curl

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Setting loading to true after fetch

Leaving dependency array empty

Using wrong variable in dependency array

After data is fetched, loading should be set to false. The effect depends on url to refetch when it changes.

5fill in blank

hard

Fill all three blanks to create a custom hook that debounces a value.

React

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue([1]);
    }, [2]);

    return () => {
      clearTimeout([3]);
    };
  }, [value, delay]);

  return debouncedValue;
}

Drag options to blanks, or click blank then click option'

Avalue

Bdelay

Chandler

DdebouncedValue

Attempts:

3 left

💡 Hint

Common Mistakes

Setting debouncedValue to delay

Clearing timeout with wrong variable

Not clearing timeout on cleanup

The hook sets the debounced value to the current value after delay milliseconds. The timeout is cleared using the handler variable.

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