How to Build Your Own React Hooks: A Step-by-Step Guide

1. Introduction

In React, custom hooks are a powerful way to encapsulate logic and make it reusable across different components. They allow developers to extract and share stateful logic, promoting code organization and reusability. In this blog post, we’ll explore the creation and implementation of a custom hook, focusing on a real-world example: a window size hook for responsive web design.

2. Creating the Window Size Hook

Purpose of the Window Size Hook

The window size hook is designed to provide a React component with information about the current dimensions of the browser window. This information is invaluable for building responsive components that can adapt their layout based on the available screen space.

Step-by-Step Creation

Let’s create a simple useWindowSize hook:

// useWindowSize.js
import { useState, useEffect } from 'react';

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

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

    window.addEventListener('resize', handleResize);

    // Cleanup event listener on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty dependency array ensures the effect runs only once on mount

  return windowSize;
};

export default useWindowSize;

Explanation:

• We use the useState hook to track the window size.
• The useEffect hook is used to add an event listener for the resize event.
• On a resize event, the handleResize function updates the window size state.
• The event listener is removed when the component unmounts.

3. Implementing the Window Size Hook

Using the Hook in a React Component

Now, let’s see how we can use the useWindowSize hook in a React component:

// ResponsiveComponent.js
import React from 'react';
import useWindowSize from './useWindowSize';

const ResponsiveComponent = () => {
  const windowSize = useWindowSize();

  return (
    <div>
      <p>Window Width: {windowSize.width}</p>
      <p>Window Height: {windowSize.height}</p>
      {/* Your responsive component logic here */}
    </div>
  );
};

export default ResponsiveComponent;

Explanation:

• We import the useWindowSize hook.
• Inside the ResponsiveComponent, we call the hook to get the current window size.
• The component renders the window width and height, and you can incorporate additional responsive logic based on these dimensions.

4. Real-World Example

Scenario: Adaptive Image Gallery

Consider an image gallery that needs to adapt its layout based on the available screen space. We want to display a different number of columns of images depending on the window width.

// ImageGallery.js
import React from 'react';
import useWindowSize from './useWindowSize';

const ImageGallery = () => {
  const windowSize = useWindowSize();
  const columns = windowSize.width < 600 ? 1 : windowSize.width < 1200 ? 2 : 3;

  // Your image gallery logic using the 'columns' variable

  return (
    <div>
      <p>Number of Columns: {columns}</p>
      {/* Your image gallery JSX here */}
    </div>
  );
};

export default ImageGallery;

Explanation:

• We use the useWindowSize hook to get the window size.
• Based on the window width, we dynamically set the number of columns for our image gallery.
• This allows the gallery to adapt its layout for different screen sizes.

5. Conclusion

In this blog post, we explored the creation and implementation of a custom hook in React – the window size hook. Custom hooks, such as useWindowSize, offer a clean and reusable way to encapsulate logic that can be shared across various components. We delved into the step-by-step creation of the hook, demonstrated its use in a simple component, and showcased a real-world example of an adaptive image gallery.

By leveraging custom hooks, developers can enhance code reusability, improve code organization, and create more maintainable and scalable React applications. As you embark on your React journey, consider exploring the vast possibilities that custom hooks offer, and don’t hesitate to create your own to address specific needs in your projects. Happy coding!