How to Use React Context for State Management in Next.js 13

Next.js offers respective approaches to authorities management. While immoderate of these methods require installing caller libraries, React’s Context API is built-in, truthful it’s a awesome measurement of reducing outer dependencies.

With React Context, you tin seamlessly walk information done different parts of your constituent tree, eliminating nan hassle of prop drilling. This is particularly useful for managing world authorities for illustration nan the existent user's logged-in position aliases their preferred theme.

Understanding React Context API

Before diving into nan code, it's important to understand what React Context API is and what problem it addresses.

Props supply an effective method for sharing information betwixt components. They let you to walk information from a genitor constituent to its kid components.

This attack is useful because it intelligibly shows which components usage definite information and really that information flows down nan constituent tree.

However, problems originate erstwhile you person profoundly nested components that request to devour nan aforesaid props. This business tin present complexities and perchance consequence successful convoluted codification that is harder to maintain. These issues, among others, are nan drawbacks of prop drilling.

React Context solves this situation by providing a centralized method to create and usage information that needs to beryllium accessible globally, crossed components.

It sets up a discourse to clasp this data, allowing components to entree it. This attack helps you building your codebase to guarantee it’s well-organized.

Getting Started With State Management successful Next.js 13 Using React Context API

Next.js Server Components let you to create applications that make nan champion of some worlds: nan interactivity of client-side apps and nan capacity benefits of server rendering.

Next.js 13 implements Server Components successful nan app directory—which is now stable—by default. However, because each components are server-rendered, you whitethorn tally into problems erstwhile integrating client-side libraries aliases APIs specified arsenic React Context.

To debar this, a awesome workaround is nan use client emblem that you tin group connected files that will tally client-side code.

To get started, create a Next.js 13 task locally by moving this bid successful your terminal:

npx create-next-app@latest next-context-api

After creating nan project, navigate to its directory:

cd next-context-api

Then commencement nan improvement server:

npm tally dev

Once you’ve group up a basal Next.js project, you tin build a basal to-do app that utilizes React Context API for authorities management.

Create nan Context Provider

The discourse supplier record serves arsenic a cardinal hub wherever you specify and negociate nan world authorities that components request to access.

Create a caller file, src/context/Todo.context.js, and populate it pinch nan pursuing code.

"use client"

import React, { createContext, useReducer } from "react";

const initialState = {
  todos: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return { ...state, todos: [...state.todos, action.payload] };

    case "DELETE_TODO":
      return { ...state, todos: state.todos.filter((todo, index) =>
               index !== action.payload) };

    case "EDIT_TODO":
      const updatedTodos = state.todos.map((todo, index) =>
               index === action.payload.index ? action.payload.newTodo : todo);
      return { ...state, todos: updatedTodos };

    default:
      return state;
  }
};

export const TodoContext = createContext({
  state: initialState,
  dispatch: () => null,
});

export const TodoContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
};

This React Context setup defines a TodoContext which initially holds nan authorities of an quiet to-do database for nan app.

Aside from creating nan first state, this discourse configuration includes a reducer usability that defines various action types. These action types will modify nan context's authorities depending connected nan triggered actions. In this case, nan actions see adding, deleting, and editing to-dos.

The TodoContextProvider constituent provides nan TodoContext to different components successful nan application. This constituent takes 2 props: nan worth prop, which is nan first authorities of nan context, and nan reducer prop, which is nan reducer function.

When a constituent consumes nan TodoContext, it tin entree nan authorities of nan discourse and dispatch actions to update nan state.

Add nan Context Provider to nan Next.js App

Now, to guarantee that nan discourse supplier renders astatine nan guidelines of your Next.js application, and that each customer components tin entree it, you request to adhd nan discourse to nan app’s guidelines layout component.

To do this, unfastened nan src/app/layout.js record and wrap nan children node successful nan HTML template pinch nan discourse supplier arsenic follows:

import './globals.css';
import { TodoContextProvider } from "@/context/Todo.context";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create adjacent app",
};

export default function RootLayout({
  children
}) {
  return (
    <html lang="en">
      <body>
        <TodoContextProvider>{children}</TodoContextProvider>
      </body>
    </html>
  );
}

Create a To-Do Component

Create a caller file, src/components/Todo.js, and adhd nan pursuing codification to it.

Start by making nan pursuing imports. Make judge to see nan use client emblem to people this constituent arsenic a client-side component.

"use client"

import { TodoContext } from "@/context/Todo.context";
import React, { useContext, useState } from "react";

Next, specify nan functional component, including nan JSX elements that will render connected nan browser.

export default function Todo() {
  return (
    <div style={{ marginBottom: "4rem", textAlign: "center" }}>
      <h2>Todos</h2>

      <input
        type="text"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
        style={{ marginBottom: 16}}
        placeholder="Enter a todo"
      />

      <button onClick={handleAddTodo}>Add Todo</button>

      <ul>
        {state.todos.map((todo, index) => (
          <li key={index}>
            {index === editingIndex ? (
              <>
                <input
                  type="text"
                  value={editedTodo}
                  onChange={(e) => setEditedTodo(e.target.value)}
                />

                <button
                  style={{ marginRight: 16}}
                  onClick={() => handleEditTodo(index, editedTodo)}
                >
                    Save
                </button>
              </>
            ) : (
              <>
                {todo}
                <button
                  style={{ marginRight: 16}}
                  onClick={() => setEditingIndex(index)}
                >Edit</button>

                <button
                  onClick={() => handleDeleteTodo(index)}
                >Delete</button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

This functional constituent includes input fields to add, edit, and delete to-dos, on pinch corresponding buttons. It uses React's conditional rendering to show nan edit and delete buttons based connected nan editing scale value.

Lastly, specify nan required authorities variables and nan required handler functions for each action type. Inside nan usability component, adhd nan pursuing code.

  const { state, dispatch } = useContext(TodoContext);
  const [todoText, setTodoText] = useState("");
  const [editingIndex, setEditingIndex] = useState(-1);
  const [editedTodo, setEditedTodo] = useState("");

  const handleAddTodo = () => {
    if (todoText.trim() !== "") {
      dispatch({ type: "ADD_TODO", payload: todoText });
      setTodoText("");
    }
  };

  const handleDeleteTodo = (index) => {
    dispatch({ type: "DELETE_TODO", payload: scale });
  };

  const handleEditTodo = (index, newTodo) => {
    dispatch({ type: "EDIT_TODO", payload: { index, newTodo } });
    setEditingIndex(-1);
    setEditedTodo("");
  };

These handler functions are successful complaint of handling nan addition, deletion, and editing of a user's to-dos wrong nan context's state.

They guarantee that erstwhile a personification adds, deletes, aliases edits a to-do, nan due actions are dispatched to nan context's reducer to update nan authorities accordingly.

Render nan To-Do Component

Finally, import nan To-do constituent into nan page component.

To do that, unfastened nan page.js record successful nan src/app directory, delete nan boilerplate Next.js code, and adhd nan codification below:

import styles from './page.module.css'
import Todo from '../components/Todo'

export default function Home() {
  return (
    <main className={styles.main}>
      <Todo />
    </main>
  )
}

Great! At this point, you should beryllium capable to negociate nan authorities successful nan To-do Next.js app utilizing React Context.

Using React Context API With Other State Management Technologies

The React Context API is simply a awesome solution for authorities management. Nonetheless, it’s imaginable to usage it alongside different authorities guidance libraries for illustration Redux. This hybrid attack ensures you usage nan champion instrumentality for different parts of your app that execute cardinal roles.

By doing so, you tin capitalize connected nan benefits of different authorities guidance solutions to create businesslike and maintainable applications.