Here’s another post on the internet raving about Jotai. I got excited while using it, so if anyone’s ever interested, here’s a relatively straightforward implementation of it.
Okay, so, firstly, I must admit I’m like not the best coder. But, I can make do for just about every situation (cowboy coding woo~). Yes, there was a whole fiasco with using React Context for state management but I’m past that now (I used React Context with a bunch of useStates. Too many re-renders and prop drilling, as one can imagine). We gucci now though, fam, I know the world of Jotai now. Which isn’t to say that I’ve never used a state management library…there was Redux a few years back when I was working with Monograph’s Rails app in its early stages. Redux is beefy though. We’re not into beefy. At least, not for a small side project.
I’m not even gonna show a screenshot of my nested context and providers; it was pretty bad. But hey, I know the case for proper state management now. When I was trucking along with Dwellito’s configurator app (which used ThreeJS), the repercussions of state handling in a context provider were made evident. That big ol’ canvas just kept re-rendering and the performance was hella slow. Each selection, calculation, and mouse click was slowed ten-fold. So, for my own project I was like, “let’s actually implement state management but not Redux cause that boy be beefy.”
Anyways, my project has this file with a bunch of functions to fetch data from Supabase (chef’s kiss btw, love Supabase). Easy, simple, straightforward. I pass it through to the server-side page.js files to fetch data and store things into state. Occasionally we’ll fetch data more dynamically with certain mouse clicks, but for the most part the data fetching is as simple as this.
And then, there’s this file containing the Jotai atoms (the states). Set the default values in here, then call them anywhere you like~ You can store queries here too. Peep the projectsAtom. The cool thing about these is you can pass an argument and it’ll store the returned value across all components until the argument’s value changes. No need for calling the query over and over manually.
If you have some values that need to be mutated after the data is fetched SSR-style, you may wanna make use of the useHydrateAtoms function to hydrate the values on page load.
I hydrate the atoms like this, just make sure you have the Jotai Provider wrapping it. And if you’re using queries, use Jotai’s client query provider.
Here’s how I would use atoms in a component. useAtom is like useState, useAtomValue is for reading the value only, while useSetAtom is for calling a setState. Think of useAtom as a combination of useAtomValue and useSetAtom.
The projectsAtom is also called in a nifty way. If you’ve used GraphQL + Apollo like me, it’s quite similar. It returns data, error, isPending , so you can add loading states or error states pretty easily.
That’s about it!