mediumFrontend

What are React custom hooks and when should you use them?

Q: What are React custom hooks and when should you use them?

**Core concept (TL;DR).** A custom hook is a function whose name starts with use and which calls other hooks to **extract and reuse stateful logic** across components. It shares the **logic**, not the state — each component that calls the hook gets its own independent state. Extract reusable logic; each caller gets its own state useToggle() <text x="260" y="72" fill="currentColor" font

820 views

Understand the problem

Creating reusable logic across functional components.

hooksreusability

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A useToggle custom hook

import { useState, useCallback } from "react";

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle];
}

export default function App() {
  const [open, toggleOpen] = useToggle();   // each caller → its own state
  const [dark, toggleDark] = useToggle(true);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui", background: dark ? "#111" : "#fff", color: dark ? "#fff" : "#111" }}>
      <button onClick={toggleOpen}>{open ? "Close" : "Open"} panel</button>
      <button onClick={toggleDark}>Toggle theme</button>
      {open && <p>Panel content</p>}
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you test React components?

How do you fetch data in React?