Custom hook best practices in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this custom hook usage?

Consider this React custom hook that tracks window width. What will the component display after resizing the window to 800 pixels wide?

React

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

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

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

  return width;
}

export default function WidthDisplay() {
  const width = useWindowWidth();
  return <div>Window width is {width}</div>;
}

A Window width is initial window width before resize

B Window width is 800

C Window width is undefined

D Component crashes with error

💡 Hint

Think about how the hook updates state on window resize events.

The custom hook listens for window resize events and updates the width state accordingly. After resizing to 800 pixels, the component shows "Window width is 800".

📝 Syntax

intermediate

Which option correctly defines a custom hook that fetches data?

Which of the following custom hook definitions is syntactically correct and follows React hook naming conventions?

A function UseFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; }

B function fetchDataHook(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; }

C function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; }

D function usefetchdata(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; }

💡 Hint

Custom hooks must start with 'use' and use camelCase.

React requires custom hooks to start with 'use' and be camelCase. Option C follows this naming and syntax correctly.

🔧 Debug

advanced

Why does this custom hook cause an infinite loop?

Examine this custom hook. Why does the component using it keep re-rendering infinitely?

React

import { useState, useEffect } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return count;
}

A Because setCount inside useEffect updates count, triggering useEffect again endlessly

B Because useState is called inside useEffect causing re-renders

C Because useEffect has no dependency array causing infinite calls

D Because count is never updated, so useEffect never stops

💡 Hint

Think about what happens when state changes inside useEffect with that dependency.

The useEffect depends on 'count' and updates 'count' inside it. Each update triggers useEffect again, causing an infinite loop.

🧠 Conceptual

advanced

What is a key best practice when creating custom hooks?

Which of the following is a best practice when writing custom React hooks?

A Custom hooks should start with 'use' and can encapsulate stateful logic and side effects

B Custom hooks should only call other hooks and never contain side effects

C Custom hooks must always return JSX elements to be reusable

D Custom hooks should be class components to manage lifecycle methods

💡 Hint

Think about what custom hooks are designed to do in React.

Custom hooks start with 'use' and can contain stateful logic and side effects to share behavior across components.

❓ state_output

expert

What is the final value of count after this custom hook runs?

Given this custom hook and component, what is the final value of count displayed?

React

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

function useDelayedIncrement(initial) {
  const [count, setCount] = useState(initial);

  useEffect(() => {
    const id = setTimeout(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearTimeout(id);
  }, [count]);

  return count;
}

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

A The component crashes with a memory leak error

B The count increases by 1 only once after 1 second

C The count stays at 0 forever

D The count increases by 1 every second indefinitely

💡 Hint

Consider how the effect depends on count and triggers a timeout each time.

The effect runs every time count changes, scheduling a new increment after 1 second. This causes count to increase by 1 every second indefinitely.