Using React hooks to optimize re-renders
For global states, optimizing re-renders is important because not all components use all the properties in a global state. Let's learn how Zustand addresses this.
To use store in React, we need a custom hook. Zustand's create function creates a store that can be used as a hook.
To follow the naming convention of React hooks, we have named the created value useStore instead of store:
// store.ts
import create from "zustand";
export const useStore = create(() => ({
count: 0,
text: "hello",
}));
Next, we must use the created useStore hook in React components. The useStore hook, if it's invoked, returns the entire state object, including all its properties. For example, let's define a component that shows the count value in store:
import { useStore } from "./store.ts";
const Component = () => {
const { count, text } = useStore();
...