Hello everyone, Welcome to React Roundup, the podcast where we keep you updated
on all things React related. This show is sponsored by Reagun and produced by
Pop and Davs and Onvoid. Top anddves is where we created top and deves.
So get top and pay and recognition. We're working on interesting problems and
making meaningful community contributions. An Onvoid offers remoste design and software development services on
a task basis, so clients only pay when tests are delivered and approved.
In today's episode, we will talk about Jotai, which is a library that
exposes primitive and flexible state management for React. My name is Lucas Paganini,
your host in the podcast. Joining me in today's episode is Chris Fruen.
Hello everyone, Peter Osa, Hi everyone, and our special guest which is
a core member of the Joe Thai team, Mohammed Bagger Abiyat. I hope
I pronounced that correctly. Yeah, yeah, that was closed. That was
closed. So hello everyone, happy to hear you here. I'm really thankful
for the opportunity. Is my first time doing a podcast, so so thank
you. Ease on me if something went wrong. Nor is nor Is Hey,
folks, this is Charles Maxwell. I've been talking to whole bunch of
people that want to update their resume and find a better job, and I
figure, well, why not just share my resume. So if you go
to top endevs dot com slash resume, enter your name and email address,
then you'll get a copy of the resume that I use, that I've used
through freelancing through most of my career, as I've kind of refined it and
tweaked it to get me the jobs that I want. Like I said,
top endevs dot com slash resume, we'll get you that and you can just
kind of use the formatting. It comes in word and pages formats and you
can just fill it in from there. Yeah, So Mohammed, why don't
you just start with a quick pitch of what is your TIE and the use
cases for it, and then we can take it from there. So Joe
Tie is an atomic state management library, something similar to Recoil. I mean,
Recoil was really on the top for a while and everyone knew it for
a while, so the idea is similar. But like one of the reasons
I guess we started this, or at least that she started it, is
that we wanted to avoid having keys in our state at homes. So that's
kind of just what's the start about, Joe. Tie is just a state
management library that's pretty atomic and goes and goes with the atomic state management state
management way I'm doing things, gotcha? So if you were to give some
examples of use case is where your TIE really shines, what would come to
your mind? Yeah? Yeah, yeah, So for a while, here's
the things. For a while, like the React community when context was introduced,
like everyone was saying that, just migrate to context, just use context
everywhere. Just yeah, just keep yourself with context and move away from readogs.
At that point, everyone was happy kind of until we face the issues
where what were the issues? Well, contexts is like you always put it
at the top level of your program and you just wrap your whole application around
that. So when a state changes in your context, basically your whole application
is going to be re rendered, and what would you do, Like some
of the solutions were just use use memo or use use call back and stuff
like that. So at that point we also got back to state management libraries
because we were like, yeah, state management libraries were right in some terms
and for some use cases where we want to like specify the rendering for a
specific component component and not the whole application. Joe Tie really shines here because
it got one of the most optimized rendering across like all the state management libraries.
It's pretty atomic, it relies and uses state and use external storage or
some API re act that I just forgot the name. What it do is
that it would render your component on a component level and not your whole application.
So if you have if you have a component A, if you have
a component B and you just use the at home in component B and the
state changes for that at home, then only component B would be rendered and
you won't need any provider like Context. Yeah, we offer a provider like
Context and some other libraries, but by default you won't need it. And
for me as a as a maintainer event, I've never used it, like
seriously, never use the provider. So first you don't need the provider to
all of the re renders, and all of the state changes happen at a
component level, so things are pretty optimized. And most of the times you
would not use use memo and use callback at that point because everything is optimized
by default. Gotcha, so correct me if I'm wrong. But what I'm
hearing is so a lot of the optimizations that React developers usually do manually,
such as use memmo, use callback, don't need to be written because the
library already takes care of that. And on top of that, it also
makes sure that the that React rerenders less, so it only re renders the
specific component that requires that specific atom and not the entire three until it gets
to that component, so it optimizes the rendering performance and it also reduces the
boilerplate of the cod base. Is that correct? Yes, exactly, We
won't like. First of all, just give to give you a disclaimer.
I'm a member and my views don't represent the whole team and the whole implementation
because to be honest, I got so many things wrong in the library too,
so I might be wrong like all of the podcasts, So sorry for
that. But around your use memo and use callback point yes, Like for
me as someone who used the library, it helps me avoid writing use memo.
I use callback most of the times because stage if you do it properly,
state changes won't happen like excessively. Everything happens on a component level,
and if that component renders so many times. Since it's a small component,
since it's a small part of your application, it doesn't matter that much because
it needs that state changes. So yeah, it avoids that boiler plate and
also optimizes most of the things that you won't need to optimize yourself. Would
use memo, you call back, and all of this stuff that you did,
you used to do at least with React context. Gotcha? Interesting?
Interesting? So, Chris Peter, I wonder if by hearing this description,
if you guys remember of any previous experience, previous project where you think this
could have been useful, and what was your approach versus what you could have
done? What your tie? Ok? Yeah, so yeah, I actually
use ji like, yeah, I think it's actually it's a long of my
go through state management systems, I think after Widows Widows resistant, Yeah,
we are. Yeah, I use Jotai for like one thing naturally, love
about Juda is just kind of very simple, very very simple. I think
the sense that the API is simple, right, and I kind of prefer
using it for maybe micro font and systems systems that requiabbily. For example,
you need to have like a form of shared states, right, you have
like maybe two applications different applications, and then you want them to share one
states. Right doing maybe using other kind of big state management systems like widogs
may be kind of quite difficult to you know, it does bring some complexity.
Rather, so this Juta is kind of simple. It's API, and
that I think it's very easy for you to just work with it and then
kind of what could idea sharest it with it? Yeah, for the idea
of used memoir and we have like what Mommed said, I don't know if
I actually like maybe starts for sub do I just kind of use juta for
more of a simplicity, right, And I really like the idea of of
jyota like as the stake on a bit like right, So, although I
have a lot of questions that I use that and I actually try to understand
the underlying principle of jotai ride. And once did I know is that your
Jota uses work is similar to recoil right now, Usually when you want to
kind of start your Juta app right, like you want to maybe if you
start Jota and you need to kind of incorporate it into your application, right,
what happens then is that you are to passing a provider class that provider
class. Now in order to ask from moret is it something based on context,
because for example, let's use redogs for example, now we redos,
you do your redogs set up and so on and so forth, right,
and then you're good to have to like imports a provider which kind of passes
those So I wanted to ask, do you actually know what the provider dependency
on that jewtie doors? Like, does he work, does he use does
he use some context or is it something affected or something different? Yeah?
I think that's just like my first question. Yeah, so if I'm getting
the question correct, you mean that does dot I use context under the hood?
Do you mean that, yes, to pass the state on the composition?
Yeah, yeah, yeah, yeah, so exactly. Yeah, it
uses use context, and it does it in an elegant way so it doesn't
feel like you are context because you won't need it and like most of the
times and it works like out of the bugs. But under the hood,
Yeah, for sharing the state, it needs to use use contexts, but
in a different way so it doesn't change the state the same way context does
it. It has some abstraction on top of that which avoids doing so many
state changes and does it does? It doesn't use context for the same way
we used to do like, it doesn't use it just for sharing the state.
It actually uses uses it for sharing the state, but it doesn't use
it that much for changing the state itself. It uses uses it for like
if you up that in. It uses it for like changing the scope or
changing the initial value of like some atoms if you wanted to do that.
But under the hood, to answer your question, yeah, it uses used
contexts so it can share the state across the application. Okay, yeah,
second question I get. The first I get, Yeah, I think that's
sort. So the second question I have is on Judah is I think I
read an article. I don't know if it's a dist from how like I
think relating how kind of it maps the kind of nambos of the state values?
Right? No, I think JODA causes like atoms, right, so
let's fundamentally atoms, so it kind of says that like it kind of the
atoms are kind of attached to the components three of like in a way like
for example, if you're kind of calling an atom your component, you want
to use it right in the special components right, it's was I think the
article experience that it's not like I said, it's kind of taken it from
a kind of a global global states, right, it's kind of getting like
it's kind of attaching that fit to the component three of that compon that's that's
to be the three right to react those localizing the states Valada when you maybe
use like the atom in that, I don't know, like I I wanted
like a better explanation that. I don't know if you have an idea of
how the atoms kind of like how the whole data flow is right, how
it kind of effectively stores these things that kind of yeah, I think that's
yeah, I'm having to I don't know if you have an idea of it.
Maybe it's some diw kin ship as well. Hey there, this is
Charles Maxwood. I'm excited because I wanted to let you know about this thing
that I pulled together that I had just I've been dying to have this for
years and I never felt like I could, And then I just realized that
there's no reason why I can't. So I'm putting together book club and we're
going to read development focused books, career books, you know, technical books,
whatever. The first book that we're going to do is going to be
Clean Architecture by Uncle Bob Martin. If you're not familiar with clean code or
some of the other stuff that Bob has done, check that out. I've
also talked to him on the Clean Coders podcast which is on Top End Devs.
But yeah, we're going to get on. He's going to show up
to some of our meetings. And what I'm thinking is we'll probably have like
five or six people part of the conversation along with Bob and I at the
same time, and we'll just so somebody can come on, they can ask
their question, and then we'll just rotate people through, so we'll mute one
person, unmute another person when it's their turn to come on and be part
of the discussion. So we'll do that for like an hour hour and a
half. And then the other part of it that I'm putting together is just
kind of a meet and greet gather area on gather Town. And so after
the meetup and the call, what we'll do as we'll all go over to
gather Town and you can just log in, walk up to a group and
have a conversation and that way, we can all kind of get to know
each other and make friends and get to know people across the world. One
thing that I'm finding is that, yeah, the meetups are starting to come
back, but a lot of people don't have the opportunity to go to a
meetup. And I really want to meet you guys and talk to you.
So we're gonna put all that together. We'll all be part of that book
club. You can go to top endevs dot com slash book Club to be
part of it, and I'm looking forward to seeing you there. The first
book club meeting will be in December, the beginning of December. We're starting
the first week of December, and you'll also be part of the conversation about
which book we do next. I have one in mind, but I want
to see where everybody's at, So there you go. Yeah, yeah,
yeah, So it's a it's a globile state at the end. But the
way can you hear me, guys, Yeah yeah, So it's a globile
state at the end. And the way I look at it is it's it's
just a smart way of doing use state, but it's a use the state
that is global because at the end, Joe tie when you when you import
the use atom hook and you use that and you use that hook basically under
the hood uses use the state for your state. So that's why I say
it. It just it just as you say it. It just attaches that
atom to that component specifically because under the hood it uses use the state or
I don't know, the implementation might have changed now they might have used that
user reducer, which is just a which is just like a more complex and
lack more flexible way I'm doing user state, but especially the same thing.
Yeah, so under the hood it uses those hooks so it can attach that
state and brings that state from a from an extra external source and attaches it
to the to your component using user reducer or user state. And the way
it does it like concurrent friendly React concurrency concurrent friendly is by using the hook
I just mentioned previously, and the hook names I just forgot it, but
is as far as I remember, is it's use seeing external storage or something
like that, which which is a hook for having global states like states that
that their source is outside of React being SYNCD with the React tree and reaction
and daring, and that's what Jota uses. Yeah, that's cool. Yeah,
well I think that's all the questions for me. I really love to
ask. Might be I actually encourage a lot of people to use it,
so yeah, crazy any question as you Yeah, I was, I was
looking on the homepage for it here. So I'm mainly a REDUCS guy.
Uh, if it's even feeling. Yeah, I just love REDOCS and I've
started with REDUCS somehow, and i just love that library, to be honest.
Yeah, exactly, Like I I even went through the whole uh you
know, like the old school, the boilerplate everyone hated, where you had
your separate actions and your separate reducers and all that. So and now I
know the whole the REDUCS toolkit. But yeah, like the principle, the
principle for Joe Tie seems it's like amazing because basically, at least for how
I use REDUCS, it's really all you need is like you want some sort
of global state, right like if you need local state for your components,
use of course the built in use state. But as soon as you you
know you want to pass state around the other components, that's where you would
lean to any like state management. And and yeah, so far like it
looks, it looks really nice, and just how simple, like like what
Peter was saying, how how simple it is to set up. So I
guess I guess the only kind of question I have would be more of like
an architecture standpoint, because here, like of course on the example homepage,
you show it all like you could of course put it all in you know,
some one file with some simple components. But how would you recommend I
guess I guess you could. Are you able to define kind of like a
separate I guess I'm coming from the Redact REDUCS world, where like you still
had a separate file. But but do you have any info on how you
would tackle like organization using JOEI yeah, yeah, yeah, yeah, that's
a that's an interesting question because I found my own tastes of doing Joe Taie
atoms, So yeah, I would experience that in a second. Well,
first of all, just to give a shout out to Mark, the maintainer
of redoucs and the Redox tool kid like he just changed the way we do
states to be honest, and he was the only one that everyone was saying
that reducs is dead. But that man just like kept this kept all of
the things with reducs going, so he would shout out to him and around
the architecture. Well, first of all, we have like a few kinds
of atoms that if a user understand that properly, like it's just simple.
But if they understand it at that point, for the like having an architecture
based on your your own state would be just easy. It would be that
done out out the bugs. Well the way I do it. First of
all, we have just like normal atoms, which would just give a value
to them, like the initial or default value to them. And we have
uh get her or readable atoms. I just forgot the name that those atoms.
They don't do anything themselves. The only thing they do is just they
read, They read an atom state from another atom. So they just for
consuming. You cannot set values to them. They just they just for reading
the state. And we have another way of doing atoms and which are just
writeable atoms. Writable atoms, you cannot set values to them. They don't
hold values to as far as I know and remember. But with them they're
like zas stand actions or reduct actions. With those rightable at homes. Your
their job is to just change another atoms value and you can specify your own
way of like I don't know, setting the action or changing based on the
value. Okay, okay, but then I guess since since they all come
from just your library, you could just define, like you're quite flexible to
define. You could even do just like a not not to go in the
kind of the giant file direction, but you could start off with just a
single file and exactly, I just do that to be honest for my all
of my projects. Nice. Yeah, yeah, yeah. So the reason
I love just one file is that I document everything there you can just search
easily. Well, I separate them with comments that these are writable atoms,
these are getter or ideble atoms. These are just normal atoms that have initial
initial I don't know it's initial space or values. That's the way I do
it. Cool. Yeah, yeah, very cool, I think. I
mean, that's that's all I had. So I don't know, Lucas,
if if you wanted to keep steering the top in terms of actual real world
usage of Joe Tie. I don't have other questions. I do want to
know if there are any advanced things that people aren't very aware of, but
that you as someone that has worked in the library, You're like, people
should know about this, but they don't. Yeah. So, so the
thing that I wanted to mention about Joe Taie is the thing that I want
to mention about Daishi, Like he's walk on optimizing, rendering and creating,
creating perfect to be honest, perfect State management libraries is just phenomenal, and
he knows how to handle this thing. So I wanted to say, the
work that is going under under the hood Joe Tie to optimize rerenders is just
magical, and the architecture under the hood is just it's phenomenal that I learned
so much from that architecture and that the effort that's been into this is so
much. It's so much and same not just with Joe Tie. It's the
same goal. The same goes for as Usta, and the same goes for
baal Shoe and the state many libraries that that she build, So basically,
in terms of rerendering and optimizing renders, they're all just perfect. So the
first thing I would use, the first thing I would use as a state
Managy library would be Joe Tie because the advanced usage I would I would use
it for applications that are heavy stateful what do they call it? Or their
state just changes so many times I would use Joe Tie for that or the
one of the things that powers Joe Tie is the integrations around it that when
we started, when I started contributing Joe Tie, I just started contributing with
just an Emmier integration. Like after a few months, We've seen so many
integrations in the repo that people loved building things on top of Joe Tie,
And at some point we just decided, oh man, we cannot just add
integration to the to our own repot and take the responsibility. So that she
decided to create another organization called the Joe Tie JS or Joe Thai Labs that
has so many integrations around Joe Tide that Joe Tie tense tack query, which
is which is which is an integration around tense tax querry or the previous React
query. We have, I don't know, Joe Tie, your cuel,
which is the u r qual tool around the graph duel, which is we
have the Joe Tie Apollo which I just built, and all of these lack
phenomenal tools and and it just powers Joe Tie. So there are so many
things in the Joe tie JS so I just recommend people to check that out
and see what they need if the if it's there, or I also encourage
them to build on top of joe type because of the separation between that critible
atoms, readable atoms, and the magic that you can do with with those
lack terminologies is just so much. You can build like pretty much anything around
Joe type. Gotcha, that is interesting. Okay, and do you have
mohammed Do you have anything else that you would like to mention about yo tie
before we start wrapping up and talk about some of the other projects we've been
working on. Yeah. So here's the thing about joe tie is a It's
a state management library that I would use for every React JS project you I
build or soon to be maybe I use it for every project. Because now
we have the Vanilla export, we just like provide lack abstractions and APIs to
use joe Tie with any other library, and I'm really excited to see what
people are going to build around that API. I also recommon people to check
other other state management libraries by Daishi, Exhaustant and value Load. Everything I
just said is just my viewpoint that my point of view, and it's not
something that represents the team as I say. So take it easy, gotcha,
gotcha. Okay, let's let me dissect just a little bit on the
last thing that you said. So you mentioned the ability of other library authors
to build on top of your TIE. Yeah, can you give me a
bit more about that, like what what is the go with this and what
do you hope people are going to build on top of your tie? Yeah?
So right now, with the Venuela export is Joe, Tie now provides
the atomic way the atomic design that it had for react is, but it
exports it in a way so you can use it as a state management library,
not React, not only React jas state management library, but a state
management library with subscription features, with a subscription feature that you can subscribe to
subscribe to value changes and state changes in a way that is usable with any
other library. That's basically usable in JavaScript, like in JavaScript itself, so
you can, I don't know, you can even use it in back end
if, like if that's possible, I don't know. But the thing I'm
excited about, and as far as I know, I just saw it before
a few months ago, is that someone just built a solid integration around your
thie. So that was pretty exciting to me because if we if we provide
those abstractions, then maybe at some point we can have joe Tie as the
state management library for any any JavaScript framework or any any project that needs tracking
state changes or state management related things. So that's the thing I'm excited about.
The building block that in the in the second version that Joe Tie provides
that is indeed pretty pretty cool. Yeah, I would be very like hyped
if somebody used the library that I worked on to build other frameworks on top
of it. So yeah, definitely pretty cool, exactly. Yeah, it's
a it's a pretty cool thing, like if you. One of the things
that motivates me about developer development and programming in general is just to provide a
building block for for another one to build on top of that. And seeing
that coolest stuff being built is just so it's it's a good feeling, to
be honest, and I'm kind of proud of that to be along Daishi and
the Joe Tai team uh in that journey. I'm not that I'm not an
active contributor anymore though I'm a member of the team, but I learned so
much from the team, from Daishi and from like other members. So yeah,
I'm pretty excited and I'm pretty rey proud about that. Definitely nice.
Nice. Have you ever wished that you had a group of people that were
just as passionate about writing code as you are? I know I did.
I did that for most of my career. I'd go to the meetups,
I try and create other opportunities, and it was just really hard, right
the meetups. I got some of that, but they were only like once
or twice a month, and it was just really hard to find that group
of people that I connected with and really wanted to talk about code a lot,
Right, I mean, I love writing code. I think it's the
best. And so I've decided to create this community and create a worldwide community
that we can all jump in and do it. So we're going to have
two workshops every week. One of those or two of those every month are
going to be Q and A calls right where you can get on you can
ask me or me and another expert questions. The rest of them are going
to be focused on different aspects of career or programming or things like that.
Right, So it'll go anywhere from like deployments and containers all the way up
to managing your four oh one K and negotiating your benefits package. Well,
we'll cover all of it, okay, And then we're also going to have
meetups every month for your particular technology area. So we have shows about JavaScript,
to react, angular view, and so on. We're gonna have meetups
for all of those things. I'm going to revive the freelancer show. We'll
have one about that right so you can get started freelancing or continue freelancing if
that's where you're at. And I'm working on finding authors who can actually do
weekly video tutorials on some thing for ten minutes that's related again to those technology
areas, so that you can stay current keep growing. So if you're interested,
go to topendevs dot com slash sign up and you can get in right
now for thirty nine dollars. When we're done, that price is going to
go up to seventy five dollars, and the thirty nine dollars price gets you
access to two calls per week. The full price at one hundred and fifty
dollars, which is going to be seventy five dollars over the next few weeks.
That price is going to get you access to all of the calls and
all of the tutorials and everything else that we put out from top Endevs,
along with member pricing for our remote conferences that are coming up next year.
So go check it out topendevs dot com, slash sign up. So let's
do a round of promos before we wrap things up, So Muhammed, generally,
this is a place where we just shamelessly plug the things that we're working
on and that we want to bring more publicity to them. So, for
example, I'm just going to peck Onvoid, which is a company that we
were just mentioning at the beginning of the show. So they provide remote design
and software development services, which is not the new a lot of companies do
that, but they have a task based billing system that allows their clients to
only pay after the tasks are delivered and approved, which is a lot of
risks for them that most companies would never dare to try out, and it
really gives a ton of security to the client because they know that things are
going to be delivered on budget and they're going to be delivered on the quality
that they expect because it needs to be approved before avoid gets paid, So
my promo today is just going to be onvoid. So Mohammed, what do
you have in mind that you would like to promote, perhaps some of your
own content or projects that you're working on. Yeah, sure, I love
that part of the podcast because I always want to termously plug my own tools
and the things I woke on. So the first thing I've been contributing to
million js, I don't think it needs any more publicity because it's already famous,
So that one I'd like to like becoming people to check it out.
Second, I'm working with Daishi also on wa ku, which is the minimal
RSC implementation reacts over component's implementation. That's just the new thing that I'm really
excited about and I want to see where it goes. So we're also working
on that. So check it out on Walkoo Do Gig and see the beautiful
website website the Candy Code team built around it. So I guess that's it.
So oh, Also, I just want to say follow my own Twitter
also, that's the that's the most changees thing I wanted to mention. Definitely,
can you send the link to your Twitter? I'm going to send in
the comments section two. But yeah, so in the meantime, how about
you, Peter, Okay, so most most really, so I tell a
little bit about your tai before. I think that's what probably share in the
chat. So because I kind of us this, yeah most of the time,
So let's wrote something about it that I think I'll just share that.
I think that's just that's just that's my mind, all right, And how
about you, Chris. I am again gonna post my code video project.
I don't know if I have any stars or any sign ups, but I
don't really care. That's okay, It's in super beta, but I'm excited
to see where it goes. Basically, it should be or will be,
a framework where you can partially automate or even completely automate your software course creation
and maybe eventually someday maybe any video, any sort of tutorial video that you
need to record. So I invite everyone to check it out. I'd be
sure to use that tool because I'm also interesting. It's interested in, like
with the courses and things like that, to teach people about my own learnings.
Not that I know that much because I don't know nothing, but I'm
interested in sharing what I currently know to other people, so that tool is
is pretty amazing, So thank you so much for that. By the way,
for anyone who is interested in that project from Chris, you should definitely
check out our latest episode, the one previous to this one, because we
talked a lot about that, especially at the end of the show because coincidentally,
the guest in the previous episode was also building something similar, so we
ended up talking a lot about this. So in for interested be sure to
check out the previous episode. All right, yeah, sure, everyone,
Thank you so much. Mohammed, thank you. You just said before that
this was your first podcast. I hope this has been a pleasurable experience.
It definitely was for us. I think you were very easy a guest in
the sense that you would definitely dominate the knowledge and you were able to transmit
that in a very easy to understand and digestive a way to congratulate you for
your datics. It was really really good, and yeah, everyone, thank
you so much. And I just don't want to get to the next one.