00:00 Let's go we're going to be doing advanced react api's in this workshop, and it's going to be pretty legit You're going to feel like an advanced react developer when you're done with this So yeah, we're doing a counter yep, not going to lie We're definitely going to be working with the counter, but we're going to do some pretty deep

00:19 React reducer Magic in here, and you're going to have a really good understanding of what the reducer api actually is not just the convention That you'll learn just by going through blog posts and stuff But the actual api so that you can be Unlocked like your brain can be unlocked from the convention and you can just use it and all sorts of cool ways

00:39 And we'll do all that with the counter, but not just a counter. This is coming back We're going to be doing tic-tac-toe hooray. This will be awesome using Use reducer migrating it from use state to use reducer so you can really get a good feeling For not only how to use the use reducer api but also How to

00:58 Refactor it from you state how to handle lazy initialization And you'll be able to see how use reducer actually simplifies our component code by moving The state change logic to a separate function that kind of encapsulates all the changes that we can have which is cool We're also bringing this back, and it's going to be sweet

01:19 we're going to be creating a custom component to manage the search params and All of the like forward backward everything still works and everything We're also going to be dealing with memoization of Functions or set search params and stuff is going to have to be memoized with this use callback thing and that'll be interesting

01:40 And then we also have little tooltips. How cute is that but there are some interesting things going on To make this work. We'll get into use layout effect to avoid Things bouncing around where they shouldn't see because if we scroll right here, that's gonna have to show up below How do we know where it's gonna go?

01:58 So yeah gonna have to do some interesting things to make that work nicely with use layout effect So yeah getting into all sorts of hooks in this one use imperative handle not one that you use a lot But I literally just today Had some but recommended that somebody use it so it does come up occasionally and so here we can add and remove messages

02:19 You can scroll to the top scroll the bottom This is using use imperative handle so parent gets to just tell the child to do something in a non declarative way And there are reasons for it. It'll be interesting and then this one is really cool This comes from the trollex demo that Ryan Florence put together This is a button and it's also an input

02:39 So you hit enter and it focuses highlights all the text, but there's something kind of funny going on here when it comes to like Hitting escape and then that's gonna focus the button and then you hit enter and it's gonna select all the text But the input isn't there yet. Like oh, what do we do? So flush sync? It's gonna be a good one. And then we wrap up here with handling

03:00 The server rendering for you sync external store and just like introduced introduction to you sync external store We're gonna be simulating some server rendering stuff. That's gonna be kind of funny. But yeah, we've got our narrow and wide Measurements here all using you sync external store

03:19 So the external store is the browser and we're gonna synchronize that with our react components. That is going to be fun I think you're gonna love it and I'm excited for you to get started. So let's get into it Welcome to the advanced react API's workshop