00:00 Hello friends, I'm excited to have you join me for advanced react patterns where we're going to learn a ton of really cool patterns Here's a couple of the things that you can look forward to in this series of exercises for this workshop First we're going to talk about composition when you're done with this exercise It's actually going to look exactly the same to the user

00:20 But it's going to actually be very different for you as the developer and you're going to get a deep Understanding of what it means to compose react components and react elements together We're going to address the prop drilling problem and what impact this has on react server components and client components And how you compose those things together?

00:39 So this is of all the patterns that you're going to be learning today this one's probably going to impact you the most and and have like the the biggest impact on your Experience as a react developer, especially going into the future We're also going to talk about the latest ref pattern

00:55 so I'm going to click on this and I'm going to decrement this and it's a three hundred or three thousand millisecond delay between when we Click on the button and when we actually perform the the change and you'll notice if I click on this and then decrement it down To one it will only increment by one when it finally increments

01:15 that's not the default behavior and there are situations where you want to change the behavior of The the way that react works so that you can access the latest version of Some value when you're calling some callback, it's actually a really simple pattern

01:30 but it's it's a little bit of a trippy thing to think about when we're talking about D bounces and stale closures of Functions and stuff like that. So you're gonna have a lot of fun with that, I think and then finally for the rest of these We're going to be working with a simple toggle component on and off on and off

01:49 But we're going to take this pretty extreme so that you have a really good understanding of these different patterns like Compound components kind of simulating what we're doing with select an option in HTML. It's pretty interesting and most UI component libraries have implemented the compound components pattern and it's awesome

02:07 Slots is a relatively newer pattern not as many libraries to implement this but a pretty interesting one Especially useful for very large component libraries that have lots of shared components across them. So that'll be really interesting prompt collections and getters another really good one that

02:24 We're going to be exploring that kind of came out of downshift a library that I wrote years ago State initializer and state reducer also patterns that kind of came out of the downshift library Really interesting mechanisms for initializing a resetting state, but then also giving

02:44 control external control over how state updates happen and then ultimate control with control props where You can do all sorts of things like controlling the state of Another component outside of that component. Yeah, lots and lots of really cool things can happen with control props

03:03 So I'm really excited about this advanced react patterns workshop and getting through all this stuff make sure to grab yourself a nice Bottle of water fill it up Get in a place where you can do some stretches and stuff because you're going to want your blood flowing in this workshop So let's get into it