React Hooks: Revolutionising Component State Management

In this blog, you'll learn all about React Hooks, including why they're a game-changer and how they work.

Hooks

In React v16.8, a game-changing feature called Hooks was introduced. It's an exciting addition that revolutionizes how we use React and simplifies state management in our applications.

Hooks provide us with functions that enable us to manage states seamlessly between multiple re-renders in our application.
They serve as the bridge between the UI, logic, and variables, bringing them together.

The Motivation Behind Hooks

Simplify State Management

Before hooks, stateful logic had to be implemented in class-based components, which was tedious and repetitive. With hooks, state is simpler to manage and can be used within functional components.
Encourage Reusability of Code

Hooks eliminate the need to write redundant code when components share logic and behaviour.
Simplify Complex Operations

Hooks simplify complex operations like animations, timers, and subscriptions, making them more manageable and easier to maintain.

I'm glad now you have a basic understanding of hooks. In the next section, we'll explore popular React hooks, their use cases, and even dive into creating our own custom hook to enhance our development experience.

useState()

The useState() hook in React allows us to manage state within functional components. It takes an initial value as an argument and returns an array with two elements: the current state value and a function to update that value.

Use case: Let's say we're building a form where users can enter their name. We want to capture and display the entered name dynamically.

Example: In the below example, we start by passing an empty string as the initial state value to useState(''). We destructure the returned array into name and setName. The name variable holds the current state value, and setName is the function to update that value.

We bind the input field's value to the name state variable using value={name} and capture any changes in the handleInputChange function by calling setName().

The entered name is then dynamically displayed using {name} within the paragraph element.

import React, { useState } from 'react';

const NameForm = () => {
  const [name, setName] = useState('');

  const handleInputChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleInputChange}
        placeholder="Enter your name"
      />
      <p>Hello, {name}!</p>
    </div>
  );
};

export default NameForm;

useReducer()

The useReducer() hook in React is used for more complex state management. It provides a way to update state based on actions dispatched to a reducer function. It takes the reducer function and an initial state as arguments, and returns the current state and a dispatch function.

Use case: Let's imagine we're building a shopping cart feature where users can add and remove items. We need a mechanism to update the cart state based on different actions, such as adding or removing items.

Example: In the below example, we define a cartReducer function that handles state updates based on different action types. We can add an item to the cart by dispatching the 'ADD_ITEM' action with the payload containing the item details, and we can remove an item by dispatching the 'REMOVE_ITEM' action with the payload item ID.

Using useReducer(cartReducer, { items: [] }), we initialize the state with an empty array representing the items in the cart. The cart variable holds the current state, and dispatch is the function we use to trigger state updates using cartReducer.

import React, { useReducer } from 'react';

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload),
      };
    default:
      return state;
  }
};

const ShoppingCart = () => {
  const [cart, dispatch] = useReducer(cartReducer, { items: [] });

  const addItemToCart = (item) => {
    dispatch({ type: 'ADD_ITEM', payload: item });
  };

  const removeItemFromCart = (itemId) => {
    dispatch({ type: 'REMOVE_ITEM', payload: itemId });
  };

  return (
    <div>
      <ul>
        {cart.items.map(item => (
          <li key={item.id}>
            {item.name} - <button onClick={() => removeItemFromCart(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItemToCart({ id: 1, name: 'Product' })}>Add to Cart</button>
    </div>
  );
};

export default ShoppingCart;

useEffect()

The useEffect() hook in React allows us to perform side effects in functional components. It takes a callback function and an optional array of dependencies, triggering the callback when dependencies change or on component mount/unmount.

Use case: Let's consider a weather app that fetches weather data from an API when the component mounts and updates based on a selected location.

Example: In the below example, we use useEffect() to fetch weather data when the component mounts and whenever the location state changes. We provide a callback function to useEffect() that contains the logic to fetch data and update the weatherData state.

By specifying [location] as the dependency array, the effect will trigger whenever the location state changes, ensuring the weather data is updated accordingly.

import React, { useEffect, useState } from 'react';

const WeatherApp = () => {
  const [weatherData, setWeatherData] = useState(null);
  const [location, setLocation] = useState('New York');

  useEffect(() => {
    // Fetch weather data based on location...
    // Update weatherData state with fetched data...
  }, [location]);

  // JSX for rendering the weather app...
};

export default WeatherApp;

useRef()

The useRef() hook in React provides a way to create a mutable reference that persists across component renders. It is often used to access or store references to DOM elements or values.

Use case: Let's consider a form validation scenario where we want to focus on an input field when the form loads initially.

Example: In the example below, we use useRef() to create a reference called inputRef that initially points to null.

By using useEffect() with an empty dependency array [], the effect runs only once when the component mounts. Inside the effect, we call inputRef.current.focus() to focus on the input field.

import React, { useRef, useEffect } from 'react';

const Form = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <form>
      <input type="text" ref={inputRef} />
      {/* Other form elements */}
    </form>
  );
};

export default Form;

useLayoutEffect()

The useLayoutEffect() hook in React is similar to useEffect(), but it runs synchronously after all DOM mutations. It is often used for measurements or manipulations that require updated DOM information.

Use case: Let's consider a scenario where we want to measure the dimensions of an element after it has rendered and update a state based on those measurements.

Example: In the example below, we use useLayoutEffect() to measure the dimensions of the element referred to by elementRef. By passing an empty dependency array [], the effect runs only once after the initial render.

Inside the effect's callback function, we access the element using elementRef.current and call getBoundingClientRect() to retrieve its width and height.

import React, { useLayoutEffect, useState } from 'react';

const ElementDimensions = () => {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    const element = elementRef.current;
    const { width, height } = element.getBoundingClientRect();
    setDimensions({ width, height });
  }, []);

  return (
    <div ref={elementRef}>
      Element Width: {dimensions.width}, Height: {dimensions.height}
    </div>
  );
};

export default ElementDimensions;

useImperativeHandle()

The useImperativeHandle() hook in React allows a parent component to access and interact with specific functions or properties of a child component's imperative (ref) instance. It is often used to expose a custom API from a child component to its parent.

Use case: Let's consider a scenario where we have a custom input component that needs to expose a focus() function to allow the parent component to programmatically focus on the input of the child component's input field.

Example: In the example below, we define a CustomInput component that uses forwardRef() to receive a ref from the parent component.

Inside CustomInput, we create an inputRef using useRef() to access the actual input element.

By using useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() })), we expose a focus() function to the parent component through the ref. The focus() function allows the parent component to programmatically focus on the input.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// Child component
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    // focus api is exposed using ref passed
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} />;
});

// Parent component
const ParentComponent = () => {
  const customInputRef = useRef(null);

  const handleClick = () => {
    customInputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={customInputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

useContext()

The useContext() hook so called Context API in React allows components to consume values from a context provided by a parent component. It provides a convenient way to access and use shared data or functionality without passing props down (props drilling) through multiple levels of components.

Use case: Let's consider a multi-step form where we want to share the current step information across different form sections.

Example: In the example below, we define a StepContext using createContext(). We also have a Form component that maintains the currentStep state.

By wrapping the components that need access to the current step with StepContext.Provider and providing the currentStep value, we make it available to them.

The StepIndicator, FormSection1, and FormSection2 components use useContext(StepContext) to consume the current step value from the context.

import React, { createContext, useContext, useState } from 'react';

const StepContext = createContext();

const Form = () => {
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <StepContext.Provider value={currentStep}>
      <StepIndicator />
      <FormSection1 />
      <FormSection2 />
      <Button onClick={() => setCurrentStep(currentStep + 1)}>Next</Button>
    </StepContext.Provider>
  );
};

const StepIndicator = () => {
  const currentStep = useContext(StepContext);

  return <div>Current Step: {currentStep}</div>;
};

const FormSection1 = () => {
  const currentStep = useContext(StepContext);

  return <div>Form Section 1 (Current Step: {currentStep})</div>;
};

const FormSection2 = () => {
  const currentStep = useContext(StepContext);

  return <div>Form Section 2 (Current Step: {currentStep})</div>;
};

export default Form;

useMemo()

The useMemo() hook in React allows for memoizing the result of a computation. It is used to optimize performance by caching the value of an expensive calculation and only recomputing it when the dependencies change.

Use case: Let's consider a scenario where we have a component that displays a formatted date and we want to avoid formatting the date on every render.

Example: In the example below, we use useMemo() to memoize the result of the formatDate() function. The function provided to useMemo() will only run when the date dependency changes.

import React, { useMemo } from 'react';

const DateDisplay = ({ date }) => {
  const formattedDate = useMemo(() => {
    return formatDate(date);
  }, [date]);

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

const formatDate = (date) => {
  // Perform expensive date formatting here...
  return formattedDate;
};

useCallback()

The useCallback() hook in React allows for memoizing a callback function. It is used to optimize performance by preventing unnecessary re-creation of the callback on each render, especially when passing callbacks to child components.

Use case: Let's consider a scenario where we have a component that renders a list of users and needs to handle a callback when a user is selected.

Example: In the example below, we use useCallback() to memoize the handleUserSelect callback function. By providing an empty dependency array [], we ensure that the callback function is only created once during the initial render of the UserList component.

By memoizing the callback function, we prevent unnecessary re-creations of the function on subsequent renders, optimizing the performance of the component. When a user is clicked, the handleUserSelect function is called to update the selected user state, and the list is re-rendered only if the selected user changes.

import React, { useCallback, useState } from 'react';

const UserList = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleUserSelect = useCallback((user) => {
    setSelectedUser(user);
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map((user) => (
          <li
            key={user.id}
            onClick={() => handleUserSelect(user)}
            className={selectedUser === user ? 'selected' : ''}
          >
            {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

Custom Hooks

Custom hooks are a way to share logic across different components. They provide a convenient solution for extracting repeated logic from components into a reusable hook function.

Let's create a useCounter custom hook that manages a counter and provides functions to increment and decrement its value.

Step 1: Identify the reusable logic: Counter-state management and increment/decrement functionality.

Step 2: Create a new file for your custom hook: Create a file named useCounter.js.

Step 3: Define and export your custom hook:

// useCounter.js
import { useState } from 'react';

export const useCounter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return { count, increment, decrement };
};

Implement the logic within the custom hook: In the useCounter function, we use the useState hook to manage the count state. We define two functions, increment and decrement, which updates the count state accordingly.

Step 4: Use the custom hook in your components:

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

const CounterComponent = () => {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

In the CounterComponent, we invoke the useCounter custom hook, which returns the count, increment, and decrement values. We can then use these values within the component to display the count and handle incrementing and decrementing the counter.

By creating and using the useCounter custom hook, we can easily reuse the counter logic in multiple components throughout our application, keeping our code modular and improving maintainability.

The 3 main advantages of custom hooks are reusability, abstraction and simplification.

https://codesandbox.io/embed/practical-hooks-dyd6fh?fontsize=14&hidenavigation=1&theme=dark

Final Thoughts

React Hooks offer a powerful way of building modern, efficient, and reusable components. They're easy to learn and use, and they can help you to optimize the performance of your applications. So, let's embrace the power of React hooks and continue exploring their vast capabilities to create amazing user interfaces.

Happy hooking!

Unleashing the Power of React Hooks: Revolutionising Component State Management

Simplifying React Development with Hooks for Efficient State Management