A Guide to Building Custom Hooks in React

Writing custom React hooks allows you to encapsulate and reuse logic across your React components. Here's a general guide to creating your own custom React hook:

1. Naming Convention: Custom hooks should start with use, like useCustomHook.

2. Create the Hook Function:

   • Begin by declaring a function that starts with use, for example, function useCustomHook() {}.
   • This function is essentially a regular JavaScript function.

3. Add State and Effects:

   • Inside your hook, you can use other hooks like useState, useEffect, useContext, etc.
   • For example, const [state, setState] = useState(initialState);

4. Implement Custom Logic:

   • This is where you implement the logic that your custom hook is supposed to encapsulate.
   • You can manage state, side effects, or any other logic that should be abstracted away.

5. Return What's Necessary:

   • Custom hooks can return anything – a single value, an array of values, or an object.
   • For example, return [state, setState]; or return { state, updateState: setState };

6. Using Your Custom Hook:

   • In your functional components, you can now use this hook like any other hook.
   • For example, const [myState, setMyState] = useCustomHook();

7. Keep in Mind:

   • Rules of Hooks apply to custom hooks as well. They should not be called conditionally or from regular JavaScript functions.

8. Example:
   Let's say you want a hook to track the window size:
   

   import { useState, useEffect } from 'react';

   function useWindowSize() {
     const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

     useEffect(() => {
       const handleResize = () => {
         setSize([window.innerWidth, window.innerHeight]);
       };

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

     return size;
   }

In this example, useWindowSize is a custom hook that encapsulates the logic for listening to the window's resize event and provides the current size of the window. Remember, the beauty of custom hooks is in their reusability and the encapsulation of complex logic, making your main components cleaner and more readable.