Livestream with Kent: React Patterns

[Music] what is up you can't see me because i forgot to check on this one second here it comes here accounts here comes obs messes up every time i unplug my computer what up oh my gosh i'm in space hello everyone my name is kensey dodds and i'm super excited to be here with you all i'm talking about epic react it's going to be so epic i'm so excited about this so this is the first of many live streams that i'm going to be doing in preparation for for epic react's launch holy mackerel we have 130 people watching that's exciting um so yeah cool stuff let me just uh give you a rundown of what's going to happen here so epicreact.dev is going to be released a week from tomorrow at 10 a.m my time i really can't wait um and if you can't wait also then i sent an email to all the subscribers this morning with a link to a um to a calendar event that you could add to your calendar if you didn't get that email then make sure to subscribe on epicreact.dev so that you get those emails and another thing the chat is going to be disabled for all of my live streams and mostly because youtube is not very good at keeping people civil and so instead i use discord and so let me just share my screen here really quick here's discord it's awesome uh take a look at uh or or go ahead and join the discord there's a link in the description and we're going to be chatting it up here in epic react so if i share any links or anything that's going to go right here and i'm going to share a link right now actually so today we're talking about patterns and you can go take a look at these slides i've given this talk before so if you've seen this talk then this will be very familiar to you but i'm basically going to like sort of give this talk in a relatively off-the-cuff manner um and um yeah and then i will have this uh yeah you can see yourself what up um i'll like answer questions here in the discord channel i'll just move this over here so i can see that and feel free to to ask any questions that you've got and this is pretty informal let me get rid of a couple of these tabs here probably should have gotten that all set up i've been doing a lot of a lot of fun stuff recently i'm going to move this over here also just have that on off to the side right there okay sweet so good times uh definitely grab uh get yourself on the discord holy moly take a look at this so when you join the discord you you get a special channel just for you and i think we might be getting close to our limit of 50. so if we are i'm gonna have to start deleting people who haven't talked to the bot for a second so let me let me just check that out really quick yeah one two three four five six seven eight nine 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 okay so we're not quite to 50 but i think we're getting pretty close so uh it the i need to write this into the bot um but uh yeah we need to uh delete some of these channels um so that people can still join so i'm gonna delete some where i we haven't had people chat for a little bit um so that um people don't join and then i'm going to update the bot so that it can handle this sort of thing um for me and say hey like you're going to get deleted you need to answer these questions right now it deletes after like a half hour of inactivity but i think i need to um to decrease that amount of time for situations like this where i've got tons of people joining all at once so i apologize for that let me just do this really quick um and get this done and then we can we can rock and roll um there oh man you're just a lot of people it's not like you haven't been chatting ah okay well if if it doesn't work for you right away i'm sorry come back later when it's not so busy okay let's go ahead and get started simply react and actually let me move this over here so i can make sure that i'm still like streaming and everything's working and i'm going to have the epic react channel open and discord so if you do have questions or anything feel free to comment in here early bird by early bird i mean so lean just asked what the early birds are all about we don't have an early bird like i'm not um i'm not going to be doing like an early before the like a pre-sale or anything but you will we technically have an early bird discount for if you are one of the first people to to get it or or if you get a license in the first 24 hours so the way that this is going to work is we have um the first 24 hours is going to be a really big discount like huge discount and then the next 24 hours will be a really great discount and then the rest of the the next um until the sale is over which we're still kind of deciding when it's going to end um but it'll be just a nice discount um so you'll want to get it earlier if you want to get the bigger discount uh and with that in mind tell your friends because they're gonna be like what there was an awesome discount you didn't tell me what kind of friend are you okay so let's talk about some patterns it's gonna be great um and like i said this is a talk that i've given more like formally and professionally and you can find this on my talks page which i will link in discord so if you go to simply react you can see i've given it many times i would just look at this one the most recent time and take a look at a more formal presentation of this talk so oh and one other thing you can't see but right there epic react dev is great um okay cool so uh this is a typical life cycle of components not the component life cycle but life cycle of components how we can um how patterns can simplify our lives and how we can use compatibility composability i want to give you a challenge this is not how to implement the patterns that's what i'm going to teach you in epic react so look forward to that so this is the typical life of a component i'm going to bump this up a little bit so here is an accordion i can click on things i can expand them and it's cool i like that so if you were tasked to build this sort of thing you'd probably build it uh like this you'd say here's my accordion here are my items i have literally built an accordion with this api and the accordion items would have something for like what the contents for the um the button should be and then the contents of the tab or of the accordion contents itself right so pretty standard like we do stuff like this all the time so let's say that you built this and then somebody comes to you comes by your desk and they're like hey yo that's a cool recording you got there is there any chance we can make it so that the contents appear above and you're like yeah i can do that just an if statement inside of my um inside of my render method no problem no big deal and so you do that and you just say above is true all right so if about this dot props that above is true then we're going to render it above cool so then somebody else comes to you and says hey i noticed that you were able to change it can you change it to render to the side you say yeah just another if statement we'll do right is true and you're like wow just if statements starting to look not awesome and somebody's like i want it onto the right side like okay another if statement i guess this one's going to be left is true and then you're like oh no i have a right is true and the left is true what if i have both of those which one's going to win so you change it because you're a thinker you're like no no we're going to do an enum impossible states we don't want impossible states that's a bad idea so we're going to make our position left okay cool all right so that's going to work and we've got like css grid implemented and stuff to make this as easy as possible but yeah it's still like a render method's looking kind of dirty and then somebody comes to you and says hey uh i liked your accordion the way it was like it works fine for me except i want one difference i only want to have one accordion open at a time okay so like i can close them all if i want to but i can't open more than one at once can we do that and you're like okay yeah cool i don't have to change my render method anymore so that's good i just have to change how i the mechanism i use for updating the state so i just say if i don't know this.props dot single then um we'll just make sure to set the state so that there's only one open index okay so that'll work and then somebody says hey i am actually okay with having multiple open at once my problem is i don't want to be able to close all of them so you have to have one open at all times okay so like that's another if statement in the way i update my state i guess um and now we're going to have a prevent close is true and then somebody says hey i want both of those behaviors i want i can't close it but i can't open more than one you're like oh that's actually easy now you just provide both props and it'll just work the way that i implemented it um i didn't really think of this but yeah that that totally works so great um and then somebody sees that they see this and they're like there's only one open at a time you can't close one so that's i'm building a tabs ui that's basically what a tabs ui is just there's a button when you click on it it shows some contents and when you click on another one it shows that one's contents and it hides the other one you can't have more than one open at a time you can't close them all so that's tabs can we turn this thing into a tabs component you're like uh no and they say no look you just add a tabs thing and in your render function you just say if this.props.tabs then render the with the tabs ui and if otherwise just render everything else that you were already doing it's just an if statement you're like nope i'm not doing it i can't do it don't make me do it i hate this i'm crying and we're sad and then somebody says no no it'll be fine and so you do it and then they come around and say hey can we actually render those tabs above instead and you're like nope i'm not going to do it i hate this and so they make a tabs component they just copy paste everything make a tabs component um and now you have two problems so this is like a path to sadness very common uh sort of steps of things that happen right so like it's really just a common thing to have people pile on abstractions onto an existing abstraction and i have another talk about abstraction that you might want to take a look at some time it's kind of interesting it's aha programming i gave it most recently at react summit really interesting um kind of stuff in here so let me just copy that right there and actually another one that's sort of related is this um well very tangentially but consume build teach that's coming up for react summit in october that one will be kind of interesting too but uh yeah in general abstraction is um is something that kind of exists for itself and it's really easy to get wrong um as as things just are thoughtlessly added as you build upon upon itself and abstraction also can make it really difficult to maintain a code base in the long term so we can extrapolate this we can actually take it further and this is the way that it has gone for me is you have the accordion items but and you have the title and the contents but then you also like well i want the title to be different if it's open i want it to be disabled i want it to be like infinity other things and then maybe the props all change you're like i i want it to open on trigger and i want it to close on blur and here i want to style it differently so i want to apply a class name to the title and i whenever one is opened or closed or any trigger at all i want to like do analytics or you know there are so many things that you can do and that you do do with this stuff and um there's one component in particular that took the cake when i was looking for okay how many what's the most number of props that anybody's ever made and it was like 110 props um and uh yeah i can't even imagine um dealing with that and and like not only yeah there are just so many problems with that let's talk about some of those problems so first off the bundle size uh it's going to be huge like even just the names of those props is going to add like an insignificant or a significant amount to the bundle size both on the receiving end for the component that's implemented that and on the giving end for the component that's going to hand those props off so that's not cool um maintenance overhead for the maintainers like yeah people are gonna as this abstraction becomes more useful more people are going to want to contribute to it but it becomes more difficult to do so because there's so much uh logic and stuff that this thing can do and so the contributors that you do get are often people who are just drive by contributors they're like i don't want to touch it i just want to make it do this thing um so yeah that's not cool and it makes things really difficult to maintain in the long term the implementation gets more complex especially as people are drive by contributing they don't really have an understanding of everything that's going on and so they're going to complect the uh implementation uh due to their lack of understanding um so that's yeah that's difficult that's not fun um so and i'm seeing some people uh chatting in here talking about render props and stuff don't worry your time will come we're we're getting there 135 props we only need one component yeah that's true but uh you have to learn that component and that api gets pretty complex 135 components with one prop yeah you could do that too um the api just gets super complicated then you have to document that right and and your users have to learn that api such a nightmare it's it's really difficult so like these monolithic components become real problems and they may be able to do everything for everyone but um it brings like you you wanted the banana you get the whole gorilla and the four and the jungle like you uh you bring along the entire everything that can be done um when you have this type of complexity um yeah it would be cool if there was a way we could avoid this um so everybody's sad we're all crying our eyes out because we have this thing that nobody wants to touch it's really complex how do we deal with this aprapocalypse that as jen creighton put it i love that that's hilarious so how do we avoid the prop clips so what if i told you that the component that like it's actually a component it's running this thing works it's running in the browser what if i told you that component all of those examples were all based on the same 22 line hook just one 22 line hook that powered all of that so this is it so the hook itself is actually pretty small it's the reducer and that takes most of the most of the logic and uh yeah and then we have our action types and we export those things that's all that's all of the logic behind our um that all of those abstractions so that's cool do you want to you want to take a look at this let's take a look at this we've got a demo in code sandbox and just to save you a couple clicks i'll paste this in our discord so you can take a look at that if you want to like look at it directly yourself um but yeah this is it we've got a lib here that has some emotion components and and different things like that but most of our time spent here in the index.js so here it is our working according component that can be used as a tabs so we're going to pretend that these are different files in your project we have a use accordion right here this is going to be exporting some stuff then we have our app and then we also have our use tabs right here which presumably would be in another another file so this is what's so cool about hooks i gave this talk before hooks were a thing and at that time it was let's talk about render props and higher order components and all this cool stuff [Music] but as cool as that was excuse me okay we're streaming again hopefully this is going to work um i'm honestly not surprised obs dies all the time okay we're back okay so we should should be good sorry about that that's why i kept the obs window open right here so i could see it there we go okay we're good sorry about that little brief interruption um so yeah back in the day we used to do a lot of higher order components render props all that stuff but now we have hooks as like just the perfect little atom uh that we can apply as an abstraction layer and it just made all of this stuff way easier so um yeah cool i'm glad that this talk brought me to your attention it's a fun talk so let's dive in let's see what this does and then you can feel free to ask any questions or anything that that you might have so um here's our let's start with the use accordion actually let's let's back up from the abstraction and we'll go to where it's used first so here's our accordion component um we here's one of the cool things about composition and abstraction is that we can build things out of these small lego blocks and then we can go back to the api that we had before which we really liked like it was a fine api there was nothing wrong with this api um especially like this first one i liked this api like it was really quite simple i just have a accordion component i have my items and here's how those items are implemented in here the title and the contents and then if somebody had like some additional customization then they we can do things a little bit differently so we can provide that nice api for them from the start and then we can give it a little bit more customization if needed without having to come make our uh underlying accordion implementation any more complex so this is what the like that typical life cycle again so here we have this accordion it has items um we're accepting a reducer and i'll talk about that state reducer here in a little bit we're using this use accordion it's taking that reducer it's calling combined reducers which is not the thing from redux it's just a little function i can show you here in a second it's a different thing and and then we're returning a div and we're mapping over those items we're rendering an accordion item there's nothing really special about that it's just a styled component with emotion um it has a direction uh prop and then we have our accordion button and accordion contents also just styled components nothing no logic with those okay cool so use accordion is managing our state we can toggle an index we have our open indexes so we can determine whether a accordion should be considered open based on whether the open indexes includes the index of our item okay so with all that backdrop let's walk through this whole process or this life cycle of a component now so we start out with this component it's awesome we love it we can open multiple items we can close them all it's great and somebody comes around and they say hey i want to be able to render things on the right and you say okay you're going to take this component this like 20 lines of a component you're going to copy it and you're going to just move this over to the other side okay and then we're going or sorry that's i was doing it the opposite way so you're going to um oh right yeah that's right i was i've got myself all mixed up so yeah we want it to render the buttons below that's that's the use case so you're gonna copy this you're gonna move those buttons to be below and instead of having a down finger we're going to have an up point up finger there we go okay so yeah and that's it it totally works and i didn't have to change my abstraction at all not even a little bit i just said hey why don't you just use the same building blocks that i use for this accordion and like this is a declarative api there's there's not a whole lot you really have to do here you just move things around and and you're good you're off to the races and then somebody comes around and says hey that's cool here let's go over here so we can follow along with that that process so instead of having accordion with above is true like maybe you could do that you could actually still compose things together and you'd have one that has it above and the other has a below i wouldn't recommend that it's a violation of the aha programming principle but you could do that that's the cool thing about composition but in in essence we're using the same building blocks to create this experience and that's what makes this so powerful so then somebody comes around and says hey i want it to be on the right and so you're like okay cool we're we're using css grid so we can just say vertical instead of vertical it'll be horizontal and then uh now it's rendered over on the uh the right there so we'll just move this over and instead of pointing up we're going to be pointing to the right and there we go we're off to the races oh and then somebody says i want it on the left then you say you just copy paste this again and move this one over to that side and then we're going to want to put these change the direction those fingers are pointing there we go and boom solid right we're pretty good feeling pretty good about that right so um let me just answer a question jonathan just asked here uh this looks clean and good but what about uh in a professional context where team members might not have the same skill it is uh it is objectively better but more abstract the one with a lot of props might be bad to maintain but it's easier to understand um i would argue against that i don't think that using the building like you can this is the cool thing is that you can build these uh little building blocks and then um like this this hook and we'll dive into the hook here in a little bit you can build these building blocks and then if you have a junior developer and they're like i don't know how to do this thing well um really it is just a matter of copy paste and move things around um and if they really are just that junior they they can't figure that out that's that's fine you can help them with that and you can do the copy and paste or you can build your monster component out of these building blocks and the nice thing about that is the only thing that will be complex is the monster component that composes these things together and if anybody wants to do something slightly different that doesn't really fit the monster component they don't have to change the monster component they can go ahead and build their own little implementation out of these building blocks and that's why this is way better [Music] and i've done and experienced this at scale um at paypal and that was my experiences it was just so much better for everybody even the newbies uh okay so anyway um we can use the same stuff for our tabs so here i'm going to make a used tabs uh and yeah uh horacio said or by epic react and that's it yeah there you go you have some juniors have them buy epic reacts and then they'll be like professionals it'll be awesome and yes christos just said many props leads to complex render methods yes avoid that okay cool so here we have use tabs it's just composing use accordion and uh it's providing its own custom reducer um function here so we have this prevent close and single reducer and accordion reducer actually i jumped i jumped again a little bit we're skipping ahead uh so sorry let me back up so we we move things around and now we just want to be able to open one at a time so how would we accomplish this with our current implementation uh so let's let's come back up here we'll undo a bunch of stuff okay so we're back to square one and they're like hey i just want to be able to make it so you can't have more than one open at a time okay so this is where the reducers things thing comes in so what you do is you say actually you don't need to copy the accordion at all because the accordion component is really just responsible for rendering stuff but it accepts a prop called a reducer that allows you to customize the um the way that this thing operates and i'll show you how this all works here in just a second i just want to show you the api first so if we go to our accordion here we're going to say the reducer is going to be our single reducer so this is going to just make sure that the state can only have one open at a time so that's nice and easy this is called inversion of control and we'll talk a little bit more about that too so that yeah nice and easy don't have to add any logic or whatever um and and that single reducer function is really simple so you'll see that here in a second it's not like some magical something sorry obs died again okay sorry about that man um yeah if i'm gonna do much more of this i i've streamed with obs in the past there's must be something wrong with the latest version or something like that but i'll dig into it and hopefully we don't have this problem in the future uh so sorry about that okay so i was i was just showing the reducers i don't remember exactly when it all failed so sorry about that um i'll back it up to the single reducer uh so single reducer so this is a simple function that i'll show you here in a little bit that allows us to control the way that the state updates are happening it's called a state reducer and so this allows me to only have one of these open at a time because it's controlling how the state um management happens and yes you paid good money for this yes i will issue you an immediate refund for all the money that you paid uh yeah i'm using normal obs horacio so i'm not i'm not sure why maybe streamlabs is better somehow i'm not sure um but uh yeah so we're we're inverting control giving people control over the way that the state is managed and that takes care of our single reducer and then we have one for our prevent close reducer and so this is basically the same concept except now i can't close down to beyond just the one okay and then we have the special combine reducers function where i can give it my single reducer and my prevent close reducer and i'll show you all of this here in just a second i just want you to see what's possible and this puts those two together so i can't close this anymore and this is what our tabs ui is so we just need to change what the ui looks like and this is where like the lego blocks really like whoa that's awesome so now for tabs ui you say no no i'm not going to change my my function my render function for you at all you're just going to copy this and you'll use the same hook that i'm using you just combine your reducers so here we're going to combine the reducer with maybe they want to provide their own reducer and then the prevent close the single and then the accordion reducer so we just put them all together so it it operates on the state uh appropriately um so then we have our tabs ui so let me grab the tabs we'll swap our accordion for tabs let's get rid of that reducer and now it's just a matter of changing what the ui is and all the state management is handled within the hook it's like uber simple um and yeah it's just magic honestly it's awesome uh all working with that same 22 lines of hook and reducer so yeah it's awesome it is fantastic so you ready to dive in i think i'm ready to dive in let's figure out like how does this magic stuff work so let's take a look at the use accordion uh first so use accordion is using a react user reducer here's a reducer and then the state itself is an array of the indexes so this is the open indexes we have a dispatch and the only type that we support so we may maybe don't need a have a reducer for this or or don't need to have the typical like redux style reducer but the only dispatch supported type is toggle index you could have like a open index or close index or something if you wanted to as well but that's going to be part of our action types so we don't have to use um strings everywhere we just you know have action types here like this i and i just noticed a quick question i'll pause really quick uh or two questions from mark uh how would you go about using the same accordion component in another part of the app that only had minor css changes so if it's really just css changes you just apply different uh class names potentially or you know like for all abstraction the first thing that you do is you copy and paste seriously like i know everybody is all over this dry thing but um it is so much easier to start by copy pasting uh and not just easier because easy is like who cares about easy um it will make sure that you don't overly complect your code so start by copy pasting um and then work your way to an abstraction for the shared pieces so go ahead and take a look at that blog post for more on that uh and then another question where did you learn about these pendants yourself um so most of the patterns that i've learned came from my development of downshift js and i normally mentioned that at the beginning of my talk and i just neglected to say that but yeah so downshift is a just full of patterns this is where i invented the state reducer pattern uh right here and then there's also control props in here there's uh prop getters that's where i created the prop getter pattern it's all right in here it's awesome so take a look at downshift i don't maintain it anymore but that's where i learned these patterns um i should mention control props i did not learn from building down shift i didn't create control props i actually learned that from ryan florence a pretty cool trick and downshift also uses render prop uh the old component does they have hooks now um but i learned render props from probably i think i learned it from ryan but i first saw it in um um yeah i don't think i learned it from ryan so a long time ago for react spring i think was the first component that actually used render props but we don't use render props anymore because we have hooks so i mean render props are still a thing if you actually are curious um there are use cases for render oops render props with hooks and i'll give you a link to that also so if you want to yeah there's all kinds of cool things in here i got a lot of patterns in there anyway um and do you recommend to start first as a component with props and when a new kit use case appear that is difficult to handle refactor the component to component with hooks uh yeah so like start with as little abstraction as possible so build the thing that's like exactly perfectly for the thing that you're building and then maybe no other use cases will come but if they do then before you just like hack things together to make it work um i would just copy and paste it make changes so that this version works for whatever you're building and then look at them both and say oh there's a lot of similarities here they are basically exactly similar just with this one if statement so maybe i'll make a prop for that or there are these like chunks that are similar in them and so i'll make little lego blocks out of that that's how you go about it don't try to make the lego blocks as you're figuring out the new thing that you're building just copy paste and then when before you commit it or before you merge it whatever just look at it and see okay how can i abstract this so that's how i uh recommend going about that and peter is asking is everything done in a single file just for learning purposes yes so i would not typically create it this way and in fact i even have comments for like this would be in one file here's how i'm exporting that here's another file and so on and so forth so yeah we're not tagging file structure here today okay anyway so here's our reducer and we just determine uh when here we're just toggling it so we need to know whether we're opening or closing it so if the current open indexes includes the one that we're trying to toggle then we're closing and so if we're closing then we're going to filter that one out so we'll return that array with the currently open index filtered out if we're opening it so if we're not closing it then we're going to add it to the currently open indexes okay so it's pretty simple actually like there's not a whole lot of logic right there and yeah and it works out quite nicely so let's take a look at this combine reducers because well and that actually takes care of all of our ui stuff because this is just the use accordion hook is just the logic the rest of the ui like the way it looks and where where it appears that all depends on the implementation so whoever's using the hook can render things however they want to based on that state so that's that's the value proposition of just putting this into a hook so for the logic piece of it this is where we get into the state reducer concept and so here we have this accordion reducer and this is our our default reducer right but use accordion actually allows you to provide your own reducer it just defaults to the accordion reducer but you can actually provide your provide an entirely different reducer if you wanted to and so if you wanted to change how we react to this particular action or any anything about the state at all you can do that by providing your own reducer which is what we're doing right here we're providing our own reducer that comes back from this combined reducers thing so combine reducers will take any number of functions so it takes all of the reducer functions and then it returns a new reducer so a reducer is just a function that takes state and an action and it returns the new value of the state so here we're going to return a new reducer and that reducer when called will iterate through the reducers it received and call those reducers with that state and that action and if it my goodness obs is having a rough day this is this is bad so i will dive in i have a monster machine by the way i like i took y'all's money from licenses and stuff and i invested so that this thing wouldn't happen but i think it might be too hot or something i don't know i'm pretty sure it's obs actually uh because my machine's not running that hot right now i'm at uh 17 cpu 30 memory so i'm pretty sure there's there's a bug in obs i'll take a look at updating that so sorry for the interruptions um okay so yeah the way that the reducer works you call each reducer in order and the first one to return a result is the one that where we return that the result of this combined reducer okay so it's actually pretty pretty good oracio i actually have a pc in my closet for um for streaming and i used it for like a year i hated it so much i will not go back to that um unless like there's no other way because then you have to have an extra monitor or i use my extra monitor for that it is such a pain so i hate it i will not do this um but we'll see maybe if i can't get this to work then i'll maybe i'll return to that i don't know i hate it obs is the only one that has problems i i can stream on discord or stream through zoom no problem so it's just obs um so i honestly i think i'd rather just stream through zoom before i use the pc so we've got a backup it's just not as cool because i'm like this little figure inside of my um screen i can't do that with zoom so anyway let's get back to this so we've got this combined reducers let's take a look at what these reducers actually can do what they're capable of so we'll look at the prevent closed one first uh so remember these reducers are exactly that uh like have the exact same api as our base reducer right here so we have this accordion reducer it takes open indexes and the action because open indexes is the state that we're managing so here our prevent close reducer is going to take that open indexes and the action and it really only cares about the toggle index action so it's going to reference the those action types toggle index that happens to be the only action that we dispatch but presumably you'd have multiple um and in downshift we had multiple actions so we'd key off of that and so if that's the action that's being performed then we're going to determine whether or not this is being closed and if if we are closing if that's the the toggle that we're doing we also need to know whether this is the last one to be closed so if we have uh two or more um then this isn't the last and so we're fine but if we only have one left and we're trying to close it that's not okay and so that's what we're determining right here if we're closing and this is the last one then we're just going to not do anything no state update will just return the exact same state this actually will prevent a re-render as well and so we're just saying nope we're not going to let that happen otherwise we'll just return nothing okay and so that's what where this comes in where we say hey if you return nothing then we'll just then we just move on to the next reducer so we're just going to keep on calling reducers until one of them returns some state so for this single reducer that's going to take our open indexes and our action and if it's the toggle then we're going to turn determine if we're closing and if we're not closing so it's it's not being so remember this is the one where you can only have one open at a time so if we're not closing that means we're opening maybe that that's what i should call this we'll say opening um right there okay that maybe that makes more sense so if we're opening then we're going to make sure that our open indexes is an array with a single item and that's the one that we're opening uh and so that's what how the single reducer works and then we use this combined reducers to say i want prevent close and single reducer logic um and uh yeah and we get those those two things together so um that's basically the idea behind the the state reducer uh this also allows us to take this accordion um or or take this use accordion and turn it into a used tabs because we can use that combined reducers to combine a user provided reducer along with prevent close the single reducer and then the underlying accordion reducer which is like the last one that would be run after all of these if these decide to not modify the state change so it's pretty cool really powerful when i added this feature to downshift i got so few issues like issues just started to go away because people are like oh i just use the state reducer um to to con like change the opinions that were made so um yeah that's pretty rock solid awesome uh let me just wrap this up and then i'll answer any questions that you've got right here just a couple other thoughts that i had so one thought epic react dev is coming next week in eight days about less than eight days now and i can't wait it is gonna be awesome so look forward to that um one other thing and i'm gonna the reason this is included is because um i'm going to teach you about how to implement these things in a like exercise format so you just watch it you're like i know it all right no i mean unless you've already used this you my explanation hopefully just showed you what's possible um you probably would need to reference this material so um yeah epic react i'm going to actually give you exercises so you can actually learn this stuff it's really cool you're going to love it so yeah just a quick word of caution we've actually kind of talked about this but if this is all you ever need then building things out with all those abstractions probably a bad idea don't do that you ain't going to need it so follow that you want to optimize for delete delete ability because everything will be erased from existence in the future and so like you you never know whether the thing that you're building today is actually going to exist tomorrow uh and if you spend all of your time abstracting stuff then maybe you'll extract yourself out of the job because like uh you're going to lose your your company is going to die or something so just don't as cool as these patterns are don't just apply them right away wait until you actually need them use patterns that simplify your api state reducers control props hook composition compound components there are so many things that we can rediscover and make awesome so do that thank you so much i am totally cool to hang out for the next 15 minutes to answer any questions you've got and hopefully obs doesn't like make my life sad uh about that so again if you are trying to join the discord and that's where i'm gonna be answering these questions so here i'm gonna come over here um so yeah if you're trying to join the discord then um i think actually there should be whoops i think there should be room uh to do that even though we've got a bunch open right now so feel free to join the discord and i'm gonna be answering questions that are asked right here um so where oh yeah yeah state reducer yeah that's a good good article go check it out um seeing my face oh nice here big face um cool where do we declare which reducer to use um once you combine them all um so let's let's be clear the way that the reducer stuff works is uh here use accordion defaults to the accordion reducer and actually if we go back to the very start we say here's my accordion and i'm passing my items then actually if if this were really all we were building then we shouldn't have to provide a reducer at all in fact we shouldn't even have to provide reduce or prop we don't need to provide this like none of these patterns necessitates uh doing all of these things this way this this thing still works uh just fine just like this so um you don't necessarily have to use uh the reducer prop or any of that stuff uh those are all just like somebody comes to you and they say hey i've got this use case you're like okay let me add the state reducer really quick now you can do your thing um it makes it like we're inverting control that's that's the pattern as in version of control and i've got a blog post about that um it's ioc version of control and let me just give that to you really quick um so yeah that this is where i kind of explain kind of the concept of inversion of control um so yeah like in answers to the question uh where do you declare which user to use once you combine them um we don't actually combine them until we pass them to the red as the reducer prop or to the reducer option in our uh hook so um that's where we define it is um is when we uh call that uh and then in here like ultimately when when that reducer and obs died again this is no good i'm gonna have to maybe i'll use an old version that's stable or something i don't know um yeah so this is where like the reducer that you've combined actually gets into react so that react can can deal with it so hopefully that answers your question um combined reducer is a bit confusing since it really only returns the first defined state um yeah i guess maybe the name is a little confusing this isn't um this is more a demo to show you what's possible um in downshift there's nothing like this there's no combined reducers thing um this is just like if you were using this or building this out in your code and you wanted to have some way of combining reducers i i never had a situation where i needed to combine reducers um when i was using downshift what more often happened is somebody would come to me like let's let's say that we have this example and somebody says hey i want to prevent close and i want to have only one open at a time i would say well you make a single reducer that would do both of those things combined reducers is just kind of a handy utility that i came up with for this talk you could like if the naming is confusing to you you let's brainstorm another name uh it might be better to be like um first reducer or something i i'm not sure um but it like it's sort of yeah i can see where there could be a little bit of confusion there but in in reality in my experience you typically just pass a single reducer uh function that does everything uh that you wanted to so like one thing that you could do is if you only wanted single reducer then you could say okay if all of this and then otherwise we're going to return the accordion reducer open indexes and action and so like that would say hey i want to perform my own stuff but if my own stuff doesn't like match or it's not doing my own thing then i'm just going to do the default um that that would be probably more like uh real world and that's actually what i show in an epic reacts as i show that mechanism because that's what you do more often so cool i feel like i need to see it three times and then write it from scratch that's what epic react is about yeah i have subscribed but didn't get mail uh zubair if you just email me at um hello at kentcdodds.com and let me email um from the email that you're subscribed to then i can look into that for you okay really like prop getters it's awesome uh would i use them in these examples um potentially so like one of the things that promptgetters is useful for is um i have a use case where i typically am rendering this type of a an experience this type of a ui and when people render this type of ui they need these different props for accessibility purposes or to automatically label things or whatever so that's where prop getters comes in i i don't there there may be actually a use case because there are some aria attributes that you might want to apply to the accordion button for example and so here you could take the get button props and get contents props um and then apply those to those different components yeah just not enough time to cover all of that stuff in the time that we have but i do cover it in epic react so there's that um yeah horacio that's a that's a pretty like good rule i'm sure you're not dogmatic about that but that's um yeah that's good um yeah i'll take a look at other options for streaming to avoid this obs nonsense um 10 code reduction nice okay nice okay well thank you that's i do invest a lot of time in it i and i've got more blog posts i've got one coming out on thursday and another on monday and then i actually i think i've got a couple more blog posts that i need to write before the launch so yeah i write a lot uh okay if we have a single state containing open index wouldn't that work so if you just did like a i use state you could probably do this with the use state um the the challenge would be um the um reducer prop or the state reducer uh would be a little bit more tricky um but you can make that work yeah uh price has not been revealed yet it will be revealed um when the day comes uh when it's released i can tell you that the pricing structure is very similar to testing javascript i can also tell you and that it's there's way more content than it is in testing javascript and so it will be more expensive um and i can also tell you that in the first 24 hours of the launch you'll get the biggest discount it's a huge discount for that first 24 hours so you'll want to get it on that first day um a pip of my camera oh interesting maybe i'll take a look at that is there a place where we can get react snippets with actual usable code um that sounds cool i i don't know of anything like that um how do you how do i keep that pace well let's be clear i'm not building a product i don't have like a day job this is my day job but if you want to look at what i did when i did have a day job [Music] i wrote this blog post when i had a day job and it kind of explains how i was productive during that time and lots of how i'm productive now um do you think there are useful cases where your combined reducers that multiple things based on a single action was a bad design i don't think so i i think there are legit cases for uh that combined reducer function um yeah uh so i i don't think that the combined reducer function idea is bad i just haven't actually used it so take that under advisement i guess um yeah so mustafa if you subscribed here then that's great you will get an email when things are are real and legit by the way there are a bunch of people in the kent live channel you don't need to be there i'm not streaming in there right now um i mean maybe rob's doing something i guess that's cool you're welcome to hang out in in my uh um voice channels and chat with each other that's that's cool okay uh will the subscription be a one-time or a regular period license it is a one-time buy and it's yours forever the first day there's a countdown timer on epicreact.dev i just scroll down and it's we have just over eight days so it's gonna be great there will be purchase power parity um or parody purchasing power whatever that will be on epic react so you'll get to choose which discount you want um and uh and depending on where you're coming from in the country or in the world you could have a very huge discount so it just really depends uh just like on testing javascript uh is this workshop suitable for watching offline um you can download the videos there are a lot of them um and yeah there are lots so if you decide to do that then you'll want to like get a high speed connection download all the all the videos and the workshop is suitable for coding offline as well so that was very intentional we are making http requests but i i make it so that you don't have to be online for those to work you don't even have to run a server that's msw at work so it's really i've tried to simplify it as much as possible while still make it realistic and make it so that you can work with it completely offline have i tried react native i have not actually built anything more than hello kent in react native so um yeah there's that i don't have any plans in the near future to do anything with react native it's cool i think it's awesome if i were to build a native app like if i needed to build a native app today i would absolutely use react native but i am not so i am i won't so that's that okay it looks like we're running down on questions i've got four minutes left so i'm happy to hang out for the next four minutes if anybody has any other questions about patterns or whatever else while i'm waiting for those questions to roll in let me just give you a little preview of what uh what patterns you've got at your disposal here so we've got advanced react patterns um and we're back hello again okay so close um yeah so i'll just give you a quick preview we've got context module functions this cool thing that i learned from dan about the way that they manage their context and utility functions and stuff at facebook it's pretty cool compound components love them and how to make those flexible they're use cases for both so we've got both prop collections and getters and the state reducer that i showed you and then control props super powerful and each one of these is like a set of an intro video the the actual solution sometimes the solution takes multiple videos and then um a bunch of extra credits uh which sometimes can also be multiple videos so you got plenty of stuff in here that i can't wait for you to see ah it's great okay uh will the video include the uh those from testing react course uh yeah so let me just show you this is a very common question so we've got testing javascript.com and we have epicreact.dev so epic react has a bunch of stuff on testing react apps oh one other thing i forgot to mention so this build epic react app um is like no new stuff well there is actually a lot of new stuff in here but it's like now you learned all that stuff in isolation let's build it in an app um and so you have lots of the same stuff that you've learned see we're still working on stuff lots of the same stuff that you learned in the previous workshops will be implemented in a real app in this uh workshop and this one is like four workshops um so this take this times four basically or or any of these times four that's how much content there is in there um but yeah so you'll see we have compound components in here as well so you'll see okay here's how you do this in an isolated very contrived so that you can just learn the concept and now let's go learn it in a real world setting um now that you have a grasp on the concept so that's cool and exciting so the question was about testing so we've got a bunch of stuff on testing in here and then in the build react app we have a bunch of stuff on testing there also but it's not nearly what you have in testing javascript um especially if you don't have experience with testing i don't really i give you like here's basically what testing is but testing javascript will really help you understand what testing is uh you build jest in this first one and then we're configuring a bunch of tools um which we do nothing of in epic react so there's no learning about how to configure tools it's just using the tools that have been configured um this module right here um there's this is the one that has the most overlap with epic react but you still have more stuff in here than you do in epic react um we have one thing about cyprus in epic reacts we have a whole module about cyprus in testing javascript so and then we have testing node as well in testing javascript so that's kind of where they're at as far as like similarities um and a fun thing is once you get an epic react license for the next uh couple days you'll have a link at uh somewhere i think at the bottom with a special discount for testing javascript so if you want to buy epic react and then for the next few days if you're like uh i really want to also learn testing super well then you can get testing javascript at a pretty big discount so um yeah keep that in mind okay um how can i use msw for local development do i need a cert no you don't it doesn't uh it's not actually running a server it's pretty rad it makes it really really easy so you can do it all locally completely offline um uh will ever be a bundle with all your courses um i don't i don't have any excuse me i don't have any plans uh for that maybe but yeah like i said you can buy epic react um and buy it at a discount on the first day and then um you'll get a special discount for a couple days after you buy it um for testing javascript so that's i guess that's sort of a bundle um can we know the price before launch um nope that's that's a surprise sorry um what are my opinions on best qualities to look for in new javascript employees that's a great question to ask during my office hours i'm kind of focused on epic react right now i need a tutorial on how i built the epic react dev page oh you'll have to get that tutorial from somebody else because i didn't build the epic react dev page or the testing javascript page for that matter this was built by some amazing folks and very soon hopefully we'll have an about page that will tell you all the awesome people that uh that built all the awesome stuff that you see on epic react uh it's great i just made the content and uh i do some marketing and email sending and stuff uh okay well i'm sold awesome ivan happy to hear that 11 lol oh yeah that's a reference to this we're still working on it yeah building a react app it's gonna be great so like i can't tell you how awesome this is i for my whole teaching career i've been struggling with okay how do i make sure that it's not so contrived that you can't see how it applies practically but uh contrived enough so that you're not distracted by all the domain specific knowledge that you have to have for the example and epic react nails it because it's like let's just do contrived stuff to learn the thing and then let's do real world stuff to apply the thing and you get the best of both worlds it's awesome um i'll take a look at this later carl thanks um we will not dive into tools at all in epic react that's intentional i don't want you to worry about tools in an age where we have things like create react app next.js and gatsby and remix upcoming like these things handle all the tool stuff for you you just need to learn how to write react really well and build your product so no we don't talk about tools um does epic react contain typescript no no typescripts today but i do have plans to add typescript in the future plans not promises um but yeah hopefully someday in the future okay that's it for me that was a good time join me tomorrow let's let's see what i'm talking about tomorrow i forget so live streams epic react.dev live streams and here you can join me when i talk about why you should never use shallow rendering and actually i'll pop that open um because it is oh um i think that that link is wrong or there's something wrong i'll have to take a look at that um and update that yeah that links wrong i'll fix that later um but uh yeah it's coming up it's gonna be great you're gonna love it and uh yeah kind of a little bit on the controversial side i guess but i think most people are coming around um to this but i'm gonna talk about why it's so important to avoid implementation details and stuff gonna be great okay cool thanks everyone hope you have an awesome time thanks for hanging out i'll try to figure out the obs problems uh later and then yeah hopefully we don't have any more problems peace see you tomorrow [Music] you

Channel: Kent C. Dodds

Views: 31,868

Rating: 4.9619451 out of 5

Keywords:

Id: WV0UUcSPk-0

Length: 63min 11sec (3791 seconds)

Published: Mon Sep 21 2020