Nir Kaufman - Refactoring React Apps | React Week RN '19

are we having fun up until now unless you're lying because I'm there because like I said I'm the only thing that currently stand between me between you and lunch I'll try to keep my talk like fun and light so we try to there will be a message so we're gonna learn something hopefully we're gonna take something from it but let's keep it chill you've got enough deep dives in this so this is my title who read the description just to know if I really need to to give you what I wrote alright most of you haven't read the description which means I can do whatever I want basically so we're going are going to talk about refactoring react apps which is kind of tricky because react is JavaScript so today in modern react we kind of write functions so most of our react code is basically JavaScript so talking about refactoring react up is basically talking about how we can refactor JavaScript code to be more so let's give it a try an official introduction this is not me yeah this is a burger so most of you gonna look at me right now talking and think about this unless you are a vegan like me and then you're thinking about tofu but I'm not judgment so whatever works for you we're gonna serve both options this is me as as you can judge my picture always wear this thing even when I'm home sometimes the black one and sometimes the this color depends on the you know on the occasions I walking at five hungry tech I'm a Google GD for web technologies and I'm doing a lot of talks and conferences basically because they like it I'm not getting paid for this honestly with you're gonna try to keep it light and fine as I said you should know that I'm one for the organizers of reaction Waseem it up if you who's been in one for meetups just raise your hand just you know from the local people here is there anyone here who lives in the city doing react and heaven visit to react and we see yet raise your hand raise your hand high so things that happen at reacting YC where you can meet my alter ego Sergent JSX stays in reactor why Sameera so if you want to give it a try we've got at least two of them during August at least but enough about this I'm doing some some other stuff not just scoring I'm an international dancer I'm a carpenter on my free time but let's talk about refactoring so the formal definition of refactoring will be structuring existing code without changing external behavior this is a very important thing to remember because some of us getting like some of us thinking that refactoring is actually changing the behavior I did a lot of times so let's just make sure that we've got to write definition straight ahead who heard the term anti-pattern raise your hand so anti-pattern basically when someone tells you look that's an anti-pattern that's a nice way to say like yeah you can do better but being polite and friendly unless you know the real meaning of anti-pattern which i would like to learn but for me that's basically what it does so our goal is to improve code readability because as we all know we read mode more code than we write that's that's that's a fact that's that's actually a known fact people actually checked it out but if you think about our job we even need to read old code in order to write new code so when you get into like writing a new feature we actually need to read whatever you did or other people did before so reading code is like I think 85% of our job and I just made up this list so all of us familiar with this rule so to summarize this first part after we had some fun get to know each other and understand what is refactoring I think we can sum up our life as developer with this picture or this picture everything I'm gonna show you right now it's very opinionated some light tips and practices that I like to use and like I said before hopefully you take something from this so let's start by the first step which is sounds very basics but I'm gonna I'm gonna tell it anyway know your tools master your tools we're using code code editors using IDs this is our tool most of us didn't took enough time to really explore what we can do with it I mean let's be honest with each other I mean we familiar with the basic details all right so the thing that I'm looking in my code editor of choice basically is free very important features to be able to rename and let my code early to work for me to be able to search easily and smartly and I'm expecting my code editor to be able to generate code so if it's hard for you to remember rename search code generation just think about Romania sausages and car pool and then it's much more easy to remember those words make sense I'm using web stone that's my editor of choice take some time to configure your editor I'm gonna show you some live coding for my tips I'm gonna use webstorm if you like it your your you're more than welcome to come and see some some more stuff just a disclaimer I've got nothing to do with Jade brain webstorm I'm not getting pain from them so so basically I'm not getting paid for my talks and I'm not getting paid for for talking about webstorm I need to check out what's going on with my life look look at these piece of code alright and just like the effect but look at this piece of code let's let's jump to their little let's uh let's look at some real code so basically that's a function that's a login page component and because they read the J sex that I'm returning got a little bit longer or they've got some extra logic that I want to put it it I just played it up to two different functions that return JSX makes us who did it before like with the same convention like render form action render header render whatever but when you look at this code basically we can split it two different components I mean my first tip which gonna sound again very basic but trust me give it a try I like to keep my JSX in one place so when I read this kind of coding instead of like looking for the actual return word world the render actually happening I used to do this to separate to function within the same component and then I just started to say alright so what's the point this is actually a component and function that returns a sex that's a component for me so what I will do is just you know to take this and maybe extract it to another component let's call this component links it's a functional component I'm gonna move it here and that's it can you do it with this code no you can't no I'm kidding of course you can there's a great plugin for it I'm gonna give you a link for for this actually to be honest I've got this code on my laptop sometimes I'm open it up and close it and go back to Webster so my first tip with me I promise to keep it fine in our lunch come on we've got enough deep drives who's Bennett boy at my workshop yesterday so you had enough for me yeah keep a single keep your JSX in a single return function return JSX if you find yourself breaking and generating more components just to split up your JSX you probably want to create smaller components don't be afraid of this get rid of these habits that's my tip my first one we've got some more don't worry destructuring and defaults let's seek that let's take this component for for example so let me go back to my editor and they say this was the item card component which doesn't exist interesting alright so there are few benefits of not using this convention when you pass the prop object you don't really know what's going on inside the prop object obviously if I'm going to destructure whatever I get from the probe so most most of us doing something like this I'm gonna restructure things right here so let's take I don't know let's take the card title out of it the item name out of it and so on make sense I don't like it I don't like it for for for for few reasons first if I call this function now some we're gonna call this component it's not very tooling friendly because it's still the function the signature is still except flops so I don't really know when I'm gonna use this component which props I got even if you call this within JSX and another thing like generally speaking even if I define functions which are not components just regular functions my recent convention will be always the structure for two reasons first I'm changing the signature so I'm gonna say card title like before and item name and now because I actually changed the signature of the function when I'm gonna call this function I'm gonna pass an object and it's very tool friendly and when I'm gonna use this as as JSX somewhere for example card item card again it's a very tool friendly tip so basically you locked your argument into a very specific kind of interface those are the key that you must pass me you pass an object I'm always destructuring the argument right here speaking of this we used to use a default prop hopefully to a write code that would wouldn't fail if we won't pass any argument so another best practice another part of my refactoring practice is always if I see props I'm going to destruction it and I'm always gonna put my defaults right here on the top in this use case it's just you know empty strings I did a lot of things just with a just with a very simple refactor I know which arguments I'm expecting for I've got my defaults it's a very tooling friendly way to define functions so that would be my second tip always this structure don't just best the process it's just gonna make your life easier the code more readable and your code editor or more friendly to you sounds good you don't have to agree yeah but you should because that's the way it works I'm asking sounds good and you yeah or not who find this tip useful I've got prize for you and now you're now you're raising your hand you were the first one this is the tea bed but an expensive one from the speaker room yeah it's a it's not that's not a regular one another one that we gave you you like that's the expensive one when you keep upstairs you're welcome don't use it right now just or just you know use part of it and save it for later trust me that's a great tip bag so well you destructure everything you don't have any surprises you've got better tooling support and we're happy easy reef active teeth and everyone happy next reusable stateful logic let's do something a little bit more sophisticated so the trick is now that we've got hooks that we've got a nice I don't know if it's nice but we've got a way to extract our stateful logic outside of the component we need to practice our mind to be able to identify those repeating logics which is not that obvious sometimes so let me give you an example I'm going to share with you the the process that the way that I'm thinking about it hopefully it would it will be useful for some of you so let's take this component for example so I've got here a simple phone I'm gonna take away name I'm gonna stay with email and password and let's say that I want to implement some kind of submit so I can go ahead and create here a function or I can do something like this come here on click submit and because this function doesn't exist I can say create function he asked me well do it here and I set myself time but I don't like the functions to use function so I convert it to a variable hold an arrow function I'm not trying to show off with the editor I'm trying non line I am but I'm trying to make a point all right I doing all of these magic tricks because I took the time and learned my code editor doesn't matter which code editor so when you see me refactoring I'm not spending time of creating and extracting am letting my code editor works for me trust me that's valuable take your time take a weekend or get a life that's what I'm doing during weekends alright so we've got we've got submit and let's say that I want to manage some piece of state here so I've got two in put fields I'm not gonna write it all but it's probably gonna look something like this I've got my you state here which apparently after all this show of my outer complete stuff to work yeah what a disappointment so you stayed and let's say that this you stayed gonna use me for the email so by convention that's gonna be set email and the same for the password and that's gonna be set password and then we can come here and said alright when you submit do a log let's just lock the email and the password and here on change go ahead and this is a very bad practice by the way but just for the example set email and what we want to pass here basically something yeah I can take the event here I can distract the target out of the event and I can then use the target value which probably gonna walk alright make sense I've seen a lot of code like this there's potentially there's nothing wrong with this code it just got few few things that we can make better first if you've got another from this is a registration form but if you got another phone probably you're gonna copy this code now when you first see this you say oh yeah that's not a problem that's a local state that's exactly what I want to do that's the reason we've got this new state hook so if there's a registration phone I've got a login form or whatever I'm gonna use those pieces of state and that's fine but if you train yourself to see the pattern you actually there is a very very very interesting thing right here I'm passing a callback to the event to the own change now when you press a function here you get the event object right here so I took the target out of the event object so basically every input gonna have the same function whatever I define it in line or as a separate function agree with this I mean that's the logic you've got an event handler you passing something so the logic is the same you always set if value as an event handler you always got this you state let's refactor this one so first my first step of refactoring this will be I don't want to manage separate fields I want to manage a user object so I can just create an object which is totally fine all right your state is not restricted to you to just primitive values I mean you can use an object you can handle an object and now I want to do something like this let's do a Const set field film set field it's always gonna get an event here so I can destructor the target and then I can use this set user and I want to pass a new object that contains everything that I had on this user before and then I want to distract another object or just you know just put here an object actually I think I'm gonna use something else think I'm gonna use the object design on this case but it doesn't really matter I can take from the target I can take the name of the field and I can take the value of the field so now here I can just cancel out the user and all of this which are basically the same I can change to that field that field I don't need this I don't need this can remove all of this as well set field the only thing I need to do which is anyways a good practice is name and this one is a user name and this one is a password so this gonna be my first step so I think it's look cleaner it's I mean made my code shorter it's more descriptive because they use you know I used a descriptive name like user and set user or just fill some form of state I don't need to repeat my code but that's not enough I mean we've got here something that can I can actually reuse in other forms as well so I want to take all of this and remember we're refactoring for better readability so it's actually gonna stay the same doesn't matter but I can take all of these constitute their set user set field I can take it away from this component and I can create a custom hook I'm gonna look like this so use form form data and update form data because I don't know it can be whatever form I'm gonna use state you can you can even pass me an initial set or I can initialize the form then I've got the handle feed feel they're gonna get an event I'm gonna take the target I'm gonna build this object and I'm gonna return you phone data and handle field so now if I want to use this on my register form which I don't remember the name I can do this const equals use form and I want the phone data I want the handle field and if you already got some logic written here and you just refactoring already use this set field and I already use user here you can just rename it right here you can say from data as user and handle field as what was it it's that field it was that field yeah so now the next step of refactoring will be custom hook which is not a big deal when you think about it I just took whatever I wrote in the component and extract it to another function but this whole flow of seeing those button it takes some practice and some Union you need to feel comfortable about this thing of hooks but the tips here is not to teach you about hooks it's about best practices it's about refactoring so from my custom hooks I'm always returning an object that's the same tip like destructuring objects all right because I want to be able to autocomplete here to be a tool of friendly and know exactly what's going on so and you can always rename it if you need it it's added some more complexity so I wouldn't I wanted to rename the field I'm gonna save it as a set field all right defined conventions is something that I can just you know we can just talk about it for a slight second basic gonna change your life you've got a lot of way to define functions for example you've got at least way to export some code from your component I'm seeing a lot of code is part of my job make up your mind and find no I wasn't intent to sell anything I wasn't I know it sounds like the F world but I was anything to say Firefox make up your mind find a convention stick with one its an arrow or function or whatever now I've got plenty of those small tips so what I'm gonna do because they don't want to hold you away from food I'm gonna do two things we're gonna stop for now with this one we're gonna give you some nice references but I'm gonna be here obviously the entire day and after the conference sitting right outside in our booth five hungry tech if you want some more tip you're gonna get the code you're gonna get the slides obviously and I've got a bunch of other slides that give you those nice recipes so if you like the way that I'm going with this you're more than welcome to come get more information get more resources all right refactor often do this help yourself it's not such a big deal it should be part of our work we factor together when you're working on your own you can never know if you're walking if you're a freelance and if you just got started use the community it was your friend from the meetups send emails people like to help each other there is at least five groups of people sitting together each week in New York and coding together actually this is the first group coding from 9050 this is a real authentic picture all right it was a long ago now we've got more space and we can sit more comfortably but this is a group code refactoring read a lot of code I'm going to raise you in a second don't worry read a lot of code just read it as a book read it when you when you drive the bus when you come you just read other people code read this book if you're not familiar with this book this should be your Bible instead of think one of the best books ever take a picture of this with this book it's gonna help you alright you can read my book it's not gonna help you but you can really do you like if you want to get better with CSS if you are working with vs code that's fine get this via scott plugin it's got those nice features of refactoring and extracting it was built in waistt if I'm not getting wrong so get this one you've got you've got your options anyway where was the thank you here it is if you want to stay in touch this is my email feel free to use it if that's not enough that's my phone number a real phone number you can try it all right you can make it call if that's not enough that's my social security now I'm kidding go eat something have fun talk with me later if you like steal [Applause]

Channel: React Week NY

Views: 2,217

Keywords: Nir Kaufman, React Apps, Refactoring, react, react.js, react nyc, react week, rwny, react ny

Id: Hupa8uXo8zU

Length: 26min 38sec (1598 seconds)

Published: Mon Aug 12 2019