TIL : React Context are Not Silver Bullet

React Context

Trying to use ReactContext as global state. Read the react context document. I love it at first, fix the problem state props drilling.

So, I use it, explore it, exploit it, love it, use it anywhere, until …

I found problem re-render problem.

Trying to replicate from codeminer42 blog and modify as far as I know. Replicate and try to code here. You can read codeminer42 blog and found the problem.

Give up.. The solution more complex because react it self. useState are mean for component, if we use it as context in the top of tree, so the whole tree is a component. The whole tree become render-machine.

Actually, for now it doesn’t a problem. So, I will figure it out how to migrate my project.

Zustand

At first, I bit skeptic with the simplicity of zustand. I suspect with zustand. I do not like the simple thing at first. I think zustand will eat more ram because it global. As far as I know, React has his own ecosystem, to make it global will require a memory that will stay from the first app run until the app close. I do not like it at first.

Until, I check the source code it self. Fascinating, the whole code is very simple.

I found zustand idea are using useSyncExternalStore. This hook able to sync external store, outside the react ecosystem. Zustand use this to make vanilla.ts

This subscribe function is defined inside a component so it is different on every re-render.
- useSyncExternalStore docs

vanilla.ts wrap all the API like getState, setState, subscribe, and destroy. It mimic the useSyncExternalStore for easy integration.

zustand’s create function will create vanilla js code to store the state and return the API (getState, setState, etc).

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}))

Because, the data are stored at vanilla js, it detach with react ecosystem. No need to save it using useState, useReducer, or any hook from react. You can see at this vanilla.ts line 46, and at react.ts line 68.

I think this is killer for other state management like redux. Simple implementation, just like create variable and listen it into the component.

How about React Context ?

React context are usefull if the state are rarely change, for example :

User authentication, this state are rarely change, if change the whole page will change, redirect to login form or show error.
User preference, user preference will stay for the whole time without change.
i18n, also rarely change, user will expect for reload or change the whole page.
config, config are also good case to use react context. It only fetch at the beginning and never change

So, the conclusion is use react context at right place and zustand are great because simple and powerfull.