Most Commonly Used React Hooks

In this article, we will learn about the most commonly used React hooks.

useState

A state can be added to React functional components using this hook. The current state value and a method that can be used to update the state are returned in an array.

Here is an example of how might use the useState hook,

import {useState} from 'react'

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect

This hook is used to perform side effects in functional components. It accepts a function as a parameter, and that function will be run following component rendering. It can be used for things like data retrieval and DOM modification.

Here is an example of how you might use the useEffect hook,

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('The component has rendered');
  });

  return <div>Hello World</div>;
}

useContext

A functional component’s context object can be accessed using this hook. Using the context object, data can be passed down the component tree without having to manually supply props at each level.

See the example below,

import { useContext } from 'react';

const MyContext = React.createContext();

function Example() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

useReducer

When the state is complex or the state logic is too lengthy to fit in a useState method, this hook is used to manage the state in a functional component. The dispatch function can be used to update the state. It accepts a reducer function as an argument and returns the current state.

Below is an example of how to use useReducer hook,

import { 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 Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useMemo

React useMemo is a hook that allows you to memorize a value. By storing the results of expensive function calls and returning the cached value while the input dependencies have not changed, it helps to optimize the performance of a React application.

Here is an example of how to use useMemo hook,

import { useMemo } from 'react';

function MyComponent(props) {
  const expensiveComputation = useMemo(() => {
    // Perform an expensive computation
    // and return the result
  }, [props.a, props.b]);

  return <div>{expensiveComputation}</div>;
}

In this case, only if either props.a or props.b change will the costly computation be carried out. The outcome of the costly computation will be returned from the cache if neither of these props changes.
It’s vital to remember that the useMemo hook only executes the memoization for values used in the render method of the component. Every time a render is performed, the value will be recomputed if it is not used in the render method.

useCallback

React useCallback is a hook that gives you the ability to enhance the efficiency of your functional components by giving you a callback function that has been memoized. The memoized version will be returned if the callback function’s dependencies do not change, eliminating the need to write a new function for each render. When it comes to improving the efficiency of child components that get callback props, this can be quite helpful.

Below is an example of useCallback hook,

import { useCallback } from 'react';

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log('Button was clicked');
  }, []); // no dependencies

  return (
    <ChildComponent handleClick={handleClick} />
  );
}

function ChildComponent({ handleClick }) {
  return (
    <button onClick={handleClick}>Click me</button>
  );
}

The useCallback hook is used in this example to build the handleClick callback method, which has an empty array of dependents. The handleClick function will only be recreated if the dependencies change as a result. In this example, the handleClick method will only be created once because there are no dependencies. Avoiding an unnecessary re-rendering of the ChildComponent if the handleClick prop changes can assist to improve the performance of the component.

Conclusion

These are just a few illustrations of the hooks that React offers and are used in almost every application by React developers. There are numerous additional hooks available for managing forms, managing events, and improving performance. Developers can create reusable, composable code by employing hooks.