State Management with Jotai: splitAtom Utility to Fix Re-render Issue

In this video, we explore Jotai, an atomic state management library that helps you manage large states without sacrificing performance. We discuss the "splitAtom" utility, which allows you to split an array of objects to get individual atoms, preventing unnecessary re-renders.
The video starts with an introduction to the problem with using the useState hook, where we have two different components, one built with regular useState and the other with Jotai's splitAtom. Each tile in the table represents a separate component in your app, and let's assume you have a large state object to manage your component tree.
Next, we examine the regular useState version of the component and how it re-renders all tiles when one tile is clicked, causing performance issues. Then, we demonstrate how to fix this problem using Jotai's splitAtom utility by creating an atom for each tile instead of using useState hook.
With Jotai, we can manage each tile's state individually, and when one tile is updated, only that tile will re-render, not the others. This way, we can prevent unnecessary re-renders and improve the performance of our app.
By the end of this video, you'll have a better understanding of Jotai and how it can help you manage your app's state more efficiently.
- timestamps -
00:00 - Intro - What's the problem with useState?
02:02 - useState version of component
03:12 - Creating the same component with "splitAtom"
Source Code: github.com/batuhanbilginn/jot...
Learn more: makr.dev
#react #statemanagement #nextjs #jotai

[@brayanyevenes5954]

You are really one of the few people who put out jotai content in a more in-depth way to really get the most out of the library, it's always nice to see your jotai videos. greetings from chile

[@makrdev]

Thank you so much. I’ll made full course on Jotai with advanced topics in the future. I think it doesn’t get the credit it deserves.

[@enesdemirci7963]

kanka ingilizcen on numara sakin temiz . Bu jotai de ilk Türk kaynaksın galiba başarılar ...

[@makrdev]

Güzel yorumun için teşekkür ederim dostum 🤜

[@streamocu2929]

thank you

[@makrdev]

❤️