Zustand es un gestor de estados globales muy sencillo de usar. Es mucho mas intuitivo y facil de trabajar que el useContext y acá lo vamos a explicar un poco

Instalacion

Instalar Zustand es muy sencillo

pnpm install zustand

Configurar estado global

A partir de la instalacion de Zustand podemos empezar a trabajar con la configuracion de los estados globales. Para eso recomiendo crear una carpeta en el proyecto donde se guarden estos estados: la carpeta store

Una vez dentro de la carpeta store debemos crear el archivo que contendrá nuestro estado global. Vamos a trabajar con un ejemplo en donde desarrollamos una app de preguntas y respuestas. Para eso entonces debemos desarrollar el estado global con las preguntas. El primer paso es importar el create de zustand

import {create} from "zustand";

Una vez que lo importamos, ya lo podemos crear de la siguiente forma. La funcion create necesita un callback que es el set, como en todos los estados de React el set se usa para cambiar el valor del mismo. Y la funcion que contenga el estado retornará el valor que tendrá justamente el estado y las formas de actualizarse. El ejemplo:

const useQuestionsStore=create((set)=>{
    return {
        questions:[],
        currentQuestion:0,
        fetchQuestions:async(limit)=>{
            console.log("hola");
        }
    }
})

Listo, ahora por ejemplo si quisieramos llamar al array questions en nuestro componente App lo podemos hacer tranquilamente!

const questions=useQuestionsStore(state=>state.questions);
console.log(questions);

Actualizar el estado

Siguiendo el ejemplo que vimos recien, intentemos actualizar el estado cargando preguntas al array question. Para hacerlo debemos usar el callback set que hemos introducido cuando creamos el estado para, valga la redundancia, setear el estado a un nuevo valor.

fetchQuestions:async(limit)=>{
            set({
                questions:[
                    {
                        id: 13,
                        question: "¿Cuál es la salida de este código?",
                        code: "const obj1 = {a: 'foo'};\\nconst obj2 = {b: 'bar'};\\nconst obj3 = {c: 'baz'};\\nconst obj4 = Object.assign(obj1, obj2, obj3);\\nconsole.log(obj4);",
                        answers: [
                          "{a: 'foo', b: 'bar', c: 'baz'}",
                          "{b: 'bar', c: 'baz'}",
                          "{a: 'foo', b: 'bar'}",
                          "{c: 'baz'}"
                        ],
                        correctAnswer: 0
                    }
                ]
            })
        }

Método GET

Ya vimos que el set sirve para poder setear el estado de la forma que nosotros deseemos. Zustand tiene ademas un metodo para poder obtener el valor del estado cuando no lo podemos obtener llamando a ese estado. Un ejemplo de un caso donde deberiamos usarlo: cuando queremos obtener el estado para ejecutar una funcion dentro de ese mismo estado, por ejemplo en nuestra app de preguntas queremos guardar las respuestas que el usuario va dando a las preguntas que le mostramos en pantalla para despues comparar como le fue. El metodo get te puede devolver todo el estado o solo la parte que te interese del estado.

export const useQuestionsStore=create((set, get)=>{
    return {
        questions:[],
        currentQuestion:0,
        selectedAnswer:(questionId, answerIndex)=>{
            const {questions}=get();
            const newQuestions=[...questions];
        },

Si necesitas obtener el estado entero en lugar de un solo elemento, podes hacerlo asi

const state=get();