{"id":15475,"date":"2026-04-30T14:28:13","date_gmt":"2026-04-30T11:28:13","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=15475"},"modified":"2026-10-26T19:42:05","modified_gmt":"2026-10-26T16:42:05","slug":"enhancing-state-management-dhtmlx-react-gantt-jotai","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/enhancing-state-management-dhtmlx-react-gantt-jotai\/","title":{"rendered":"Enhancing State Management in DHTMLX React Gantt with Jotai"},"content":{"rendered":"

It is always useful to have more than one way to approach challenging tasks in web development, particularly state management in React apps. It is especially true for projects that rely on project management tools like a Gantt chart. Previously, we discussed how to manage state in apps using DHTMLX React Gantt with predictable Redux Toolkit<\/a>, lightweight Zustand<\/a>, reactive Mobx<\/a>, and explicit XState<\/a>. <\/p>\n

This time, we\u2019ll explore Jotai and how its bottom-up approach with the atomic model fits into a highly interactive Gantt environment and React’s hooks-based workflow. As a reference point, we\u2019ll use the react-gantt-jotai-starter<\/a> demo, which demonstrates how to use Jotai with DHTMLX React Gantt<\/a>. <\/p>\n

Before delving into technical details, let us first take a quick look at how Jotai works and where it makes the most sense to use it.<\/p>\n

Jotai State Management in React Apps<\/h2>\n

Jotai entered the React landscape in 2020 to help development teams deal with extra re-render issues with React context (useContext + useState). During that relatively short period, Jotai gained the trust of many innovative companies like Meta, TikTok, and Adobe. What makes it stand out among other state management options for React?<\/p>\n

Jotai is indeed inspired by the atomic state model of Recoil, but is frequently compared to Zustand because both share a philosophy of minimalism, ease of use, and lack of heavy boilerplate. If you take a look at the latest editions of popular surveys (State of React<\/a>, JS Rising Stars<\/a>), you can notice that the development community highly appreciates both libraries and puts them close to each other in various rankings. Even the names of both libraries are translated as \u201cstate\u201d (Jotai from Japanese and Zustand from German).<\/p>\n

\"Comparing
\nSource: State of React 2025<\/em><\/p>\n

The difference between Jotai and Zustand becomes apparent when you examine their mental models. Zustand offers a centralized store that can be split into modular slices. Jotai takes a different route by breaking down the state into small, independent atoms that do not rely on any central structure. Thus, instead of selecting a piece of state from a store and mutating it through an action, Jotai allows you to work with individual atoms directly. <\/p>\n

React components subscribe only to the atoms they use, so updates remain granular and don\u2019t trigger excessive re-renders elsewhere in the UI. This approach helps eliminate the need for memoization and makes state updates more straightforward, without deviating from React\u2019s declarative style. Jotai\u2019s basic API is similar to useState. Still, atoms can also be combined, derived, and used to handle updates (write-only atoms), enabling you to build more complex state models when needed. Jotai is also backed by a solid package of utilities and extensions to help you out. As a result, Jotai works well in the following scenarios: <\/p>\n