Cuando una aplicación crece, managing state only with useState or Context can become complicated. The data that is shared between many components, such as user information, configurations, or product lists, need a more robust approach: global state.
You’ll learn how to manage global state in React using tools beyond Context, when to use them and how to choose the best option for your project.
Although Context is excellent for sharing data between components, it has some limitations:
<
p Whenever the application grows, it’s recommended to use a more specialized state manager.
Redux is one of the most well-known libraries for handling global state in React. Its main features:
import { configureStore, createSlice } from "@reduxjs/toolkit"; const usuarioSlice = createSlice({ name: "usuario", initialState: { nombre: "" }, reducers: { setNombre: (state, action) => { state.nombre = action.payload; }, }, }); export const { setNombre } = usuarioSlice.actions; const store = configureStore({ reducer: { usuario: usuarioSlice.reducer }, });
Usage in a component:
import { useSelector, useDispatch } from "react-redux"; import { setNombre } from "./store"; function Perfil() { const nombre = useSelector((state) => state.usuario.nombre); const dispatch = useDispatch(); return ( Name: {nombre} ); }
Redux is ideal for large and complex applications.
Zustand is a lightweight and modern alternative to handle global state.
BASIC EXAMPLE:
import create from "zustand"; const useStore = create((set) => ({ counter: 0, increment() { set((state) => ({ counter: state.counter + 1 })); } }); function Counter() { const { counter, increment } = useStore(); return ( {counter} ); }
Zustand is excellent for medium-sized projects or when you want simplicity without sacrificing functionality.
Recoil is a library created by Facebook that allows managing global state in a very reactive and modular way.
Jotai is another minimalist library for global state.
