Creating custom hooks in React - Why You Should Know This

The Big Idea

What if you could write shared logic once and never copy it again?

The Scenario

Imagine you have several React components that need to share the same logic, like fetching data or handling a form input. You copy and paste the same code into each component.

The Problem

Copying code everywhere makes your app hard to maintain. If you find a bug or want to improve the logic, you must update every copy. This wastes time and causes mistakes.

The Solution

Creating custom hooks lets you write the shared logic once and reuse it easily in any component. This keeps your code clean, consistent, and easy to update.

Before vs After

✗ Before

import { useState, useEffect } from 'react';

function ComponentA() {
  const [count, setCount] = useState(0);
  useEffect(() => { console.log(count); }, [count]);
  // same logic repeated in ComponentB
}

✓ After

import { useEffect } from 'react';

function useCountLogger(count) {
  useEffect(() => { console.log(count); }, [count]);
}

function ComponentA() {
  const [count, setCount] = useState(0);
  useCountLogger(count);
}

What It Enables

You can build cleaner, reusable logic blocks that work across many components, making your app easier to grow and fix.

Real Life Example

Imagine a custom hook that handles user authentication status. Instead of repeating login checks in every page, you call the hook once and get consistent, up-to-date info everywhere.

Key Takeaways

Copy-pasting logic leads to bugs and wasted effort.

Custom hooks let you share logic cleanly across components.

This makes your React code easier to maintain and scale.