Different Types Of Hooks

React, a popular JavaScript library for building user interfaces, offers a powerful feature called hooks. Hooks allow developers to use state and other React features without writing a class. Different types of hooks serve various purposes, from managing state and side effects to handling context and custom logic. This post will delve into the different types of hooks in React, their uses, and how to implement them effectively.

Understanding React Hooks

React hooks were introduced in version 16.8 to enable functional components to have state and other features that were previously only available in class components. Hooks provide a more concise and readable way to manage component logic. The most commonly used hooks are useState and useEffect, but React offers many more that cater to different needs.

Basic Hooks

Let’s start with the basic hooks that are essential for most React applications.

useState

The useState hook allows you to add state to functional components. It returns a state variable and a function to update it.

import React, { useState } from ‘react’;

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

return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

useEffect

The useEffect hook lets you perform side effects in functional components. It runs after the render is committed to the screen. This hook is useful for data fetching, subscriptions, and manually changing the DOM.

import React, { useState, useEffect } from ‘react’;

function DataFetcher() {
  const [data, setData] = useState(null);

useEffect(() => {
    fetch(’https://api.example.com/data’)
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array means this effect runs once after the initial render

return (
    

      {data ? 
{JSON.stringify(data, null, 2)}
 : ‘Loading…’}
    
  );
}

Additional Hooks

Beyond the basic hooks, React provides several other hooks that cater to more specific needs.

useContext

The useContext hook allows you to access the context value without having to pass props down through the component tree. This is useful for global state management.

import React, { useContext } from ‘react’;
import { ThemeContext } from ‘./ThemeContext’;

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return I am styled by theme context!;
}

useReducer

The useReducer hook is an alternative to useState for managing more complex state logic. It is particularly useful when the next state depends on the previous one.

import React, { useReducer } from ‘react’;

function reducer(state, action) {
  switch (action.type) {
    case ‘increment’:
      return { count: state.count + 1 };
    case ‘decrement’:
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

return (
    

      
Count: {state.count}
       dispatch({ type: ‘decrement’ })}>-
       dispatch({ type: ‘increment’ })}>+
    
  );
}

useCallback

The useCallback hook returns a memoized version of the callback function that only changes if one of the dependencies has changed. This is useful for optimizing performance by preventing unnecessary re-renders.

import React, { useState, useCallback } from ‘react’;

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

const memoizedCallback = useCallback(() => {
    doSomething(count);
  }, [count]);

return ;
}

function ChildComponent({ callback }) {
  return Click me;
}

useMemo

The useMemo hook returns a memoized value that only re-computes when one of the dependencies has changed. This is useful for expensive calculations that should not be re-computed on every render.

import React, { useState, useMemo } from ‘react’;

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);

const expensiveValue = useMemo(() => computeExpensiveValue(count), [count]);

return (
    

      
Count: {count}
      
Expensive Value: {expensiveValue}
       setCount(count + 1)}>Increment Count
       setOtherCount(otherCount + 1)}>Increment Other Count
    
  );
}

function computeExpensiveValue(num) {
  // Simulate an expensive computation
  let result = 0;
  for (let i = 0; i < 1e6; i++) {
    result += num;
  }
  return result;
}

useRef

The useRef hook returns a mutable ref object whose .current property is initialized to the passed argument. The returned object will persist for the full lifetime of the component.

import React, { useRef } from ‘react’;

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

const onButtonClick = () => {
    // current points to the mounted text input element
    inputEl.current.focus();
  };

return (
    

      
      Focus the input
    
  );
}

useImperativeHandle

The useImperativeHandle hook customizes the instance value that is exposed when using ref. This is useful when you need to expose a custom API to parent components.

import React, { forwardRef, useImperativeHandle, useRef } from ‘react’;

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

return ;
});

function ParentComponent() {
  const inputRef = useRef();

return (
    

      
       inputRef.current.focus()}>Focus the input
    
  );
}

useLayoutEffect

The useLayoutEffect hook is similar to useEffect, but it fires synchronously after all DOM mutations. This is useful for reading layout from the DOM and synchronously re-rendering.

import React, { useLayoutEffect, useRef } from ‘react’;

function LayoutEffectExample() {
  const divRef = useRef();

useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);

return 
Hello, world!
;
}

useDebugValue

The useDebugValue hook can be used to display a label for custom hooks in React DevTools. This is useful for debugging custom hooks.

import React, { useDebugValue } from ‘react’;

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
  ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};


}, [friendID]);

useDebugValue(isOnline ? ‘Online’ : ‘Offline’);

return isOnline;
}

Custom Hooks

In addition to the built-in hooks, you can create your own custom hooks to encapsulate and reuse logic across different components. Custom hooks follow the same rules as built-in hooks and can use other hooks internally.

Creating a Custom Hook

Let’s create a custom hook called useWindowWidth that returns the width of the window.

import { useState, useEffect } from ‘react’;

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

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


}, []);

return width;
}

function WindowWidthDisplay() {
  const width = useWindowWidth();

return 
Window width: {width}px
;
}

💡 Note: Custom hooks should start with the word "use" to follow the naming convention and to make it clear that they are hooks.

Best Practices for Using Hooks

While hooks provide a powerful way to manage state and side effects in functional components, it’s important to follow best practices to ensure your code is maintainable and performant.

Rules of Hooks

React has two main rules for using hooks:

• Only Call Hooks at the Top Level: Don’t call hooks inside loops, conditions, or nested functions. This ensures that hooks are called in the same order each time a component renders.
• Only Call Hooks from React Functions: Call hooks from within React functional components or custom hooks. Don’t call them from regular JavaScript functions.

Dependency Arrays

When using hooks like useEffect and useCallback, it’s crucial to specify the correct dependencies. This ensures that the effect or callback is only re-run when necessary.

useEffect(() => {
  // This effect depends on count and otherCount
  doSomething(count, otherCount);
}, [count, otherCount]);

Cleanup Functions

When using useEffect, always return a cleanup function if your effect creates resources that need to be cleaned up. This prevents memory leaks and ensures your application runs smoothly.

useEffect(() => {
  const subscription = someApi.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, []);

Avoiding Unnecessary Re-renders

Use useMemo and useCallback to optimize performance by preventing unnecessary re-renders. However, use them judiciously, as over-optimization can make your code harder to understand and maintain.

Different Types Of Hooks

As we have explored, React provides a variety of hooks to cater to different needs. Here is a summary of the different types of hooks and their uses:

Each of these hooks serves a unique purpose and can be combined to create powerful and efficient React components.

React hooks have revolutionized the way developers build user interfaces. By providing a simple and intuitive way to manage state and side effects in functional components, hooks have made React more accessible and enjoyable to use. Whether you’re building a small application or a large-scale enterprise solution, understanding and leveraging the different types of hooks can significantly enhance your development experience.

Related Terms:

• 5 types of hooks
• five types of hooks
• types of writing hooks
• essay hooks
• hook examples