Reusing logic with hooks in React - Step-by-Step Execution

Concept Flow - Reusing logic with hooks

Define custom hook

↓

Use hook in component

↓

Hook manages state & logic

↓

Component renders with hook data

↓

User interaction triggers hook update

↓

Hook updates state

↓

Component re-renders with new data

This flow shows how a custom hook encapsulates logic and state, which components can reuse to keep code clean and consistent.

Execution Sample

React

import { useState } from 'react';

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

This code defines a custom hook that manages a counter state and provides a function to increase it.

Execution Table

Step	Action	State Before	State After	Component Render Output
1	Call useCounter() in component	count: undefined	count: 0	Render count: 0
2	User clicks increment button	count: 0	count: 1	Render count: 1
3	User clicks increment button again	count: 1	count: 2	Render count: 2
4	No more clicks	count: 2	count: 2	Render count: 2

💡 User stops clicking, state remains stable, no re-render triggered.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
count	undefined	0	1	2	2

Key Moments - 3 Insights

Why does the component re-render when count changes?

Because the hook updates the state variable 'count', React detects this change and re-renders the component to show the new count value, as shown in steps 2 and 3 of the execution_table.

Can multiple components use the same custom hook independently?

Yes, each component calling the custom hook gets its own independent state. The hook logic is reused, but state is separate per component instance.

Why do we return an object with count and increment from the hook?

Returning an object bundles the state and the function to update it, so components can easily access and use both, keeping logic reusable and clear.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A 0

B 1

C 2

D undefined

💡 Hint

Check the 'State After' column in row for step 2.

At which step does the component first render with count equal to 0?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Component Render Output' column for each step.

If the increment function was not called, how would the execution_table change?

A count would stay 0 and component renders once

B count would increase automatically

C component would render multiple times with same count

D count would become undefined

💡 Hint

Refer to the exit_note and steps where user clicks increment.

Concept Snapshot

Custom hooks let you reuse stateful logic across components.
Define a function starting with 'use' that uses React hooks inside.
Return state and functions to update it.
Use the hook in any component to share logic but keep state separate.
This keeps code clean and DRY (Don't Repeat Yourself).

Full Transcript

This lesson shows how to reuse logic in React components using custom hooks. We define a hook called useCounter that manages a count state and an increment function. When a component calls useCounter, it gets its own count state starting at zero. When the user clicks a button, the increment function updates the count, causing the component to re-render and show the new count. The execution table traces each step: initial render with count zero, then increments to 1 and 2 on clicks, with the component updating each time. Variables are tracked to show how count changes. Key moments clarify why components re-render on state change, how multiple components can use the same hook independently, and why the hook returns both state and updater. The quiz tests understanding of state values at steps and what happens if increment is not called. The snapshot summarizes how custom hooks help keep React code clean by reusing logic with separate state per component.

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