Zustand

$ npm i zustand

code:store.js(javascript)

import { create } from 'zustand'

const useBearStore = create((set) => ({

bears: 0,

increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),

removeAllBears: () => set({ bears: 0 }),

}))

export default useBearStore

code:component.js(javascript)

import useBearStore from '@/store.js'

// ...

function BearCounter() {

const bears = useBearStore((state) => state.bears)

return <h1>{bears} around here ...</h1>

}

function Controls() {

const increasePopulation = useBearStore((state) => state.increasePopulation)

return <button onClick={increasePopulation}>one up</button>

}