React · Escape Hatches

Reusing Logic with Custom Hooks

Learn how to extract and share stateful logic between components using custom Hooks, making your code more reusable and maintainable.

Find videos you like?

Save to resource drawer for future reference!

What are Custom Hooks?

Extracting reusable logic

Custom Hooks let you extract component logic into reusable functions. They're JavaScript functions that start with "use" and can call other Hooks.

Benefits

✅ Share logic between components
✅ Keep components simple and clean
✅ Follow DRY principle
✅ Easier testing
✅ Better code organization

Rules

• Must start with "use"
• Can call other Hooks
• Follow Hooks rules
• Can accept parameters
• Can return anything

Key Concept

Custom Hooks share stateful logic, not state itself. Each call to a custom Hook gets its own isolated state!

Creating Your First Custom Hook

Step-by-step guide

Example: useCounter Hook

1. Identify repeated logic:

// In multiple components...

const [count, setCount] = useState(0);

const increment = () => setCount(c => c + 1);

const decrement = () => setCount(c => c - 1);

2. Extract into custom Hook:

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);

return { count, increment, decrement, reset };

}

3. Use it in components:

function MyComponent() {

const { count, increment, decrement, reset } = useCounter(0);

// Use the counter logic!

}

Example: useToggle Custom Hook

A simple but powerful custom Hook

useToggle Hook in Action

Toggle visibility, dark mode, and more

Frontend

// Custom Hook
function useToggle(initialValue = false) {
  const [value, setValue] = React.useState(initialValue);
  
  const toggle = () => setValue(v => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  
  return [value, { toggle, setTrue, setFalse }];
}

// Using the Hook
function App() {
  const [isVisible, visibilityControls] = useToggle(true);
  const [isDarkMode, darkModeControls] = useToggle(false);
  const [isExpanded, expandControls] = useToggle(false);

  React.useEffect(() => {
    const body = document.body;
    if (isDarkMode) {
      body.classList.add('dark-mode');
    } else {
      body.classList.remove('dark-mode');
    }

    return () => body.classList.remove('dark-mode');
  }, [isDarkMode]);

  return (
    <div className={`container ${isDarkMode ? 'dark-mode' : ''}`}>
      <h1>🎛️ useToggle Hook</h1>

      <div className="section">
        <h3>Visibility Toggle</h3>
        <button onClick={visibilityControls.toggle} className="btn-primary">
          {isVisible ? 'Hide' : 'Show'} Content
        </button>
        {isVisible && (
          <div className="content">
            ✨ This content can be toggled!
          </div>
        )}
      </div>

      <div className="section">
        <h3>Dark Mode Toggle</h3>
        <button onClick={darkModeControls.toggle} className="btn-primary">
          {isDarkMode ? '☀️ Light' : '🌙 Dark'} Mode
        </button>
      </div>

      <div className="section">
        <h3>Expandable Section</h3>
        <button onClick={expandControls.toggle} className="btn-primary">
          {isExpanded ? 'Collapse' : 'Expand'}
        </button>
        {isExpanded && (
          <div className="content">
            <p>Here's some extra content!</p>
            <p>Custom Hooks make this so easy.</p>
          </div>
        )}
      </div>

      <div className="info">
        💡 One Hook, multiple uses!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

When to Create Custom Hooks

Decision guide

✅ Create When:

• Logic is used in 2+ components
• Complex stateful logic
• Need to abstract Effects
• Want testable logic
• Improves readability

❌ Don't Create When:

• Only used once
• Simple, obvious logic
• Premature abstraction
• Makes code harder to read
• No real benefit

Rule of Thumb

If you copy-paste the same stateful logic twice, it's time for a custom Hook. Extract it, name it well, and make it reusable!

Best Practices for Custom Hooks

Guidelines for great custom Hooks

Start with "use"

Always name custom Hooks starting with "use" so React knows it's a Hook.

Descriptive Names

Use clear names: useWindowSize, useLocalStorage, useForm

Keep It Focused

Each custom Hook should have a single, clear purpose. Don't make "god Hooks" that do everything.

Return Useful Values

Return arrays for simple values, objects for many values. Make it easy to use!

Key Takeaways

Remember these important points

Reuse Logic

Custom Hooks extract and share stateful logic between components without repeating code.

Isolated State

Each call to a custom Hook gets its own state. Hooks share logic, not state!

Must Start with "use"

Follow the naming convention so React and linters can verify Hook rules.

Follow Hook Rules

Custom Hooks must follow all the same rules as built-in Hooks (top level, React functions only).

Custom Hooks are Powerful!

They're one of React's most powerful features for code organization and reuse. Start building your own library of custom Hooks!

Previous Topic

Basic Error Boundaries

Error handling basics for catching and displaying errors gracefully in React applications.

Next Topic

Basic Custom Hooks

Creating reusable logic basics for sharing stateful logic between components.

Ask a Question

Have a question about Custom Hooks? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Escape Hatches

Reusing Logic with Custom Hooks

Learn how to extract and share stateful logic between components using custom Hooks, making your code more reusable and maintainable.

Find videos you like?

Save to resource drawer for future reference!

What are Custom Hooks?

Extracting reusable logic

Custom Hooks let you extract component logic into reusable functions. They're JavaScript functions that start with "use" and can call other Hooks.

Benefits

✅ Share logic between components
✅ Keep components simple and clean
✅ Follow DRY principle
✅ Easier testing
✅ Better code organization

Rules

• Must start with "use"
• Can call other Hooks
• Follow Hooks rules
• Can accept parameters
• Can return anything

Key Concept

Custom Hooks share stateful logic, not state itself. Each call to a custom Hook gets its own isolated state!

Creating Your First Custom Hook

Step-by-step guide

Example: useCounter Hook

1. Identify repeated logic:

// In multiple components...

const [count, setCount] = useState(0);

const increment = () => setCount(c => c + 1);

const decrement = () => setCount(c => c - 1);

2. Extract into custom Hook:

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);

return { count, increment, decrement, reset };

}

3. Use it in components:

function MyComponent() {

const { count, increment, decrement, reset } = useCounter(0);

// Use the counter logic!

}

Example: useToggle Custom Hook

A simple but powerful custom Hook

useToggle Hook in Action

Toggle visibility, dark mode, and more

Frontend

// Custom Hook
function useToggle(initialValue = false) {
  const [value, setValue] = React.useState(initialValue);
  
  const toggle = () => setValue(v => !v);
  const setTrue = () => setValue(true);
  const setFalse = () => setValue(false);
  
  return [value, { toggle, setTrue, setFalse }];
}

// Using the Hook
function App() {
  const [isVisible, visibilityControls] = useToggle(true);
  const [isDarkMode, darkModeControls] = useToggle(false);
  const [isExpanded, expandControls] = useToggle(false);

  React.useEffect(() => {
    const body = document.body;
    if (isDarkMode) {
      body.classList.add('dark-mode');
    } else {
      body.classList.remove('dark-mode');
    }

    return () => body.classList.remove('dark-mode');
  }, [isDarkMode]);

  return (
    <div className={`container ${isDarkMode ? 'dark-mode' : ''}`}>
      <h1>🎛️ useToggle Hook</h1>

      <div className="section">
        <h3>Visibility Toggle</h3>
        <button onClick={visibilityControls.toggle} className="btn-primary">
          {isVisible ? 'Hide' : 'Show'} Content
        </button>
        {isVisible && (
          <div className="content">
            ✨ This content can be toggled!
          </div>
        )}
      </div>

      <div className="section">
        <h3>Dark Mode Toggle</h3>
        <button onClick={darkModeControls.toggle} className="btn-primary">
          {isDarkMode ? '☀️ Light' : '🌙 Dark'} Mode
        </button>
      </div>

      <div className="section">
        <h3>Expandable Section</h3>
        <button onClick={expandControls.toggle} className="btn-primary">
          {isExpanded ? 'Collapse' : 'Expand'}
        </button>
        {isExpanded && (
          <div className="content">
            <p>Here's some extra content!</p>
            <p>Custom Hooks make this so easy.</p>
          </div>
        )}
      </div>

      <div className="info">
        💡 One Hook, multiple uses!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

When to Create Custom Hooks

Decision guide

✅ Create When:

• Logic is used in 2+ components
• Complex stateful logic
• Need to abstract Effects
• Want testable logic
• Improves readability

❌ Don't Create When:

• Only used once
• Simple, obvious logic
• Premature abstraction
• Makes code harder to read
• No real benefit

Rule of Thumb

If you copy-paste the same stateful logic twice, it's time for a custom Hook. Extract it, name it well, and make it reusable!

Best Practices for Custom Hooks

Guidelines for great custom Hooks

Start with "use"

Always name custom Hooks starting with "use" so React knows it's a Hook.

Descriptive Names

Use clear names: useWindowSize, useLocalStorage, useForm

Keep It Focused

Each custom Hook should have a single, clear purpose. Don't make "god Hooks" that do everything.

Return Useful Values

Return arrays for simple values, objects for many values. Make it easy to use!

Key Takeaways

Remember these important points

Reuse Logic

Custom Hooks extract and share stateful logic between components without repeating code.

Isolated State

Each call to a custom Hook gets its own state. Hooks share logic, not state!

Must Start with "use"

Follow the naming convention so React and linters can verify Hook rules.

Follow Hook Rules

Custom Hooks must follow all the same rules as built-in Hooks (top level, React functions only).

Custom Hooks are Powerful!

They're one of React's most powerful features for code organization and reuse. Start building your own library of custom Hooks!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Basic Error Boundaries

Basic Custom Hooks

Building Your Learning Module...

Reusing Logic with Custom Hooks

Benefits

Rules

Key Concept

Example: useCounter Hook

useToggle Hook in Action

✅ Create When:

❌ Don't Create When:

Rule of Thumb

Start with "use"

Descriptive Names

Keep It Focused

Return Useful Values

Reuse Logic

Isolated State

Must Start with "use"

Follow Hook Rules

Custom Hooks are Powerful!

Basic Error Boundaries

Basic Custom Hooks

Reusing Logic with Custom Hooks

Benefits

Rules

Key Concept

Example: useCounter Hook

useToggle Hook in Action

✅ Create When:

❌ Don't Create When:

Rule of Thumb

Start with "use"

Descriptive Names

Keep It Focused

Return Useful Values

Reuse Logic

Isolated State

Must Start with "use"

Follow Hook Rules

Custom Hooks are Powerful!