Introduction to Jotai: Simple and Powerful State Management in React

Introduction

State management is one of the main challenges in developing React applications. Various methods such as Redux, Context API, and Recoil are available for this purpose. However, in some cases, these tools introduce unnecessary complexity, especially for small or medium-sized projects.

Jotai is a lightweight state management library for React that offers a minimal, simple, and powerful approach. It uses atoms (independent state units) and works based on React Hooks.

Installation and Setup

To start using Jotai, you first need to install it. This can be easily done using npm or yarn:

npm install jotai
or
yarn add jotai

After installation, we can define our first atom.

Creating and Using Atoms in Jotai

An atom in Jotai is the smallest unit of state, which can be used in any component. For example, let's create a simple atom to manage a counter:

import { atom, useAtom } from 'jotai';

// Define an atom for the counter
const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <p>Counter Value: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Code Explanation

We defined a state called countAtom using atom, initializing it with 0.

In the Counter component, we used useAtom to access the state value and its setter function.

Every time the button is clicked, the counter value increases.

Managing Derived State

Sometimes, we need to calculate a value based on another value. In Jotai, we can use Derived Atoms:

const doubleCountAtom = atom((get) => get(countAtom) * 2);

function DoubleCounter() {
  const [doubleCount] = useAtom(doubleCountAtom);
  return <p>Double Counter Value: {doubleCount}</p>;
}

Managing Async Data with Jotai

To manage async data (e.g., fetching data from an API), we can use Async Atoms:

const fetchUserAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return response.json();
});

function UserProfile() {
  const [user] = useAtom(fetchUserAtom);
  return <p>User Name: {user.name}</p>;
}

Practical Project: Todo List

In this section, we'll implement a Todo List project using Jotai.

Defining the State

const todoListAtom = atom([]);
const newTodoAtom = atom('');

Todo List Component

function TodoApp() {
  const [todos, setTodos] = useAtom(todoListAtom);
  const [newTodo, setNewTodo] = useAtom(newTodoAtom);

  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>Add Task</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

Conclusion

Jotai is a simple yet powerful state management tool for React that:

Has a clean and readable syntax.

Uses hooks and is fully compatible with React.

Provides state management for complex and async operations without extra boilerplate.

If you're looking for a simple alternative to Redux or Context API, Jotai can be an excellent choice for your project!