Introduction

1// Wrappers everywhere! 
2function App() {
3  return (
4    <AuthProvider>
5      <UserProvider>
6        <RouteProvider>
7          <Routes />
8        </RouteProvider>
9      </UserProvider>
10    </AuthProvider>
11  )
12}

If we remember, the nature of react rendering strategy is as follows:

In nature, we can use useCallback() and useMemo() for handling unnecessary renderings. Turns out, that memoization process has its own cost. I’ve encountered Kent C Dodds’ findings related to this issue. Feel free to read his post if you will.

We will get to know Jotai. a state manager that simplifies data sharing across components, how it has smoother DX to me, and presumably has better performance handling than React Context.

Atoms Everywhere

When we want to lift up the state, we can use atoms that are sharable across the entire web component. we use atoms as the simplest form of state. This is contrast to Redux and Zustand, which use a huge state that consist of lots of smaller states as its attribute.

By having atoms, we don't need to stress about updating subscribers and reducer logics as the app scales.

Here is an example of how to make a state accessible from any component that it requires for both React Context and Jotai:

1// React Context Usage
2
3// CounterContext.js
4import React, { createContext, useContext, useState } from 'react';
5
6const CounterContext = createContext();
7
8export function useCounter() {
9  return useContext(CounterContext);
10}
11
12export function CounterProvider({ children }) {
13  const [count, setCount] = useState(0);
14
15  const increment = () => setCount(prevCount => prevCount + 1);
16  const decrement = () => setCount(prevCount => prevCount - 1);
17
18  const value = {
19    count,
20    increment,
21    decrement,
22  };
23
24  return (
25    <CounterContext.Provider value={value}>
26      {children}
27    </CounterContext.Provider>
28  );
29}
30    

1// Then, use it in the respective component
2// AnyComponent.js
3import React from 'react';
4import { useCounter } from './CounterContext';
5
6function AnyComponent() {
7  const { count, increment, decrement } = useCounter();
8
9  return (
10    <div>
11      <p>Count: {count}</p>
12      <button onClick={increment}>Increment</button>
13      <button onClick={decrement}>Decrement</button>
14    </div>
15  );
16}
17
18export default AnyComponent;
19

Now let's look at how we'd do it in Jotai:

1// Jotai usage
2
3// CounterAtom.js
4import { atom, useAtom } from 'jotai';
5
6export const counterAtom = atom(0);
7
8// anyComponent.js
9import counterAtom from 'path/to/atoms/CounterAtom.js'
10
11// We can directly use it with special hooks from jotai. 
12// More on Getters and Setters (next section)!
13export function AnyComponent {
14  const [count, setCount] = useAtom(counterAtom)
15  // ... value and setters ready to use
16}
17        

Basically Jotai atoms are written just like that. That's why i'd like to put all the atoms inside a file called store.js. For example, we could change the wrapper hell in react context as follows:

1// store.js
2
3// The value inside atom() is atom's default value
4export const authAtom = atom({})
5export const userAtom = atom({})
6export const routeAtom = atom({})
7

Getters and Setters

There are multiple ways for us to access and manipulate the atom content.

You might notice that getters and setters are available in different hooks, this solves the extra re-render issue of React context, and eliminates the need for any memoization.

Providers are optional

Jotai atoms serves the global state by default. Moreover, with its simple syntax, i’d like to put all the atoms inside a file called store.js.

Let’s take a look at wrappers concern in React Context

1// Wrappers everywhere! 
2function App() {
3  return (
4    <AuthProvider>
5      <UserProvider>
6        <RouteProvider>
7          <Routes />
8        </RouteProvider>
9      </UserProvider>
10    </AuthProvider>
11  )
12}

In Jotai, those wrappers can be replaced as follows:

1// store.js
2
3// The value inside atom() is atom's default value
4export const authAtom = atom({})
5export const userAtom = atom({})
6export const routeAtom = atom({})
7

We only use providers when we want to achieve one of these things:

Conclusion

In summary, consider using Jotai over React Context if you value simplicity, performance optimization, fine-grained reactivity, and predictable updates. React Context can be suitable for smaller applications or cases where complex state management is not a primary concern. However, for more advanced state management needs, alternatives like Jotai or Redux might provide more robust solutions.