useWat² (with Jenny Truong)

Thank you, Oh my goodness, well, hello everyone, thank you for having us at React Miami. I'm Jenny, lover of donuts. This is David state machine guy. So before we start, I'd love to give a round of applause to the organizers and the sponsors to make this conference happen. So thank you so much. Yeah, seriously, this is this on? Yeah, all right. This is the most FOMO inducing conference that I've been at, and I'm here and I have FOMO. Like, that's how good this is. All right, what are we talking about? Can I talk about Saate machines? No, we're, we're at a React conference. We should probably talk about React, all right, all right. So we are going to talk about React and how good it is. All right, all right. So what's what, what? Okay, so I have to explain this a little bit. React is really awesome, and I'm going to tell you how awesome it is.

So we're going to talk about the weird and awesome things about React, because we're at React Miami, we should learn a little bit about React, and I hear, React. Is this an awesome framework? It's a library. Actually, actually, yeah, I don't know, so people can't. Actually, you know, I. I accidentally said it was a framework earlier. It's, well, okay. If you look at the docs, it says library, right? So React is a library. Okay, I can go with that, so if React is a library, then that means Remix and Next.js is. Are they? Frameworks? yes, but a lot of the times they're called meta Frameworks for some reason. So which makes you question like, what, what is the framework? is it? React? No, know, but yeah, okay. So then if React is a framework, next is a meta framework by Versel yes, then React is a Versel framework by Meta.

Yes, yes, you're getting it okay, good, some people think it's the same thing, you know, these people are very uninformed and we should teach them. This is a junior developer, you might know him, but anyway, so you know what? Let let me just clarify this. Okay, React is a library that acts sort of like a framework, okay, so then React is a framework that thinks it's a library. I mean, that's. Also valid. But overall, React is just JavaScript. Who's heard that before? React is definitely just JavaScript. Except for all the parts that aren't Javascripts, like, JSX, Bable, Weback, hooks, server components, like those weird directive things. Okay, I would hope that a JavaScript framework is just JavaScript. Yeah, so people actually say that it's just JavaScript. Yeah, no, seriously, people say that online, you know? Here's Tyler McKinness. He said it's just JavaScript, and people online are always right, but people literally say anything online.

Like Sarah Jasner says that your mom is JavaScript. No, maybe my mom is JavaScript, maybe we're all JavaScript, you know, who knows? Okay, well, anyways, let's start actually building an app. Yeah, I will start with npm install, React, yeah, or I mean, you could use yarn, yarn AD, React, there's MP, there's P PMP, PMPM at React. If you're hipster, you could use bun. So they allow anything in JSON now, believe it or not, well, I'm just going to npm install React to make it easier. Okay, you, you also have to install a few other things. Okay, and I, yeah, I think that's it, I think that's how you, is that it? No, actually. So if you go to React docs, it actually tells you that, you, you. It recommends that you use a framework, right? So there's, you know, a couple Frameworks that we could use. Such as Remix. And these are the Men of Utah, that's how you know, it's Remix.

And then the Men in black, they're the ones who made next. So you're telling me, in order to learn React, I need to learn a framework. Yeah, so actually, if you go to their docs and you want to use it without a framework, they actually have a really long explanation about, like, why you really can't use it without a framework. So I guess if you're learning React, it's going to be a little bit difficult. So, yeah, okay, actually, wait, hold on. I found that you can actually use V. It works by a framework, you could just use V. Yeah, so React, the documentation, it sort of just hides that. I mean, if you look here, it's like all the way at the bottom, and that's a common theme with their docs. I'll show you later. But at the bottom, you could used V, and it's just yarn. Create vs.

Your app with the template, you could use React or the other Frameworks like View, Spelts, E.t.c. So it's pretty cool. If you want to get started, if you want to learn, you know, this is the easiest way. Okay, great, I'm going to start with making a React component. Okay, where? where did you learn? Where did you learn this from? From the React docks? Wait, like these docks. Yeah, those ones. No, no, no, no, no. So these docks are not the actual Docks, or like they're the old Docks, but it says, you know, okay, these docks. Then I just found this, okay, I mean, it's, it's okay. It's not the most upto-date docs, but you know, they worked really hard on it though. Okay, well, then what about Dan Abber Mob's tweets? Does that work? Yes, these are the real React docks. Okay, okay, right.

Play from 0:00

So let's, let's write a React component, and this is, this is much better, good, good. Well, why don't we use classes anymore? You know what, I don't know. So classes in React were actually really, really awkward. There was like, component did Mount, component should update, component this and that, like, obviously it's a React. component. I don't know why they start with components, like for all the methods, but I mean, React developers. They just we. We have no class anymore, we're just using I, I don't mean to, you know, we, we're just not classy. Oh, okay, yeah, you or them. Yeah, all right, is this here? But yeah, so yeah. If you don't want to use JSX, then, you know, you could, you could also just write it this way. This is just JavaScript, by the way, but yeah, absolutely, does anyone do it like this?

No, no one, no one ever does this. Okay, I feel like we're moving further and further away than just JavaScript. Yeah, and yeah, that I. I have no idea where that tagline really came from. But React, let's admit it, it's just really not just JavaScript, so yeah, but you know what? Regardless, you might think JSX, which definitely not JavaScript. It's actually pretty awesome, especially if you get used to it like it. Looks like HTML feels like HTML, it's familiar, you know? Okay, well, I ran into something weird here. It shows zero. Oh yeah, that's one of the weird things about JSX. Okay, you actually have to put this Boolean here like triple equals zero to show the items. Or you could do this double exclamation mark. If you're using TypeScript, you could have a little bit more fun with the exclamation marks. Yeah, items, items, items, as it.

That reminds me of Jacobs by Mark Jacobs, by Mark Jacobs, Jacobs.

Play from 6:00

Yeah, you'd be surprised you see this a lot in Reacts code bases. Okay, so pop Quiz here. What's wrong with this code? I don't see anything wrong with that. Yeah, well, we're missing a key. Yeah, it's a huge I. I know. It's really easy to overlook, and the for loop is a little bit of an issue too. So, yeah, you could pretty much do this, okay, so I do this instead. Will it work? I mean, React is still going to yell at you about the whole key thing. So you, you have to add something there, all right, so I will just add whatever key. Then, I mean, you, you can. And actually, actually, this is a bad idea, so just use IDs or use an index, I guess. But this will at least make React stop yelling at you, so that's pretty nice. M. This seems like React is all about fun.

Functional programming then, yeah, you now that you're using map instead of for loops, but by functional programming, if you mean, use functions. Unlearn half of JavaScript and also learn TypeScript, which, you know, some famous YouTubers will tell you is not optional anymore, you know? Then, yeah, it's pretty much functional programming. Okay, well, okay, let's start talking about the React hooks. Yeah, okay. So pop quiz and this is sort of a I keep giving you pop quizzes. This is a math quiz. Okay, let's say we set counts to count plus 60, and then count + 8, and then count plus 1. What's the answer? I'm not going to say that, no, why don't you ask the audience, what's the answer? Who said 69? It's one, all right. So what do we do instead? Well, it seems like to fix this, I should probably put. A function inside the set count, right?

Yeah, exactly, so you have do that because set count is asynchronous, so that count is still going to be the same. And it's not like queued up until after the component renders and then it's going to rerender with the counts. So can I do this for sets and Maps too? Okay, so this one's actually a little bit weird, even though sets and maps are, you know, just Javascripts. This set will actually be the same instance, so that's actually not going to work. You can't really, you know, do this. But I have an alternative. If you put it in an array and then you just like, put the set in an array, you know what? I thought this was a good idea. So it hurts that they're laughing, but it's okay. Yeah, you, you could use set some maps this way. Well, it doesn't seem that React really plays nice with maps and sets. Even though this is JavaScript.

Yeah, I know, I know, it's like JavaScript, the I know 75% of JavaScript, you know? But, you know what? Let me talk about useState a little bit. It's just a really good hook, and it's really simple if you need to.

Play from 8:00

I mean, look at this one line of code, useState. It's great, but every time I use US state, I feel like I use eight. Yeah, this is more of an edge case. This isn't every app. I mean, you, you don't really see this that often, really. Yeah, what about this? Okay? and this and this? Okay? Thankfully, we have a solution. Okay, it's called useReducer. It's wonderful. Okay, well, that's wonderful. Why doesn't everyone use it? because no one likes useReducer? Okay, nobody. And it's. It's not that it's bad, it's just that it reminds people of these red ducks over here. Wait, red ducks or red duck, Redux, Redux, red ducks. Same thing. Okay, but you know what? Here is really how simple used reducer can be. Like you have these used dates and then you have used reducer, and really, you only need one hook to do this. So, honestly, in cases like this, used reducer might help you literally reduce the number of states.

Okay, so I guess, let's see I. Can probably use useReducer for a simple toggle similar to this. Yeah, I mean, this is like a really, really simple I use. States is even more complicated than this. But for some reason, people just don't like Ed. Producer, you know? So why did? Does the React community not use Redux anymore? You know what, I don't really know, and also that's false, like there's a lot of people using Redux still. Either because they have to, or because they're like, Hey, this is actually good because Redux used to be a lot of boiler plates and weird conventions and things like that. But, you know, it eventually came back with Mark Erikson. And we have Redux toolkit, which is actually pretty awesome, so should try it out. All right, let's see next. We have used context for states that really change. Yeah, so use context is actually really useful.

Play from 11:00

You do have to add this weird null as any, because TypeScript is weird about that, or you could put the exact type of whatever you expect to put in ED context. But yeah, it is for, more of a global state thing, but not really for all states. It's, you know, just a nice way to share state. Okay, so can I use it for things like, yeah, just state. That rarely changes like a theme. Okay, yeah, what about to see whether or not Ken Wheeler is drunk? Yeah, I mean, that rarely changes. So, you know, okay? But honestly, you should really think of use context as like a dependency injection thing, rather than a global state thing.

Okay, sounds good. Yeah, all right. And also, you know, when you use it as dependency injection, you end up having something that looks like this. You have a lot of providers which are fine. Do you live like this? Honestly, this is pretty normal for React code bases. There's actually nothing wrong with this. Believe it or not. Wow, yeah, I'm sorry, but you know what, it's actually a lot better than what we've had before. What is that? Okay? So, these are higher order components, and these were actually really popular before. ConTExT you know, do you remember H's cuz, Ken Wheeler sure does, or, sorry, can dos, I'm so. Sorry, yeah, yeah, Downshift used HC's and that was a nightmare. This entire thing is a button. But you know what? Let me tell you something else. Use context is actually really cool. Did you know that it can be called conditionally?

So if you have some condition, you could, you know, either use context or return null. It's pretty cool, okay, but if it's just JavaScript, I thought you could call any hook conditionally. No, so you actually can't call hooks condition. You. You can't call most hooks conditionally. Unfortunately. Yeah, okay, well, other libraries were able to figure it out, like solid in view, what happened? This is because of the rule of hooks, you know, and I, I, I know it's weird. I know the rules of hooks are weird. But really, it's because of just the technical limitations of using hooks and basically how they work. So okay, okay, so I need to recap. Okay, when you're using a local state with simple updates, you want to use UST state. Yeah, Global states with simple UPATE updates you want to use. Use context. Yeah, and then we have local state with actual logic as used. Reducer.

What do we do for Global logic and actual logic? I don't know, actually. You have your choice, you have plenty of choices here. And I mean, the sad thing is that Redux, or sorry, reacts not the same thing. They actually work so close to having a solution for this called useSyncExternalStore. Unfortunately, you know, it's not really that common. It's like, if people you hate useReducer, they sort of hate this one more, but it's actually a really, really useful hook. But you know what, let's move on from states. Okay, all right, we'll talk about your favorite hook, my favorite hook. It's useEffects. Yeah, so useEffect is actually, you know, pretty weird. You know, if you do weird things like setting accounts inside of useEffect, then you, you get a lot of changes and you end up with this. Don't the docs warn against that? All right, so you'd be surprised the old docks. So you would have to scroll all the way to the bottom until the first mention of a dependency array, and it was a.

Tip it wasn't even like the core API, it was a tip you could optimize performance by skipping effects. And then that's where they introduced the dependency array. Later, they updated the docs, but React hooks were introduced in 2018 and the official docs were released in 2023. So yeah, React sort of works in like a 5year cycle, you know, it's just how it works. So if I want to fetch data inside a useEffect, what happens? So this one, you know you, it will just keep running and running, and then you owe Amazon a million dollars. Wait, what if I'm using Versel? Yeah, they'll come after you too, they'll get your money. And that's cuz we forgot the dependency array. Okay, okay, what if I wrote it this way to prevent being called more than once? Can this avoid the problem? Sort of? But then you have another weird thing, which is effects.

Execute twice on Mount in strict mode, which is just really, really weird. So yeah, and so, I mean, maybe you could just disable strict mode, but only if you need to. Because life is short. All right, let's continue to talk on, talk about the other hooks, like useRef, all right, so useRef is really cool. Because if you want to do something and you don't want react to know about it, you could just useRef. So it's a really great hook for that. And so in React 18 and below, for some silly reason, you have to like pass this component, the function component, into forward ref. There were some limitations where you couldn't use this as an actual prop on the custom components, but for some weird reason, in React 19, it just will magically work. I don't know they were able to figure it out after 5 years.

Yeah. And so there's also used memo and used callback, which are also important hooks. Where if you're rendering everything, which is basically how React works, it's probably okay. But the moment where it's not okay, that's when, you know, React, you know we, you have to useMemo, use CC or React. memo, which is actually really useful. Except there's a lot foot guns here, because, let's say you have default options and you want to pass that. Into a component and you're spreading over here that is going to update every single time. Like, for example, if you do this, every single time, you render the parent. That's a new object, that's a state. Do, you know, new object, state. new. That's our, company. So doing some Sly advertising in there. So you have to basically pass every single prop in there for, for it to work. Otherwise, used memo is pretty much useless, and another place that useless is for event handlers.

So if you've ever tried to do this, this is one of the most confusing things you have on change of on a value whenever that value changes. But es Lint will yell at you because you're forgetting that. On change, so you have to pass the on change into the dependency array. But if that has some Upstream updates, too, then you're going to just keep calling this useEffect. Because on change is going to just keep on changing and keep affecting things that make the component render. So the best thing to do is just to tell Esin to shut up. Yeah, and so actually, Keny Dods talked a lot about this, too. Where, basically, if you have an event handler, you, and you try to put it in use, call back. Just don't do it. So, um. A great way to remember this is if you can put it. If you're asking if you should put in the B handler and useCallback, you can't.

A Kent is awesome, Kent is great. Okay, wait, so all of this useMemo and used callback stuff, it's a little bit confusing. I thought. React is supposed to be fast by default, so like, why do we have to make it slow? Well, you know what? Thankfully, in React 19, React forget is coming up, and that's going to let you just completely not use those, hopefully not use those used callback, used memo. All of those weird optimizations that you had to do. Why forget? I forgot? No, forget? Yeah, it's called for I for actually okay, so it's React has these projects or experiments that they do, I think that's it. So they have like, flight, Fizz, Fiber, Fabric, Float and all these other things. And forget is one of those. Ideas? So that's why it's called that. Okay, all right, all right. Let's head on to the other hooks, like used debug value.

Oh yeah, so used debug value. No one ever uses it. So uh. But let's see there's use ID really useful for accessibility. Use imperative handle underrated. Everyone hates it, no one uses it. We have use insertion effect and useLayoutEffect, as if we didn't have enough useEffect. Hooks. And then we have ED transition and use deferred value. Because a while ago, React had this whole concurrent mode thing, but then they killed it for concurrence features. Okay, which you'll probably never use anyway. And then, we have use form state and use form status, which will never get confusing. And we have use, use what you no use watt as our talk, this is just use.

Play from 13:00

It's really useful for stuff. Okay, let's talk about the elephant in the room. Oh, you mean RSC's? So RSC's are also a little bit weird. You have this random string that somehow tells the component. I mean, you heard Sam talk about it in the last talk, or actually you didn't because you were locked outside for some reason. But we have you use server and use clients and use whatever that sort of say. Hey, this component should actually, I think, like, render or run on the server versus the clients, and it makes it makes things a lot better. I, I still don't get it, but yeah, so okay, so do I just put use client on top of my component and it should run? You would think that, but this actually will make reacts complain. Because even though it's a client component, it runs on the server first, so it's not fully a client's component.

So it's going to yell and be like, what the hell is a window? So why can't I just check to see if it's defined and then use it? So, I mean, this is, this is fine, but you know, things like Next.js will actually yell at you. Because the width does not match, like the server width does not match the client width you have. Like, whatever number it is versus IDK, it's not going to be happy about that. But there's, there's actually two different strategies. For that, so you could use dates and useEffect, and basically this is going to show zero and then, useEffect's only going to run on the client. So when the client renders this, it's going to like, just flash from zero to whatever the actual width is. Uh. But there's also another thing you could do, which is useSyncExternalStore. Really awesome hook. And so, TK Dodo talked about this.

I really recommend you read this, uh? But with Usync external store, you have no sub, and then you have this, window..in withth over here. This is what the client sees. This is like telling you this is a snapshot from the clients, and this is the snapshot from the server. Pretty cool, right? Yeah, but why no sub? no sub? is because USync external store uses Pub sub mechanism. O Pub Subs. I like those. Yeah, oh, Pub Subs are great, so if you're new to Miami, go visit a Publix, get a Pub sub. They're actually pretty good. Yeah, okay, so in the React docs, yeah, so the React docs, I, I mean, server components are actually pretty good. If you're using Next.js, they're stable. So wait, wait, wait, wait. They say that they're not stable in the React. Dogs, yeah, but I don't know, Next.js. They have a lot of money, so they could just do whatever they want and call them stable.

Yeah, so no one, no one really supports React components, but I mean, other than that, listen, React is awesome. Okay, and no one ever got fired for choosing reacts. Wait, unless they use the use secret DOM do not use, or you'll get fired. Forgot about that? Yeah, people have gotten fired for using React, as it turns out. But also, honestly, React is still being improved. There's a lot of discussion, a lot of developments. It's great, even though the latest Relas release was in 2022. Okay, yeah, but honestly, it's. It's constantly being updated. And besides, React is really, really popular, especially compared to all of the other Frameworks. The numbers here, they, they don't lie, they are lying, cuz those are version numbers. Oh okay, yeah, that's right. Yeah. React, jump from zero. whatever to 15. There were a lot of breaking changes. I. Guess so they had to really, really pump that number up?

Hold on, this is probably the graph that you're looking for. Yes, okay, here we go, here we go. So, as you could see, there's React, okay, and you could see how React is much, much more popular. This is a downloads graph, so it's showing how React is more popular than, View and Angular, which is the X-axis. Yeah, but you know what? Here's here's some hot takes because we have 14 seconds left. Oh, that's negative, 14 seconds, okay, first of all, don't worry about the Cutting edge React stuff. You know it, you don't have to be chasing every new shiny feature of React. It's probably 5 years away anyway, and it might get canceled. That's what React likes to do for some reason. And also, don't worry about silly things we get so caught up in, like, you know, dependency. AR Raay hooks. Should we useMemo, should we put things in context?

If you've been around a while and you've used React back when there were class components, you probably remember this. And we don't talk about this anymore, so just imagine how much time was wasted just arguing about that. So, you know, React is a very popular framework for a reason. Okay, that's great to know. Yeah, well. I hope that you all enjoyed this talk and I hope that in the end, you realize that you should learn at your own pace. Okay, you, you are not going to operate the same at the same capacity as the person next to you, so you do what you can. And remember that when you're learning new things, it can be a little bit weird at first, okay, so embrace all the weird, all the funny, all the awesome things, whether in life or when you're learning. React and yeah, thank you so much for having us, thank you, React.

Miami.

Play from 22:00