State management in React applications has always been a topic of great interest among developers. With a plethora of libraries available, choosing the right one can be overwhelming. One rising star in this space is Jotai<\/strong>, a minimalist state management library that allows you to manage state with a simple and intuitive API. In this blog post, we\u2019ll explore Jotai: how it works, its core concepts, and how to implement it in your React applications.<\/p>\n Jotai is a state management library for React applications that provides a simple way to manage state using atomic state management principles. It is built on the idea of atoms, which represent pieces of state, allowing you to compose and manage state in a more granular way. Compared to larger state management libraries like Redux, Jotai is lightweight and less opinionated, making it a great choice for small to medium-sized applications.<\/p>\n There are several reasons developers might choose Jotai for state management in their React projects:<\/p>\n Getting started with Jotai is easy. You can install it using npm or yarn. Open your terminal and run the following command:<\/p>\n or<\/p>\n To effectively use Jotai, understanding its key concepts is crucial:<\/p>\n Atoms are the primary building blocks of Jotai. They represent a piece of state in your application. Each atom can be read from and written to independently, allowing you to manage state in a modular way. Here\u2019s an example of defining an atom:<\/p>\n To use an atom in a component, you can utilize the useAtom<\/strong> hook. This hook returns the current state and a setter function to update that state:<\/p>\n Derived atoms allow you to create atoms that depend on other atoms. This is useful for keeping your state logic clean and efficient. You can derive state from existing atoms using the atom<\/strong> function:<\/p>\n This derived atom will always return double the value of countAtom<\/strong>. You can use it similarly in your components:<\/p>\n To illustrate how to use Jotai in a real-world application, let\u2019s build a simple Todo list app.<\/p>\n First, we\u2019ll create an atom for managing our todos:<\/p>\n Next, we\u2019ll create a component to add and display todos:<\/p>\n Finally, render your TodoList<\/strong> component in your application:<\/p>\n The use of the Provider<\/strong> component from Jotai wraps your entire application, allowing all child components to access the atoms defined anywhere in your React tree.<\/p>\n To ensure that your Jotai state management logic works as expected, you can use testing libraries like Jest in conjunction with React Testing Library. Here\u2019s an example of how you might test the TodoList<\/strong> component:<\/p>\n This simple test checks that when you add a todo, it successfully shows up in the document.<\/p>\n Jotai provides a unique and powerful way to manage state in React applications. Its atomic approach enables developers to maintain clean and modular state management without the overhead of larger libraries. Whether you are building a small application or just looking for a lighter alternative to Redux, Jotai is definitely worth considering.<\/p>\n With its easy-to-understand API and excellent performance, you\u2019re sure to have a positive experience using Jotai in your next React project. Explore its documentation and start building amazing applications today!<\/p>\n Now that you’re familiar with Jotai, go ahead and experiment with it in your projects! Share your experiences and any interesting state management strategies you come up with using Jotai.<\/p>\n","protected":false},"excerpt":{"rendered":" React State Management with Jotai State management in React applications has always been a topic of great interest among developers. With a plethora of libraries available, choosing the right one can be overwhelming. One rising star in this space is Jotai, a minimalist state management library that allows you to manage state with a simple<\/p>\n","protected":false},"author":91,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":{"0":"post-5389","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=5389"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5389\/revisions"}],"predecessor-version":[{"id":5390,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/5389\/revisions\/5390"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=5389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=5389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=5389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}What is Jotai?<\/h2>\n
Why Use Jotai?<\/h2>\n
\n
Installation<\/h2>\n
npm install jotai<\/code><\/pre>\nyarn add jotai<\/code><\/pre>\nCore Concepts of Jotai<\/h2>\n
Atoms<\/h3>\n
import { atom } from 'jotai';\n\nconst countAtom = atom(0); \/\/ Initial state is 0<\/code><\/pre>\nUsing Atoms in Components<\/h3>\n
import React from 'react';\nimport { useAtom } from 'jotai';\nimport { countAtom } from '.\/atoms'; \/\/ Assume you exported the atom\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n\n return (\n <div>\n <h1>Count: {count}<\/h1>\n <button onClick={() => setCount(count + 1)}>Increment<\/button>\n <button onClick={() => setCount(count - 1)}>Decrement<\/button>\n <\/div>\n );\n};<\/code><\/pre>\nDerived Atoms<\/h3>\n
const doubledCountAtom = atom((get) => get(countAtom) * 2);<\/code><\/pre>\nconst DoubledCounter = () => {\n const [doubledCount] = useAtom(doubledCountAtom);\n\n return <h2>Doubled Count: {doubledCount}<\/h2>;\n};<\/code><\/pre>\nExample: Building a Todo List with Jotai<\/h2>\n
Setting Up Atoms for Todos<\/h3>\n
const todosAtom = atom([]); \/\/ Initialize with an empty array<\/code><\/pre>\nCreating the Todo List Component<\/h3>\n
const TodoList = () => {\n const [todos, setTodos] = useAtom(todosAtom);\n const [newTodo, setNewTodo] = React.useState('');\n\n const addTodo = () => {\n if (newTodo.trim()) {\n setTodos([...todos, newTodo]);\n setNewTodo('');\n }\n };\n\n return (\n <div>\n <input\n type=\"text\"\n value={newTodo}\n onChange={(e) => setNewTodo(e.target.value)}\n placeholder=\"Add a new todo...\"\n \/>\n <button onClick={addTodo}>Add Todo<\/button>\n <ul>\n {todos.map((todo, index) => (\n <li key={index}>{todo}<\/li>\n ))}<\/ul>\n <\/div>\n );\n};<\/code><\/pre>\nRender Your TodoList Component<\/h3>\n
import React from 'react';\nimport { Provider } from 'jotai';\nimport { TodoList } from '.\/TodoList';\n\nconst App = () => (\n <Provider>\n <h1>My Todo List<\/h1>\n <TodoList \/>\n <\/Provider>\n);\n\nexport default App;<\/code><\/pre>\nTesting Jotai State Management<\/h2>\n
import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library\/react';\nimport { Provider } from 'jotai';\nimport TodoList from '.\/TodoList';\n\ntest('adds a new todo', () => {\n render(\n <Provider>\n <TodoList \/>\n <\/Provider>\n );\n\n fireEvent.change(screen.getByPlaceholderText(\/add a new todo...\/i), {\n target: { value: 'Learn Jotai' },\n });\n fireEvent.click(screen.getByText(\/add todo\/i));\n\n expect(screen.getByText(\/learn jotai\/i)).toBeInTheDocument();\n});<\/code><\/pre>\nConclusion<\/h2>\n
Further Reading<\/h2>\n
\n
Get Started with Jotai<\/h2>\n