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.