Learn Jotai with handy tips!
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
// Detect dark theme
var iframe = document.getElementById(‘tweet-1694494217379459573-419’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1694494217379459573&theme=dark”
}
Tip 2: Early return
// Detect dark theme
var iframe = document.getElementById(‘tweet-1694876971367555217-269’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1694876971367555217&theme=dark”
}
Tip 3: Promise value
// Detect dark theme
var iframe = document.getElementById(‘tweet-1695745037194436939-591’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1695745037194436939&theme=dark”
}
Tip 4: Store API
// Detect dark theme
var iframe = document.getElementById(‘tweet-1695966656563196044-963’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1695966656563196044&theme=dark”
}
Tip 5: useAtom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1696317745426747625-150’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1696317745426747625&theme=dark”
}
Tip 6: Derived-like atoms
// Detect dark theme
var iframe = document.getElementById(‘tweet-1697051518976114798-172’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1697051518976114798&theme=dark”
}
Tip 7: Atom depending on props
// Detect dark theme
var iframe = document.getElementById(‘tweet-1697396138578759985-440’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1697396138578759985&theme=dark”
}
Tip 8: Atom with local storage
// Detect dark theme
var iframe = document.getElementById(‘tweet-1697797840796635393-492’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1697797840796635393&theme=dark”
}
Tip 9: Swap atom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1699032814128443658-724’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1699032814128443658&theme=dark”
}
Tip 10: Write chain
// Detect dark theme
var iframe = document.getElementById(‘tweet-1699391498985595310-543’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1699391498985595310&theme=dark”
}
Tip 11: Promise.all in async atoms
// Detect dark theme
var iframe = document.getElementById(‘tweet-1699553010245067022-318’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1699553010245067022&theme=dark”
}
Tip 12: Toggle atom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1699970779373592963-887’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1699970779373592963&theme=dark”
}
Tip 13: Two args
// Detect dark theme
var iframe = document.getElementById(‘tweet-1700295758325682522-580’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1700295758325682522&theme=dark”
}
Tip 14: Selected item atom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1700500246143660300-460’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1700500246143660300&theme=dark”
}
Tip 15: Optimize rendering with two atoms
// Detect dark theme
var iframe = document.getElementById(‘tweet-1701133210212831674-756’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1701133210212831674&theme=dark”
}
Tip 16: Use atom conditionally
// Detect dark theme
var iframe = document.getElementById(‘tweet-1701955150724690192-231’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1701955150724690192&theme=dark”
}
Tip 17: Atom creator
// Detect dark theme
var iframe = document.getElementById(‘tweet-1702511436373872783-619’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1702511436373872783&theme=dark”
}
Tip 18: Refresh atom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1713395849454395741-993’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1713395849454395741&theme=dark”
}
Tip 19: Default atom
// Detect dark theme
var iframe = document.getElementById(‘tweet-1714126922542964899-547’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1714126922542964899&theme=dark”
}
Tip 20: Async only initially
// Detect dark theme
var iframe = document.getElementById(‘tweet-1722543472874594334-490’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1722543472874594334&theme=dark”
}
Closing notes
How was it? Did you enjoy the Jotai puzzle?
