How to Use React Hooks for State Management

Posted on by Panther

React Hooks have greatly simplified state management in React applications. With the introduction of Hooks in React 16.8, developers can easily manage and update state within functional components without having to convert them to class components. In this tutorial, we will be looking at how to use React Hooks for state management.

What are React Hooks?

React Hooks are functions that allow you to use state and other React features without writing a class. With Hooks, you can use state and other React features in your functional components. This means you can now manage state in your functional components without writing a class.

Some of the hooks we will be discussing include:

  • useState
  • useEffect
  • useContext
  • useReducer

useState

The useState hook allows us to add state to our functional components. Here’s how you can use it:

import React, { 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>
  );
}

In the above example, we’re using the useState hook to add state to our functional component. The useState function takes an initial state value and returns an array containing the current state value and a function to update the state.

useEffect

The useEffect hook allows us to perform side effects in our functional components, such as data fetching, when the component is mounted or updated. Here’s how you can use it:

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

In the above example, we’re using the useEffect hook to update the document title when the count state changes. useEffect takes a function as its first argument, which will be run when the component mounts, and every time the component updates. The second argument is an array of values that will trigger the effect only if any of the values change.

useContext

The useContext hook allows us to consume a context in our functional components. Here’s how you can use it:

import { createContext, useContext } from 'react';

const MyContext = createContext('defaultValue');

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value='hello'>
      <MyComponent />
    </MyContext.Provider>
  );
}

In the above example, we’re using the useContext hook to consume a context we’ve created with the createContext function. We define the context value in the App component and then use the MyComponent component to consume it.

useReducer

The useReducer hook allows us to manage state in a similar way to how we would in a Redux store. Here’s how you can use it:

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 (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

In the above example, we’re using the useReducer hook to manage state with a reducer function. The useReducer hook takes a reducer function as its first argument and an initial state value as its second argument. It returns an array containing the current state value and a dispatch function, which we can use to update the state.

Conclusion

React Hooks have greatly simplified state management in React applications. With Hooks, you can use state and other React features in your functional components without writing a class. The hooks we’ve looked at include useState, useEffect, useContext, and useReducer. By using these hooks, you can easily manage and update state within your functional components.

Related Post