jotai vs recoil: Detailed NPM Packages Comparison | Performance, Security & Trends

Redux has long been a go-to state management library when discussing state management in React applications. Many developers are familiar with Redux's single-store approach and boilerplate code. However, other state management libraries like Jotai offer a minimalistic API and a bottom-up approach to managing the global state.

The major difference between Redux and Jotai is that while Redux uses a single store for state, Jotai uses a collection of atoms—each representing a piece of state.

Understanding State Management in React

State management is a core aspect of React development. Libraries like Jotai and Recoil provide a structured way to handle the React state across the React component tree. They offer a more granular approach than React Context, which can lead to many context providers and re-render issues.

React Context and Global State

React Context is a built-in feature that allows for state management at a context level, but it can be cumbersome when dealing with global state. Other state management libraries aim to simplify this process, often reducing the extra re render issue and avoiding memory leaks.

Jotai vs Recoil: Atom Object Referential Identities

Recoil vs Jotai is a common comparison among React developers. Both libraries use atoms as their building blocks, but they handle atom object referential identities differently. Recoil atoms maintain their identities across renders, while Jotai atoms may adopt a more flexible approach.

Derived Atoms and Primitive Atoms

Both libraries support derived atoms and primitive atoms. Derived atoms allow you to create atom values based on other atoms, while primitive atoms hold a simple initial value. Here's how you might define a primitive atom in Jotai:

Copy
1
2
3
import { atom } from 'jotai';

const counterAtom = atom(0); // initial value set to 0

And a derived atom:

Copy
1
const doubledCounterAtom = atom((get) => get(counterAtom) * 2);

Setting it up in the App

Import React and Initialize Atoms

To start using Jotai in your React app, you first need to import React and the atom function from Jotai:

Copy
1
2
import React from 'react';
import { atom } from 'jotai';

React Component Tree Integration

Integrating Jotai into the react component tree is straightforward. You define and use your atoms within your React components without worrying about prop drilling or context providers.

Integration with React Ecosystem

Server Side Rendering and React's Concurrent Mode

Jotai is designed to work seamlessly with server side rendering and React's concurrent mode, offering compatibility with the latest React ecosystem features. This ensures that your React applications can benefit from improved performance and modern React capabilities.

React Query and State Management

React Query is another library that can be used alongside state management libraries like Jotai. It provides powerful tools for fetching, caching, and updating asynchronous data without needing a global state management library.

Jotai vs React Context: Many Context Providers vs. Single Store

Jotai vs React Context often depends on the preference between using many context providers or a more centralized single store approach. Jotai allows for a more distributed state with atom-based management, which can help optimize re-renders and improve performance.

Context API and Local State Challenges

The Context API can sometimes introduce challenges when managing local state and error states. Jotai provides a cleaner solution with its atom-based approach, reducing the complexity of state management.

Jotai In Practice: Theme Switcher Hook

Creating a theme switcher in Jotai is simple. Here's an example of how you might define a theme atom:

Copy
1
const themeAtom = atom('light'); // default value is 'light'

Creating a Theme Atom

The atom holds the theme's initial value and can be read and updated by any React component in the tree.

React Components Reacting to Theme Changes

React components can react to theme changes by subscribing to the theme atom. When the atom values change, the components using it will re-render accordingly.

Read and Write from Separate Components

Combining atoms allows for shared state management across different React components. This is particularly useful when you want to read and write state from separate parts of your application without lifting state up unnecessarily.

Jotai's fine-grained approach to state management helps optimize re-renders. Using individual atoms for pieces of state, React components only re-render when the atoms they subscribe to are updated, avoiding the extra re-render issue.

Async Atoms

Handling Loading and Error States

Async atoms in Jotai allow you to handle loading and error states gracefully. You can define an async atom that fetches data and tracks its loading status:

Copy
1
2
3
4
5
6
7
import { atom } from 'jotai';

const fetchDataAtom = atom(async (get) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
});

Async Atom with Fetch Example

Here's an example of using an async atom with a fetch request to retrieve data:

Copy
1
2
3
4
5
6
7
const dataAtom = atom(async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Failed to fetch data');
  }
  return response.json();
});

Derived Atoms

Derived atoms are the building blocks of derived state in Jotai. They allow you to create complex state logic by deriving new atom values from other atoms or external sources.

Atom Dependency and Reactivity

In Jotai, derived atoms can depend on multiple other atoms, creating a reactive system where changes in one atom can propagate to others. This atom dependency chain is a powerful feature for managing related pieces of state.

Ecosystem and Third-Party Libraries

Jotai and React Spring

Jotai can be used with libraries like React Spring to manage animations and transitions within your React applications. The atomic state management pairs well with the reactive nature of animation libraries.

Code Splitting and Bundle Size Considerations

Code splitting and bundle size are important considerations in modern web development. Jotai's tiny bundle size makes it an attractive choice for developers looking to keep their application's bundle size small.

Let’s Work Together: Rewriting the Hook with AtomWithStorage

Jotai provides utilities like atomWithStorage to persist atom values across sessions. Here's how you might rewrite a counter hook using atomWithStorage:

Copy
1
2
3
import { atomWithStorage } from 'jotai/utils';

const counterWithStorageAtom = atomWithStorage('counter', 0);

Atoms can be applied to one object or many, and they work well with frameworks like Next.js. In the Next.js app directory, you can use atoms to manage state in a way compatible with client-side and server side rendering.

Jotai is Good with Its Relatives 🤝

Jotai's minimalistic API and compatibility with the React ecosystem make it a friendly companion to other libraries and tools. Whether using React Query for data fetching or React Spring for animations, Jotai's atomic state management can integrate smoothly, enhancing your React applications without adding unnecessary complexity.

In conclusion, when comparing Recoil vs Jotai, or considering Jotai vs other state management libraries, it's clear that Jotai offers a unique and powerful approach to state management in React. With its focus on atoms, minimalistic API, and compatibility with the React ecosystem, Jotai is a flexible and efficient developer choice. Whether building a simple theme switcher or a complex application with server-side rendering, Jotai provides the tools you need to manage your React state effectively.