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)}>Increasebutton>
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 Taskbutton>
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!
More...
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)}>Increasebutton>
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 Taskbutton>
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!
More...