Why custom hooks are used in React - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Purpose of Custom Hooks in React

Why do developers create custom hooks in React?

A To directly manipulate the DOM elements

B To replace all class components with functional components

C To reuse stateful logic across multiple components easily

D To increase the size of the application bundle

💡 Hint

Think about how to avoid repeating the same code in different parts of your app.

Custom hooks let you share logic that uses React state and effects between components without repeating code.

❓ component_behavior

intermediate

Behavior of a Custom Hook

Consider a custom hook that fetches data and returns loading status and data. What is the main benefit of using this hook in multiple components?

A Each component can share the same fetching logic without rewriting it

B It forces all components to fetch data at the same time

C It disables React's built-in hooks like useState

D It automatically caches data in the browser storage

💡 Hint

Think about how to avoid copying the same code for fetching data in every component.

Custom hooks encapsulate logic like data fetching so multiple components can use it without duplicating code.

📝 Syntax

advanced

Correct Syntax for a Custom Hook

Which option shows the correct way to define a custom hook that returns a count and a function to increment it?

React

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

A function useCounter() { let count = 0; function increment() { count++; } return { count, increment }; }

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

C function UseCounter() { const count = 0; function increment() { count++; } return { count, increment }; }

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

💡 Hint

Custom hooks must start with 'use' and use React hooks inside.

Option D correctly defines a custom hook using React's useState and returns an object with count and increment function.

🔧 Debug

advanced

Identifying Error in Custom Hook Usage

What error will occur if a custom hook is called inside a regular JavaScript function instead of a React component or another hook?

A React Hook "useCustomHook" cannot be called inside a regular function

B TypeError: useCustomHook is not a function

C SyntaxError: Unexpected token 'useCustomHook'

D No error, it works fine

💡 Hint

React hooks have rules about where they can be called.

React enforces that hooks can only be called inside React function components or other hooks. Calling them elsewhere causes an error.

❓ state_output

expert

State Behavior in Custom Hook Across Components

Given a custom hook that uses useState internally, what happens to the state when two different components use this hook?

A Both components share the same state instance from the hook

B Each component has its own independent state from the hook

C The state resets to initial value whenever a component re-renders

D The hook state is global and updates all components simultaneously

💡 Hint

Think about how React hooks work inside components.

Each call to a custom hook creates a separate state instance for that component. States are not shared unless explicitly designed.