Introduction
I’ve been sharing tips about Jotai on Twitter, calling them “Jotai tips.” As tweets tend to get lost over time, I thought it would be good to have all these tips in one place.
So, here we go.
Tip 1: Primitive-like atoms
Jotai tips: Primitive-like atoms
— Daishi Kato (@dai_shi) August 23, 2023
You can derive a primitive atom that behaves exactly the same, and you can add some side effects. pic.twitter.com/7r6tmRGNJ0
Tip 2: Early return
Jotai tips: early return
— Daishi Kato (@dai_shi) August 25, 2023
Unlike React hooks, Jotai atoms have no limitations regarding early return. pic.twitter.com/0LaDFNeGc3
Tip 3: Promise value
Jotai tips: promise value
— Daishi Kato (@dai_shi) August 27, 2023
Can you imagine how useful this is? pic.twitter.com/Dsw0iijwSz
Tip 4: Store API
Jotai tips: Store API
— Daishi Kato (@dai_shi) August 28, 2023
You can get/set atom values outside React since Jotai v2. pic.twitter.com/Pz9Z2cP04I
Tip 5: useAtom
Jotai tips: useAtom
— Daishi Kato (@dai_shi) August 29, 2023
Implementation-wise, it's a simple function combining two other functions. pic.twitter.com/HII6azYmL0
Tip 6: Derived-like atoms
Jotai tips: derived-like atoms
— Daishi Kato (@dai_shi) August 31, 2023
Sometimes, we can't derive atoms as usual (ex. atomWithStorage). We can use `write` to do something similar. pic.twitter.com/FSQWFB1yVD
Tip 7: Atom depending on props
Jotai tips: atom depending on props
— Daishi Kato (@dai_shi) August 31, 2023
If you want to create a derived atom with props, useMemo should do. pic.twitter.com/T5a4W5FvNC
Tip 8: Atom with local storage
Jotai tips: atom with local storage
— Daishi Kato (@dai_shi) September 2, 2023
The simple version of it is pretty readable and it just works. You can modify it for your requirements.https://t.co/KDWo9r8kfR pic.twitter.com/qPfDSoQtxJ
Tip 9: Swap atom
Jotai tips: swap atom
— Daishi Kato (@dai_shi) September 5, 2023
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? pic.twitter.com/JBPQp4PS1o
Tip 10: Write chain
Jotai tips: write chain
— Daishi Kato (@dai_shi) September 6, 2023
Jotai atom's write function can invoke write function of another atom. It behaves like normal function call. pic.twitter.com/NuG29mB01K
Tip 11: Promise.all in async atoms
Jotai tips: Promise.all in async atoms
— Daishi Kato (@dai_shi) September 6, 2023
If you read two or more atoms in an async atom, it's probably better to use Promise.all. pic.twitter.com/MTlBaUABQP
Tip 12: Toggle atom
Jotai tips: toggle atom
— Daishi Kato (@dai_shi) September 8, 2023
Let's learn the simple one too. The point is we don't export the base atom. pic.twitter.com/OezNQNj7n9
Tip 13: Two args
Jotai tips: two args
— Daishi Kato (@dai_shi) September 8, 2023
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.) pic.twitter.com/ZYEVj9Brta
Tip 14: Selected item atom
Jotai tips: selected item atom
— Daishi Kato (@dai_shi) September 9, 2023
It's a simple one. I'm not sure if it's worth a tip, though. Is it? pic.twitter.com/zefa2EuPi1
Tip 15: Optimize rendering with two atoms
Jotai tips: optimize rendering with two atoms
— Daishi Kato (@dai_shi) September 11, 2023
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? pic.twitter.com/xa7x2OdveH
Tip 16: Use atom conditionally
Jotai tips: use atom conditionally
— Daishi Kato (@dai_shi) September 13, 2023
Passing atoms conditionally to useAtom hook is totally supported. pic.twitter.com/epGlgmRKyI
Tip 17: Atom creator
Jotai tips: atom creator
— Daishi Kato (@dai_shi) September 15, 2023
It's useful to hide a base atom in a function. We could do the same with module, but atom creator is more reusable. pic.twitter.com/bXmNnDCKVa
Tip 18: Refresh atom
Jotai tips: refresh atom
— Daishi Kato (@dai_shi) October 15, 2023
While it's not a declarative model, it's sometimes handy to do force refresh. We can use the same technique as we do with React hooks.
See also: https://t.co/TAVcY1JjGe pic.twitter.com/bsZWpnTWo6
Tip 19: Default atom
Jotai tips: default atom
— Daishi Kato (@dai_shi) October 17, 2023
If you define an atom with a read function, it will be read-only. But, we can combine it with another atom holding the default value, to make it writable.
See also: https://t.co/YEjfLIi4qH#ReactJS #React #JavaScript #TypeScript #Jotai pic.twitter.com/ZT4Yr9fIeR
Tip 20: Async only initially
Jotai tips: async only initially
— Daishi Kato (@dai_shi) November 9, 2023
`unwrap` is a new util in Jotai to make an async atom sync, and combining it with the original atom becomes an async-only-initially atom. Enjoy Jotai puzzle. See also: https://t.co/C1cpmSc0F2 pic.twitter.com/QT9owf8mzG
Closing notes
How was it? Did you enjoy the Jotai puzzle?