Video details

JavaScript prerequisites for React (hooks) | Jad Joubran | reactjsday 2021


"In this talk, we'll cover the JavaScript concepts that you need to know prior to learning React (hooks). This includes: Array destructuring, Object destructuring, immutability, closures, and more. The talk will also cover how these concepts are used in React components." reactjsday will be back soon, keep in touch! Twitter @reactjsday Newsletter:


Oh, God. Hello, and welcome back again. So our next speaker for the day is Jo Jo Bran and a bit introduction about him already. He's a free hand slip consultant based in Amsterdam and in the last two years he's been focusing a lot on teaching developers programming JavaScript and React through his online courses. And welcome, John, it's really pleasure to have you and the stage is over to you. Thank you. Thanks for having me. Hey, everyone. My name is Chad and I'm going to talk to you about the JavaScript prerequisites that you need when learning React hooks. So as you may know, React is the front end framework or a library. And like any other library or front end framework, it builds on top of JavaScript concepts. So I think it's important to be able to recognize those JavaScript concepts so that if you're struggling with them, you can take a step back and know that you need to study these concepts separately from React. So the stock will cover these JavaScript concepts for React hooks. Thus, I won't be covering any classes if you have any questions throughout the talk. Don't forget to put them in a chat and I'll get to them at the end. So these are the five concepts that I'm going to talk about. You have the JavaScript concept and then and the red or Orange color. You have the react usage. So I'm going to cover automatic semicolon insertion and how this affects returning JSX going to talk about object structuring that we're going to use in Props, a radio structuring that use a lot with the US state hooks immutability that affects your state updates and react for erasing objects and finally closures, which is most likely something you're using without really noticing. Often times when you have state and events in React to. So let's start with the first concept and that's ASI automatic semi colon insertion. Think you already know that semicolons are optional in JavaScript. You may be writing some code and you forget, let me call in and it works and that's fine. However, there are some scenarios where the interpreter for JavaScript will automatically insert some columns for you automatically. This is called ASI automatic semi colon insertion, and some of the most important ones are after let and Const after important export after keywords such as continue, break and throw. But the most important one is after the return keyword. So let me show you an example in JavaScript. By the way, the slides will always show you something in JavaScript and then at the end show you how it affects a react component or a reactive supple. So if I write this code function, get H limit and I define a variable that H equals 18 and I don't put the semi column. This is fine, but then I have a return and then on a completely new line, I have the age. What do you think this function will return? It's going to return 18 or something else. So this function will return undefined because of the ASI because of automatic semicolon insertion. So after the return as, the interpreter for JavaScript will automatically place a semi colon. So this ends up with a result we didn't expect we end up with something that we didn't expect as a developer, why am I getting undefined? I'm returning age. So that's because of the ASI. So to fix that, you can of course, put the age on the same line. That's most likely what you want. But a lot of the times, especially in React when you have a very large return because we're returning JSX elements, you do want to keep it on another line, and so for that you have to put parentheses as long as you have the parentheses. The opening parenthesis on the first one as soon as you have the parents is right after the return on the same line. Then the AI will not place a semicolon over here because it knows that you are returning an expression, so it has to wait until the closing parents. So this is why this code works. So if you want to return on a new line, you wrap it to the parents, and then you can have multiple lines. Now let's take a look at an example in React. So I'm importing react from React and I define a function app. So this is the app component and I return and then on a new line, I return the main HML element and then the H one. But this will not work. This will return on the fine, and you will see a warning about it in console, because if you intend to not return anything from your component, you need to return null. But anyway, in that case, this is caused by the ASI. We didn't mean to return null or undefined. So to fix that you have the parentheses, we put the currencies over here and that's going to work. So I think you've probably seen this code over and over again. This is another example. You have the parentheses and then you have to react fragment. And maybe you're wondering why do we have these parents fees? So this is because of the ASI. Now on to the second concept, and that object is structuring. I don't know if you can hear some purring, but there's a cut on my lock right now. She doesn't know react. So object is structuring is another JavaScript concept before object is structuring, let's assume we have a point object that has the latitude and the longitude key value pairs. If you want to read both the latitude and longitude, you would define a variable count flat equals point. The plot cons longitude equals point of LNG with object structuring, you can do all of this in one line. So I've commented out the previous code. Now we use a Const and we use the object restructuring syntax, which is curly braces, and then the keys that we want to plug from the object point so constant and then get the latitude and longitude from the point object. So these two codes, the commented one and one below are the same but just different syntactically. And this is object structure. Object structuring also has an additional feature which is giving default values for keys that may not exist. So in this example, if I de structure the latitude, the longitude, and the elevation, and I give it a default value of equals zero. When the elevation does not exist in a point, then we will get the default value of zero. So this is the JavaScript concept. Now let's take a look at react. Your functions receive a props and the props is always going to be an object, and that's even if you're up, maybe use the pointer that's even if your app over here, that even if your app over here doesn't have any props. So the props will be an object and it's going to be an empty object. Now the second example where we have where we render an output, the title equals my app, and in that case the props will still be an object, but we will get a key value pair for the title. So it's an object for title. My app. And let's say we just want to render this in a Div. We render a Div with prop stop title. Now this gives us the opportunity to use object structuring, and if you look at other people's code on the internet, you will very often see this so constant and we de structure the title from the props, and you can do that because the process is always going to be an object, and then you can immediately under the Div with the title for it. So let me give you a before and after. This is before you render props the title. But then if you know you're going to use the title sever of times you can structure it and then just use the variable tack. You can even go a step further and you may not like this. It's a bit opinionated. Some people don't like this. Some people like this you can structure in the function arguments. So over here we don't even define a variable crops we immediately structure and the function arguments. This is a little bit tricky because as soon as you start starting four variables, the argument syntax becomes quite complicated. So you don't have to use this. But I'm quite sure you will see this someday when learning learning react. So it's important that you understand this syntax. So we have so over here we immediate the structure the title from the props, but in the argument. So let's call this pretty much similar to this one, but just shorter. Now let's take a look at another example. When you're building your kids. For example, let's say we're building a button. So a custom button function component. So this is why it's button with a capital B and this button will return an HTML button element, and then you take the class name from the props, and you render that you take the disabled States from the props and you render that and then the text or the text content. You render that as props, the children. This is something very common that you might choose one building your component. There's a problem with this one. What if you need to provide a tab index? What if you need to provide another prop that we didn't think about? You can do that with the structuring as well. So because the props is an object, you structure from it the children. And there is a way to structure all of the other key value pairs that were provided. You do that by using the dot dot dot and then whatever you want to call it, I call it trust the structure, the children and all the other props, all the other key value pairs that were provided and put them in a rest. Horrible. And now I can render a bottom with the children, and then I take all of the other key value pairs and I spread them on the button on the button. So that way, if the user passes a class name, the user passes a tab index, a disabled state, an ID. All of these will pass into the bottom. And this is often useful when you're building your iced because you will have a button component that renders the button that fit your own custom style and maybe custom behavior on to the third one. And that's a Ray structuring. So Rad structuring is a little bit similar to object structuring. I would also say slightly easier because with restructuring, you're pretty much relying on the index of the items that you're structuring. So let's say we have Costco ordinance. It's an array of two items. Instead of reading the latitude which is cordon, so zero longitude, which is Gordon of one, you can structure them in one line cost. And now we use the arrow syntax Arad structuring latitude and longitude. We structure that from the array alist according. And then if you can log the lot, you will get the first item of the urvey. So that's the JavaScript concept. And now I'm going to show you the same thing. But let's assume we have a function get coordinates that returns a hard coded array of coordinates, for example, 52 point 36 and four point 89. Since the guest ordinance function returns an array, you can restructure the result of that array on the same line. If you know that it always will return in a way of two items. So this is why the syntax possible Const. They structured the latitude and longitude from the get coordinates result and the get coordinates result will always return an array of two items. So if you've done a little bit free talks. It's probably very similar to you because of the US state function. This is a pseudo code of how the US state function looks like extremely over simplified. So you can say also wrong. The function U state will have the current value, and we'll have a function that allows you to update that. And then this function always return. An array always returns an array of two items, the current value and the function that allows you to update. And this is exactly why. When we use the US state function or the state hook, we structure the account and the set count. So this is an example, but you always structure the current value and the function that allows you to update. So one example is count and set count seconds and set seconds. And yeah, that's because it's always going to return the current value and array of the current value and the functions that allows you to update that for. So now let's take a look at an example of a component. So we import react. So you have to import React because all the GSX is using react create elements. So this is necessary whenever use TSX and we use the name export to use state from reactor. So. And that's how we have component stopwatch. And at the top of that component we use the hook you state, we give it a default value of zero, and then the US state will always return the current value and a function that lets you update that and you can call them whatever you want. But if you call the first 1 second, you will most likely need to call the second 1 second, because then you know this is the function that updates seconds. And another example is the button component. If you want to have some kind of enabled disabled state, you can call the US state talk again and you don't have to pass in a number. You can pass boolean and then the structure disabled and set disable this value and set disabled is the function that updates it. And one more example here we build on top of the previous example. But when you click so we added an onclick, we call the function handle click and this handle click will call the set disabled function. So the function that is given by the state hook to update the value of disabled. And we use the exclamation Mark disabled. And this is a way for you to invert the false into true or the true into the false. So this will give you a button that you click on. It's not disabled. You click on it becomes enabled, it becomes disabled, and then theoretically, if you click on it again, it should be enabled, but you can't really click on it anymore because it's disabled. Now on to the okay immutability. And this is a JavaScript concept that affects react quite a lot. So I think this is a very important concept. Let's take a look at these examples. If you take 15 and you compare it to 15. So number 15, number 15 and we have a triple equal in between. You get through and we expect that string Hello, triple equals to string. Hello, we get through as well. True triple equals to true. We also got through because these values are exactly the same. However, it gets quite messy when you compare an empty array to an empty array. So you get false. But how is an empty array not equal to an empty or an empty object not equals to an empty object or an array of ten not equals to an array of ten? And this may look very confusing, but there's a way to simplify this and explain it that when you create an array with the square brackets, you're creating a new instance of the array class built in array class in JavaScript. And when you replace a Ray triple equals to array with new array. So when you play square brackets, triple equals to square buckets with new array triple equals to new array. For this starts making sense because each one of them is a new instance is a separate instance of array. So this is why they're not the same. So we're not really comparing the values inside. We are just comparing if they are the same instance more or less and the same thing applies to objects. Now why am I mentioning that? Let's take a look first at a wrong example in rear. Let's say we have in our component that has a data state which is defaulted to an empty array. And then we have a button. And when you click on this button it says add ten. So this should add ten to the array. So on click, we call the handle click function, and in the handle click function, we take the data array and we not push to it ten. And then we call set data, and then we pass the data to it. Keep in mind this is the wrong example. It won't work. Actually, if you try this and you click on the app then and let's say you were rendering the data. So at some point it will not re render you will not see the value the new value of the array. So it will. Yeah, we have another rerender. So let's take a look, take a look why? To understand why we have to Zoom in on the set data function. And again, this is extremely over simplified just for the purpose. Just for the purpose of explaining. Let's say the state is initialized to an empty array. So this is created by us state of an Nt array and then the set data function. We'll take the new state. So this was the result of data that push ten. When we clicked, however, react will start by checking is the state triple equals to the new state. So it's the old state triple equals to the new state. And if the answer is false, it will immediately quit and it won't rerender because reacting that the state has not changed, and in case this doesn't return true, then it's going to continue. It's going to store the state for the next time and it's going to act as react Don to rerender. So now you might be wondering why is react using triple equals? So why does it use state triple equals to new state? So that's because React will have so many components and it will need to check quite a lot of children a lot of time if they have updated and they have to use the fastest option that is available in JavaScript and that's triple equals if they were to do the deep equal, which doesn't even natively exist in JavaScript, you'd have to have a library for it. All of our apps will be extremely slow now because we are tool is using this triple equal. We cannot. We cannot do push, because when you're pushing because when you're pushing on that already existing array, you're basically comparing the same instance of the array, and so state and new state will be the same instance. So in that case it's always going to return true. So React will always think, oh, this array, this state hasn't changed. So I'm just not going to re render. And this is why the data push ten doesn't work. Instead of dot push, you will have to create a new copy of that array. So you use the they use the spread syntax. So you spread the numbers into a completely new array and you add the number next to it, for example, four or ten. And now the variable numbers and results are completely different, and this will let react. Now that we've actually changed, the state has changed and I need to re rent. So fixing our previous example set data instead of calling data push, we should never mutate the original array. We should instead create a new copy of it. So if you want to take a like a short recap of all of this, never mutate the array. Always create a copy of the array or a copy of the object so that React can detect it. It has changed. And that's because internally it uses the triple equal to compare the previous state with the new state. Now on to the final one. That is closure. So it's a closure. Closure is when a function contains another function. So you have a function definition. And inside of that function, you have another function definition. And in JavaScript, whenever a function exists in JavaScript, it will always have access to its outer scope. It will always have access to the scope and the parent function. And this concept is called closures. So closure is not something you decide that you want to use, and it's honestly one of those concepts that seem complicated but in reality it's really not complicated. So at least the most common usage you can get into complicated scenarios, but most of the time you will not really get there. So it's not something you have to enable or decide to use. Whenever you have a function. And inside of that function, you have an inner function. So another one, the inner function will have access to all the variables and the functions defined in the outer one. So what does this have to do with three acts? Well, as soon as you use events inside React folks, you are defining the function inside a function. So the handle click function is defined inside the stop watch. And so this is a closure, and that means that the handle click function will have access to the outer scope. So of the parent function. So handle click can actually access all the variables and functions inside stop watch. So why do we care about that? Because hundred click needs to use seconds and set seconds. And this is possible because of closures. So foreclosures, that's pretty much all you need to know in the context of React most of the times it's going to be more than enough. So in conclusion, my opinion, it's always better to understand the JavaScript concepts before diving into a framework, because if you had no idea what array or at least just knowing that this concept exists, if you have no idea what a ready searching means, that it's going to be confusing to use use state, why does the syntax look like this? Is this a React feature or is a JavaScript feature? But of course I don't mean you should spend years learning JavaScript. No, but just make sure that these concept exist. Spend a little bit of time on them. Go to React. And if you get stuck, you can go back to them and then hop back into React. Alternatively, if you decided to start with React first, when you encounter these JavaScript concepts, make sure to take step back and learn them outside of the framework that you're using. All the examples that I use in this presentation are taken from React tour up. It's an interactive course that I've developed that teaches React step by step and around 80 chapters. So you really go from zero all the way to building an app with rear router and everything. So I hope you enjoyed the talk. You can find my slides on this link and you can learn React interactively on the link. Thank you. Thank you. Thank you so much. That was really an insightful talk because I myself work with Hooks a lot and React. It was really an insightful talk. Thank you very much. Awesome. I think there's quite a lot of question. I saw that shopping. There is a lot of question. Yeah. Okay, so let's go with the first one. So the first question is, should I learn classes or can I stick to hooks so should I learn classes. Or should I stick to hooks? If you're learning React like right now in 2020 or next year 1021, I would recommend you start learning with hooks first because it's easier, especially if you don't have a solid foundation in in classes. So I used to find classes easier. But then after teaching React, I realized that for for most people that don't have a strong foundation, plus is easier to work with hooks. And then if you will work at a company that is using classes, then you can learn classes after hooks, and it's going to be easier because you understand the concepts of free art. But then you have to learn an extra layer four classes. The next question we have is what are the JavaScript concepts that I should be comfortable with? The for learning React hooks. So so functions anything except classes. Okay, so there's also some non JavaScript things, things that are coming from the UM from the browser, for example, fetch. I think it's important to know fetch because that's something you're most likely going to use. And react. Function definitions, the ones I mentioned here. So ready structuring object structuring closures immutability. So how do I immutably add something to an array? How do I immediately delete something from an array? Same thing for an object and that and cost, though. I think I saw a question about Far, though it would also work with Bar, but you would avoid quite a lot of problems if you just stick to Latin Const. Thank you for that answer. And the next one we have by Federico he's asking, Why should I use constant instead of war? Yeah. So the short answer. So why should I use let and content so far? The short answer is that you will not fall into unexpected, unexpected Calchas with VAR because VAR has hosting. So if you define if you console log a variable before defining it, and then we define it afterwards. With Far, it will actually log is undefined rather than break that's because the interpreter is hosting it to the top, which means it literally moves the definition all the way to the top. And this is a confusing concept for variables. I think the only place where it makes sense is for functions. Functions are also hoisted, which is why if you define a list of functions, you can call them before defining them. And this apparently is something we expect as programmers, but with Latin cons, there's no hoisting. So then you have this expectation that I define it variable and then have to use it afterwards. We have one more question that says do concat has a linear on time complexity, which immutable data structure. Do you advise for one log in which looks up, reads and writes both? To be honest, I'm so by the algorithms and discount of performance. So I do specialize in what performance, but not this guy not in for big data so I don't really know the answer. I would advise, though, if you're not working with a huge data set to not worry about it, if you're working with 100 or a thousand, it shouldn't be a problem. Unless this is something running on a key press event or something running extremely frequently. But even in that case, I would recommend debouncing it. Thank you. I think that's all. We don't have any other questions. I would like to thank you so much. That was insightful talk, and we have a lot of great comments that they had learned a lot. So thank you so much for. Thank you. Oh, my.