Frontend Engineering | VoidX Academy

29. Custom Hooks

Reusing Component Logic

We know how to reuse UI: we extract it into a Component. But what if we want to reuse logic? If you have two different components that both need to fetch data from an API, or track window resize events, or manage a complex counter, you shouldn't duplicate that code. Custom Hooks allow you to extract stateful logic into reusable JavaScript functions.

What is a Custom Hook?

A Custom Hook is simply a JavaScript function whose name starts with use (e.g., useCounter, useFetch) and that calls other React Hooks (like useState or useEffect) inside of it.

import { useState } from 'react';

// 1. Define the Custom Hook (Must start with 'use')
export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  // 2. Return whatever data/functions the components will need
  return { count, increment, decrement, reset };
}

Using the Custom Hook

Now, any component in your application can use this complex counting logic with a single line of code. The UI remains clean and focused entirely on presentation.

import { useCounter } from './useCounter';

export default function Scoreboard() {
  // 3. Consume the hook
  const { count, increment, reset } = useCounter(10);

  return (
    <div>
      <h1>Score: {count}</h1>
      <button onClick={increment}>Add Point</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Are Custom Hooks Shared State?

No. Custom Hooks share stateful logic, not the state itself. If you use the useCounter hook in Component A, and also use it in Component B, they will each get a completely independent, isolated count variable. Clicking the button in Component A will not affect Component B.

29. Custom Hooks

Reusing Component Logic

What is a Custom Hook?

A Custom Hook is simply a JavaScript function whose name starts with use (e.g., useCounter, useFetch) and that calls other React Hooks (like useState or useEffect) inside of it.

import { useState } from 'react';

// 1. Define the Custom Hook (Must start with 'use')
export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  // 2. Return whatever data/functions the components will need
  return { count, increment, decrement, reset };
}

Using the Custom Hook

Now, any component in your application can use this complex counting logic with a single line of code. The UI remains clean and focused entirely on presentation.

import { useCounter } from './useCounter';

export default function Scoreboard() {
  // 3. Consume the hook
  const { count, increment, reset } = useCounter(10);

  return (
    <div>
      <h1>Score: {count}</h1>
      <button onClick={increment}>Add Point</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

29. Custom Hooks

Reusing Component Logic

What is a Custom Hook?

Using the Custom Hook

Are Custom Hooks Shared State?

Knowledge Check

29. Custom Hooks

Reusing Component Logic

What is a Custom Hook?

Using the Custom Hook

Are Custom Hooks Shared State?

Knowledge Check