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.

Practice

1. What is the main purpose of creating 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 what hooks do

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

2. Step 2: Identify the role of custom hooks

   Custom hooks let you reuse this logic in many 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 start with 'use' and share logic [OK]

Common Mistakes:

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

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

easy

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

B. function counterHook() { const [count, setCount] = useState(0); return [count, setCount]; }

C. function UseCounter() { const [count, setCount] = useState(0); return [count, setCount]; }

D. function counter() { const [count, setCount] = useState(0); return [count, setCount]; }

Solution

1. Step 1: Recall naming rules for custom hooks

   Custom hooks must start with 'use' to follow React conventions and enable linting.

2. Step 2: Check function names

   Only function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } starts with 'use' and uses camelCase correctly.

3. Final Answer:

   function useCounter() { const [count, setCount] = useState(0); return [count, setCount]; } -> Option A

4. Quick Check:

   Custom hook names start with 'use' [OK]

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

Common Mistakes:

• Not starting function name with 'use'
• Using uppercase first letter in hook name
• Naming hooks like regular functions

3. Given this custom hook code, what will be logged when ExampleComponent renders?

function useToggle(initial) {
  const [on, setOn] = React.useState(initial);
  const toggle = () => setOn(!on);
  return [on, toggle];
}

function ExampleComponent() {
  const [isOn, toggle] = useToggle(false);
  React.useEffect(() => {
    console.log(isOn);
  }, [isOn]);
  return Toggle;
}

medium

A. undefined on first render, then false after button click

B. true on first render, then false after button click

C. No output because console.log is inside useEffect

D. false on first render, then true after button click

Solution

1. Step 1: Analyze initial state in useToggle

   The hook starts with initial = false, so isOn is false initially.

2. Step 2: Understand useEffect logging

   useEffect logs isOn after render; initially logs false, after toggle logs true.

3. Final Answer:

   false on first render, then true after button click -> Option D

4. Quick Check:

   Initial state false, toggles true [OK]

Hint: Initial state logs first, toggle changes it [OK]

Common Mistakes:

• Assuming initial state is true
• Thinking console.log won't run inside useEffect
• Confusing toggle function behavior

4. What is wrong with this custom hook code?

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

medium

A. Directly modifying count variable instead of using setCount

B. Missing React import for useState

C. increment function should return count

D. Custom hook name should not start with 'use'

Solution

1. Step 1: Check how state is updated

   State variables like count must be updated via setCount, not by direct assignment.

2. Step 2: Identify the error in increment

   increment tries to assign count = count + 1, which does not update React state.

3. Final Answer:

   Directly modifying count variable instead of using setCount -> Option A

4. Quick Check:

   State updates need setCount [OK]

Hint: Always use setState to update state, never assign directly [OK]

Common Mistakes:

• Trying to assign state variable directly
• Forgetting to call setCount
• Confusing variable assignment with state update

5. You want to create a custom hook useFetch that fetches data from a URL and returns loading state, data, and error. Which approach correctly reuses logic and handles updates safely?

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

  React.useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

hard

A. This hook will cause infinite loops because setState is inside useEffect

B. This hook should not use useEffect for fetching data

C. This hook correctly reuses fetch logic and updates state on URL change

D. This hook must return an array, not an object

Solution

1. Step 1: Check useEffect dependency

   useEffect runs when URL changes, so fetch updates correctly.

2. Step 2: Verify state updates inside fetch

   State updates happen after fetch resolves or errors, no infinite loops occur.

3. Step 3: Confirm return value format

   Returning an object with data, loading, error is a common pattern and valid.

4. Final Answer:

   This hook correctly reuses fetch logic and updates state on URL change -> Option C

5. Quick Check:

   useEffect fetches on URL change, updates state [OK]

Hint: useEffect with URL dependency safely fetches data [OK]

Common Mistakes:

• Thinking setState inside useEffect causes loops
• Not using useEffect for side effects
• Confusing return types of hooks