Our consulting team has enjoyed using several excellent react libraries such as react-spring, react-three-fiber, react-three-flex lately. As a result, we were intrigued when Poimandres' announced Jotai, a Recoil state management alternative. Couple this with the fact we have been using more and more TypeScript, we thought it might be interesting to explore the differences between a Recoil project and one implemented in Jotai with respect to explicit typing.
In an attempt to approximate an 'apples to apples' comparison, we decided on Jaques Bloms' recoil-todo-list as a starting point. It not only uses Typescript, but also utilizes a number of Recoil idioms like Atoms, Selectors and AtomFamily
Below are some highlights of the recoil-todo-list conversion. These steps attempt to illustrate some of the syntatic/algorithmic differences between the two libraries. So let's dive in!
Similar to Recoil, Jotai uses a context provider to enable app wide access to state. After installing Jotai just needed to modify the index.tsx from Recoil's <RecoilRoot> to Jotai's <Provider>.
// index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'jotai'
//import {RecoilRoot} from 'recoil'
ReactDOM.render(
<React.StrictMode>
{/* <RecoilRoot> */}
<Provider>
<App />
</Provider>
{/* </RecoilRoot> */}
</React.StrictMode>,
document.getElementById('root'),
)
The snippet below implements the app's obligatory Dark Mode state management. In Header.tsx just need a small syntatic change to Jotai's {atom, useAtom} from Recoil's {atom, useRecoilState}.
// Header.tsx except
...
export const Header: React.FC = () => {
// RECOIL //
//const [darkMode, setDarkMode] = useRecoilState(darkModeState)
// JOTAI //
const [darkMode, setDarkMode] = useAtom(darkModeState)
...
Next, we needed to convert Tasks.tsx. We chose to go with an Task interface in order to custom defined type a TasksAtom that will be used to store the Task indexes.
// Tasks.tsx excerpt
...
// RECOIL //
// export const tasksState = atom<number[]>({
// key: 'tasks',
// default: [],
// })
// export const tasksState = atom([] as number[])
// JOTAI //
export interface Task {
label: string,
complete: boolean
}
export const tasksAtom = atom<number[]>([])
export const Tasks: React.FC = () => {
const [tasks] = useAtom(tasksAtom)
...
Then we converted Task.tsx, using a Jotai util implementation similar to Recoil's atomFamily. Notice here that Jotai's implementation of atomFamily includes an explicit definition of a getter and setter which internally utilizes the tasksAtom defined in Tasks.tsx.
Btw, Jotai Pull Request #45 went a long way in helping us understand how this should work (props to @dai-shi and @brookslybrand)
// Task.tsx excerpt
...
// RECOIL //
// export const taskState = atomFamily({
// key: 'task',
// default: {
// label: '',
// complete: false,
// },
// })
// JOTAI //
// https://github.com/pmndrs/jotai/pull/45
export const taskState = atomFamily(
(id: number) => ({
label: '',
complete: false,
} as ITask)
)
export const Task: React.FC<{id: number}> = ({id}) => {
//const [{complete, label}, setTask] = useRecoilState(taskState(id))
const [{complete, label}, setTask] = useAtom(taskState(id))
...
The next file to convert is Input.tsx. We chose to substitute the Recoil useRecoilCallback with Jotai's useAtomCallback.
// Input.tsx excerpt
...
// RECOIL
// const insertTask = useRecoilCallback(({set}) => {
// return (label: string) => {
// const newTaskId = tasks.length
// set(tasksState, [...tasks, newTaskId])
// set(taskState(newTaskId), {
// label: label,
// complete: false,
// })
// }
// })
// JOTAI //
const insertTask = useAtomCallback(useCallback((
get, set, label: string
) => {
const newTaskId = tasks.length
set(tasksAtom, [...tasks, newTaskId])
set(taskState(newTaskId), {
label: label,
complete: false,
})
}, [tasks]));
...
Finally, in Stats.tsx, we replaced the Recoil Selectors with readonly Jotai Atoms using computed Task state. In this case, there appears to be only a slight syntatic difference, mostly around the use of string reference keys.
// Stats.tsx excerpt
...
// RECOIL //
/*
const tasksCompleteState = selector({
key: 'tasksComplete',
get: ({get}) => {
const taskIds = get(tasksState)
const tasks = taskIds.map((id) => {
return get(taskState(id))
})
return tasks.filter((task) => task.complete).length
},
})
const tasksRemainingState = selector({
key: 'tasksRemaining',
get: ({get}) => {
const taskIds = get(tasksState)
const tasks = taskIds.map((id) => {
return get(taskState(id))
})
return tasks.filter((task) => !task.complete).length
},
})
*/
// JOTAI
const tasksCompleteState = atom(
get => {
const tasksState = get(tasksAtom)
const tasks = tasksState.map((val, id) => {
return get(taskState(id))
})
return tasks.filter((task: Task) => task.complete).length
},
)
const tasksRemainingState = atom(
get => {
const tasksState = get(tasksAtom)
const tasks = tasksState.map((val, id) => {
return get(taskState(id))
})
return tasks.filter((task: Task) => !task.complete).length
}
)
...
Final Thoughts:
- Overall, we were impressed by how things "just worked".
- The syntactic differences were easy to navigate as well as the different mechanisms for referencing atoms.
- With the relative lack of documentation currently available, we recommend reviewing Jotai issues and pull requests to get more familiar with the concepts and techniques.
- We enjoyed this exercise and as a result will be doing more investigation into using Jotai in our production solutions.
Github Source and CodeSandbox are also available.
Top comments (3)
I really like recoil at the moment, great when you don't want monolithic state like redux, as well as less confusion. But what's Jotai got? So far it seems sorta like a clone of recoil. Would you highlight the major differences?
They compare the differences to Recoil here: jotai.org/docs/basics/comparison
The TL;DR is Recoil is focused on large/complex app needs while Jotai is focused ease of use and being unopinionated. But ultimately they are very similiar.
For a team getting ready to add a state management library (currently using vanilla React), which would you recommend trying first?