Hay partes de mi aplicación que deben funcionar sincrónicamente. Estoy usando zustand. El problema es que la función setState de zustand funciona de forma asíncrona. Avíseme si hay otras bibliotecas que admitan cambios de estado sincrónicos o algún truco.
App.js (ejemplo de reacción)
// in real import create from 'zustand' import logo from './logo.svg'; import React, { useEffect } from 'react'; const useStore = create(() => ({ counter: 0 })) function App() { const { counter } = useStore() useEffect(() => { console.log(counter) // output: 0 useStore.setState({ counter: counter + 1 }) console.log(counter) // output: 0 useStore.setState({ counter: counter + 1 }) console.log(counter) // output: 0 }, []); return ( <div></div> ); } export default App; // my hope // ... useEffect(() => { console.log(counter) // output: 0 useStore.setState({ counter: counter + 1 }) console.log(counter) // output: 1 useStore.setState({ counter: counter + 1 }) console.log(counter) // output: 2 }, []); // ...El problema está en su definición de contador.
const { counter } = useStore()debiera ser
const counter = useStore((state)=> state.counter)Aquí hay un ejemplo de cómo debería verse su código:
Tienda:
const useStore = create(() => ({ counter: 0, addOne: () => set((state) => ({ counter: state.counter +1 })), }))aplicación:
function App() { const counter = useStore((state)=> state.counter) const addOne = useStore((state)=> state.addOne) useEffect(() => { let interval = setInterval(() => addOne(), 1000) return () => clearInterval(interval) }, [counter]); return ( <div>{counter}</div> ); } Estoy lanzando la función setInterval allí para que se actualice una vez por segundo. El uso del estado del counter como una dependencia para useEffect hará que el componente se vuelva a procesar cada vez que se cambie el estado.