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.