Reusing logic with hooks in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook used for state.

React

import React, { [1] } from 'react';

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

AuseContext

BuseEffect

CuseRef

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing useEffect instead of useState

Forgetting to import the hook

Using useContext when state is needed

The useState hook is used to add state to functional components.

2fill in blank

medium

Complete the code to create a custom hook that returns a count and a function to increase it.

React

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

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

AuseState

BuseRef

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state

Trying to use useRef for state updates

Confusing useContext with useState

The useState hook initializes the count state and provides a setter function.

3fill in blank

hard

Fix the error in the custom hook usage inside a component.

React

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

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

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

AuseState

BuseEffect

CuseCounter

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useState instead of the custom hook

Using useEffect instead of the custom hook

Not calling any hook and causing errors

The component must call the custom hook useCounter to get the count and increment function.

4fill in blank

hard

Fill both blanks to create a custom hook that tracks window width and updates on resize.

React

import { [1], [2] } 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;
}

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

AuseState

BuseRef

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRef instead of useState for width

Not cleaning up the event listener

Using useContext instead of useEffect

useState manages the width state, and useEffect sets up and cleans the resize event listener.

5fill in blank

hard

Fill all three blanks to create a custom hook that fetches data and tracks loading state.

React

import { [1], [2] } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

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

AuseEffect

BuseState

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useRef for state variables

Not using useEffect for fetching data

Mixing up hooks in import and usage

useEffect runs the fetch on mount or url change, and useState manages both data and loading states.