Daishi Kato · @daishi
270 followers · 219 posts · Server fosstodon.org
Jotai tips: optimize rendering with two atoms
Here's an advanced tip to optimize React rendering with Jotai. Can you guess why the behavior of the second atom is different from the first one?
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
270 followers · 219 posts · Server fosstodon.org
Jotai tips: selected item atom
It's a simple one. I'm not sure if it's worth a tip, though. Is it?
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
270 followers · 219 posts · Server fosstodon.org
Jotai tips: two args
Jotai v1 only accepts one argument for write function. Since v2, the write function can take two or more arguments. (Also, better TS support for zero arguments.)
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
270 followers · 215 posts · Server fosstodon.org
Jotai tips: toggle atom
Let's learn the simple one too. The point is we don't export the base atom.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
270 followers · 215 posts · Server fosstodon.org
jotai-tanstack-query v0.7.2 is released!
https://github.com/jotaijs/jotai-tanstack-query
This is a patch to the current implementation.
On the other hand, we may need to overhaul. I wonder if someone who is familiar with TanStack Query to develop it from scratch.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
266 followers · 212 posts · Server fosstodon.org
Jotai tips: write chain
Jotai atom's write function can invoke write function of another atom. It behaves like normal function call.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
266 followers · 212 posts · Server fosstodon.org
Jotai tips: swap atom
Jotai atom can hold another atom. It's called atoms-in-atom pattern, which opens up various usage. For example, we can swap two atoms. How would it be useful?
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
264 followers · 210 posts · Server fosstodon.org
Jotai tips: atom with local storage
The simple version of it is pretty readable and it just works. You can modify it for your requirements.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
264 followers · 209 posts · Server fosstodon.org
Jotai tips: atom depending on props
If you want to create a derived atom with props, useMemo should do.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
264 followers · 209 posts · Server fosstodon.org
Jotai tips: derived-like atoms
Sometimes, we can't derive atoms as usual (ex. atomWithStorage). We can use `write` to do something similar.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
258 followers · 206 posts · Server fosstodon.org
Jotai tips: useAtom
Implementation-wise, it's a simple function combining two other functions.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
258 followers · 206 posts · Server fosstodon.org
Is anyone interested in fixing Jotai?
There's a regression bug in the latest version, and I'm looking for someone to help. It's not a "good first issue", but the first task is to create a failing test, which should be relatively easy.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
254 followers · 198 posts · Server fosstodon.org
Jotai tips: Primitive-like atoms
You can derive a primitive atom that behaves exactly the same, and you can add some side effects.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
246 followers · 190 posts · Server fosstodon.org
🌟 Did you know that, at pmndrs, we develop three state managers for React? Investigating the GitHub Star History of these state managers shows consistent trends. 📈 How might they evolve in the future?
#ReactJS #React #JavaScript #TypeScript #Zustand #Jotai #Valtio
#reactjs #react #javascript #typescript #zustand #jotai #valtio
Daishi Kato · @daishi
246 followers · 190 posts · Server fosstodon.org
Did you know? There are some Jotai integration libraries that might help migrating from other state management libraries. Check out jotai-redux and jotai-recoil.
https://github.com/jotaijs/jotai-redux
https://github.com/jotaijs/jotai-recoil (We need docs. Would anyone like to help?)
#ReactJS #React #JavaScript #TypeScript #Jotai #Redux #Recoil
#reactjs #react #javascript #typescript #jotai #redux #recoil
Daishi Kato · @daishi
229 followers · 179 posts · Server fosstodon.org
We have three state management libraries at Poimandres. https://github.com/pmndrs
What's in common is they prefer simpler APIs. Here's how they do.
#ReactJS #React #JavaScript #TypeScript #Jotai #Zustand #Valtio
#reactjs #react #javascript #typescript #jotai #zustand #valtio
Daishi Kato · @daishi
223 followers · 172 posts · Server fosstodon.org
Let's celebrate Jotai: Reaching 14k stars and beyond!
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
223 followers · 172 posts · Server fosstodon.org
While responding to questions on GitHub, I feel like we should emphasize more about Jotai core mental model. It's "subscribable WeakMap".
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
206 followers · 167 posts · Server fosstodon.org
Did you know? You can use Jotai in Deno.
#reactjs #react #javascript #typescript #jotai
Daishi Kato · @daishi
195 followers · 159 posts · Server fosstodon.orgJust released jotai-trpc v0.5.1! https://github.com/jotaijs/jotai-trpc
It's an integration library for Jotai and tRPC.
This version supports a way to disable query depending on some atom values.
#reactjs #react #javascript #typescript #jotai #tRPC