Understanding React Custom Hooks: A Beginner’s Guide

Custom hooks in React allow you to extract and reuse logic across your components. Before diving into examples, it’s important to understand the underlying theory and concepts.

What Are Hooks?

Hooks are special functions in React that let you “hook into” React’s state and lifecycle features from function components. The most common built-in hooks are:

• useState: Allows you to add state to functional components.
• useEffect: Lets you perform side effects in function components.

Why Use Custom Hooks?

1. Reusability: Custom hooks allow you to reuse stateful logic across different components without duplicating code.
2. Readability: By extracting logic into a custom hook, your component code becomes cleaner and more focused on what it should render.
3. Separation of Concerns: Custom hooks help you separate different concerns of your components, such as data fetching, form handling, etc.

Creating Custom Hooks

A custom hook is a JavaScript function whose name starts with “use” and that can call other hooks. Here’s a breakdown of how to create and use custom hooks:

1. Start with “use”: The function name must start with “use” to comply with React’s hook rules.
2. Use Built-in Hooks: Inside your custom hook, you can use React’s built-in hooks like useState, useEffect, etc.
3. Return Values: Custom hooks can return any value (state, functions, etc.) that you need to use in your component.

Example: useWindowSize

Let’s create a custom hook that keeps track of the window size:

Step 1: Define the Hook

import { useState, useEffect } from 'react';

export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        innerWidth: window.innerWidth,
        innerHeight: window.innerHeight
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

Step 2: Use the Hook in a Component

import React from 'react';
import { useWindowSize } from './useWindowSize';

function App() {
  const { innerWidth, innerHeight } = useWindowSize();

  return (
    <div>
      <h1>Window size</h1>
      <p>Width: {innerWidth}px</p>
      <p>Height: {innerHeight}px</p>
    </div>
  );
}

export default App;

Best Practices for Custom Hooks

1. Start with “use”: Always start the hook name with “use” to follow the convention and rules of React hooks.
2. Keep It Focused: Each custom hook should have a single responsibility. If the hook does too many things, consider breaking it down into smaller hooks.
3. Avoid Side Effects: Custom hooks should primarily handle state and logic. If side effects are necessary, use hooks like useEffect.

Advanced Concepts

1. Composition: You can compose multiple hooks inside a custom hook to create more complex logic.
2. Parameterization: Custom hooks can accept parameters to make them more flexible and reusable.

Resources for Further Reading

• React Official Documentation on Hooks

By understanding these concepts and following best practices, you can effectively create and use custom hooks in your React applications.