Up next in 10
Using Hooks in React by Vipul Jain || React Virtual Conference
7K views
Nov 9, 2023
In this session you'll get to learn the following: 1) Hooks at a Glance 2) Using the State Hook 3) Using the Effect Hook 4) Rules of Hooks About Speaker: Microsoft Certified Technology Specialist with 10 years of experience. Competency in developing applications in SharePoint 2016/SharePoint 2013/SharePoint 2010, Office 365 (SharePoint Online), Azure and have good exposure to design and software development. Expert in SharePoint Framework (SPFx), MS Flows, Teams, React JS and Modern workplace. C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com/
View Video Transcript
0:00
So, hi everyone, this is Vipul and today I'm going to talk about hooks in React, that how
0:07
you can use hooks in React, what is it all about? And from a developer standpoint, I'm going to go very basic, starting from basic, what
0:17
are the different types of hooks you can use in React? So just to start with a little bit about myself, my name is Vipul
0:23
I have 11 years of experience around Microsoft Stack of technologies, and front-end technologies
0:28
as well, including React, React Native, and so on. I'm a C-Shop Corner MVP and also a
0:33
daily chapter lead. These are some of my credentials where you can get connected with me. I'm also
0:38
an author of one of the books, which I have written very recently on SharePoint Framework
0:42
and the title says, Getting Started with SharePoint Framework, and it's available on Amazon as well
0:48
So directly jumping to the agenda of this particular session, the agenda includes, I'm
0:53
going to tell you about what are hooks. So how can you hook up with React? Just kidding. So how
0:59
you can use hooks, what are hooks, why you have to use it, where you have to use it, and when you
1:05
have to use it. And then I'm going to talk specifically about two important hooks. Those
1:11
you can say, these are the basic hooks. One is the state hook using the use state and the effect
1:16
hook using the use effect. And then I'm going to, at the end of this complete session, I'm going to
1:22
talk about some of the rules of the hooks and what are the benefits along with some demo
1:27
So let's get started very quickly. So if I talk about hooks, so first we'll understand what are
1:33
React hooks. So I'm going to share some information what was there before the hooks was introduced
1:38
because let me tell you the hooks was introduced and the React version 16.8. Before 16.8 there was
1:45
no hooks, there was concepts like render props, HOCs, that is, high order components, and so on
1:52
So what was there before hooks? And then I'm going to talk a little about what is there in the hooks
1:57
now in the current situation, and how can you use a hook in a React application? So basically
2:04
to start with, React hooks, they represent, I'll say, a huge step forward towards building a fully
2:10
functional React application with minimal use of class components. It happened because in the
2:17
previous past that people started and the developers started using classes more as compared to the
2:22
functional components. They were more concerned about the class components. So managing state
2:28
and lifecycle events with hooks is much easier as compared to the class components because they
2:35
require less code, they are more readable, and then doing the same thing with the React
2:40
class components, they are pretty easy. You can say that hooks are how JavaScript was always meant to be programmed because
2:48
JavaScript is just a basic function, rely on the basic function components as compared
2:54
to the class components. So React hooks basically adds the ability to manage React state at the function level
3:01
an interface with React lifecycle events in React functional components. Let me tell you that it does it in a very clear
3:11
very precise, composable, and in a very declarative way. If I talk about before hooks
3:17
I was talking about before hooks and after hooks, that was just an introduction
3:21
If I talk about before hooks, there were things like render props
3:25
there were higher order components because React does not offer a way to attach
3:29
you can say reusable behavior to a component. So if you have worked with React before for a while
3:37
you may be familiar with patterns like render props and high order components, which we say HOC
3:44
they try to solve the problems related to state management and lifecycle events
3:49
But the problem with these patterns that they require you to restructure, you can say your components
3:56
in a React application when you use them, which becomes sometimes very cumbersome and it's like a hell and make your code very hard to follow
4:06
Because if you look at a typical React application in React DevTools
4:11
there is something you will find which is called wrapper hell of the components
4:15
because it is very much surrounded by providers, consumers, high-order components, render drops and other abstractions
4:23
So all these problems were solved by React hooks by Attaching reusable logic to your components. You have to just redesign and recode your existing components
4:35
Existing you can say the class components into the functional one and you can use the same state and lifecycle method inside a react functional component
4:45
So that was just a brief introduction that what are react hooks and what was there before react hooks before the react
4:52
16.8 version and what is there now. Now the other question is that when would I use a hook and
4:58
in what situation you are going to use a React hook. So I will say if you write a function
5:06
component from a developer standpoint, I'm just telling all these things from a developer standpoint
5:10
from the very basic things that if you write a function, if you write a function component
5:14
and realize you need to add some state to it because before 16.8, before the hooks were introduced
5:21
it was not allowed to manage the state in a functional component with this hooks concept
5:28
in place after the 16.8 version or you can say with the advent of 16.8 version you can now add
5:36
some state to it previously you had to convert it to a class because if you have to convert
5:41
a function component to a class component it was very complex it was very difficult in nature
5:46
because you wanted to add some state to it. Now you can use a hook inside the existing function components
5:54
which you have already developed in your React applications. So moving ahead, what is again, hooks at a glance
6:02
I'm just continuing that hooks, they are the new addition in React 16.8 version
6:08
They let you use a state and other React features without writing a class
6:14
So again and again, I'm just repeating the same thing that now you don't have to write a class component in react application from 16.8 version which has
6:24
already been introduced in react long back now you can use or write function components because
6:30
i totally understand i'm also a developer from a developer standpoint writing a function just
6:35
writing function function name and so on or just declaring a constant as a function it's pretty
6:41
simple and straightforward as compared to creating a class then declaring some constructors
6:46
writing the super keyword and so on so forth so that's why react team or you can say the facebook
6:52
team also realized it that it's better to be in the market by introducing something called hooks
6:58
so that's why the hooks lets you lets you manage the state and the life cycle inside the react
7:04
function components. And then they also allow you to reuse the stateful logic without changing your
7:11
component hierarchy. So by that, what I mean that if you have already written a React application
7:17
let's say for example having multiple class components instead of the function components
7:21
so you can reuse that stateful logic in your function components At the same time Hooks lets you split one component into smaller functions So by that what I mean that if just consider a tree where you have a parent and
7:36
multiple child, so just like a component hierarchy you are maintaining, so hooks lets you split that
7:42
component into small, small functions so that you can manage the state in those functions based on
7:48
only what pieces are related and what all those pieces which are unrelated or not related, you
7:54
don't need that anymore in your react application so by using hooks you can do that as well
8:00
now coming to directly that the most important or you can say the basic hook which everyone should
8:07
use and should start using in their react application is called the use state please
8:12
remember all the react hooks start with the keyword use use they start with the keyword use
8:19
So if I give you some examples, it's like use state, use memo, use reducer, use effect, and so on and so forth
8:27
So these are some of the basic hooks. And one more important, use context. I forgot that
8:32
So use context, again, just to get the context of the user in a React application, a more important hook has been introduced
8:40
But this is today's agenda. I'm going to talk about two important hooks, which are very much basic in nature
8:46
and which you can use in any React application in the function components
8:50
So let's talk about this user state hook. So what is a user state
8:55
A user state hook, it's a hook. As I told you, it's kind of a hook because it's already telling you that it has a keyword use
9:02
So user state is a hook that lets you add the React state to function components
9:07
So now, as you can see on the screen, there are two code snippets example on the left-hand side and on the right-hand side
9:13
On the left hand side this is a useState hook and on the right hand side you can see the equivalent class examples
9:18
which all those who are not using hook as of now in the react application
9:23
You must be writing these class examples or class components So this is just a equivalent class example of the same useState hook which I have written on the left hand side
9:33
So if I talk about the useState hook So the three important things which we need to know in this particular example that what does calling useState do
9:43
So if you are calling this useStateDo over here, so what it is doing, what do we pass to useState as an argument
9:49
So what you are passing to useState as an argument, whether it's a variable or what is it, we'll be talking about that
9:55
And along with the demo as well. And what does useState return? So what is returning it to you
10:00
Because if I talk about the equivalent, because if I talk about the equivalent class example
10:06
so in the class example, you can see that you have to write a constructor
10:10
There is a super keyword. Then you have to initialize the state with this.state
10:15
And then finally, you have to set the state by using this.setState keyword
10:20
This is a typical React application by using a class component. But here in this particular hook session, we are talking about how to minimize the code
10:30
to make it more readable, more clear, more composable, and more declarative way
10:35
So here is the equivalent of using useState. So here what I'm doing, just importing the React from the React library and using the useState hook
10:43
And in the particular app, which is the example here, the component name is example
10:47
This is, you can see, the equivalent function component. You see here, there is no class on the left hand side
10:53
So as compared to this class component, I'm not writing any class component
10:57
Because for using hooks, you don't need to write any class. All the state management lifecycle events can be managed inside a function component
11:05
And that is the beauty, I will say, of using hooks in React 16.8, from the React 16.8 version
11:12
So let's go through this code. So what I'm talking about here is essentially what does calling uState do
11:19
So essentially what it is doing is it is declaring a state variable
11:23
And here you can see the variable is called the count. Our variable is count, but we could call it anything else
11:30
For example, let's say any fruit name, mango, banana, anything else. It's up to you
11:34
It's a variable name. I have called it as a count. The variable name I have given it as count
11:39
You can call it anything else as well. You can say this is a way that how
11:44
user state is preserving some values between the function calls. I will say that user state is a new way to use
11:53
the exact same capabilities that your this.state, which was doing in the class component
11:58
this is having the same capability by using the use state. Because you can see over here
12:04
You are initializing the count with zero in a class component. On the right hand side of the screen, you can see the class component is initializing the count variable with a numeric value zero
12:15
The same thing I'm doing with the use state zero and my variable name remains the same that is count
12:20
So you can say that use state is a new way to use the exactly same capabilities
12:26
which is given in the class component, which is given by this dot state, which is provided in a class
12:31
You can say normally these variables they get disappear when the function exits from
12:38
here but state variables are preserved by React. Now the other thing is that what do we pass to useState as an argument
12:45
What is passed here to useState as an argument? So I will say that the only argument to the useState hook is the initial state
12:52
No other argument you need to pass to the useState. you can say only the initial state you have to pass to the use state because unlike with
13:04
classes the state does not have to be an object here. You can see the state here is treated
13:08
as object but the state is not treated as an object in the use state. We can keep a number
13:14
you can keep a number or you can say string if that's all you need. So in this particular
13:20
example I just wanted a number so that's why I kept as a number because in this example
13:26
I am showing that how many times the user clicks. It's a counter application which I have developed
13:31
So it is telling you that how many times that particular button or that particular counter
13:37
is clicked. So I'm passing zero as a initial state for our variable. If you wanted to store
13:43
two different values in a state, you can call the user state twice as well. So that's not a problem
13:48
So now coming to the use state hook again. So three important things related to the use state hook
13:57
First, the declaring the state variable. Second is reading the state. And the third is updating the state
14:03
These three are the important things which you need to understand about the use state hook
14:08
So first you have to declare a state variable which I did as a count. Count I use as a variable for the use state
14:15
Then you have to read the state, reading a state and then updating a state
14:19
So I have made a very small comparison over here between the class and the function component
14:24
And after this, I'm going to show you with a demo as well that what we are talking about
14:29
So if I talk about how you declare a state variable. So in a class, you generally do this by this.state count equal to zero
14:38
So this is a way you define a variable or declare a state variable in a class
14:43
But if I talk about in a function component, we don't have any concept called this. So there is no keyword in a function component
14:50
So like let say we say dot bind this so there is no this in a function component So we can assign or read this dot state instead we use a used state hook and we pass the count variable or the count value zero in the used state hook
15:07
And now the second comes is reading the state. How can you read a state in a used state hook
15:12
So generally in a class component when we want to display the current count in a class
15:16
we read this.state.count. So in the previous example, you must have seen that I was using this.state.count and
15:23
I was incrementing it every time by one when the user will click on that counter
15:28
But when it comes to function component, we can use count directly. So I have used the count variable you can see here, setCount, count plus one
15:36
I have used the user state variable that is a count directly in my setCount function
15:42
So that's the real beauty I will say of using the useState because it is making your code
15:47
very much cleaner, very much you can say declarative instead of writing very complex and bigger code
15:54
inside a class component. And the last but not the least I want to talk about how you can update
15:58
that state. So very much interesting before hooks I was also using the class components but nowadays
16:04
I am very much fond of the beauty of the React developers that how they have developed these
16:10
hooks and in the long run how it is helping the developers out there. So if I talk about a class
16:16
component we need to call the this.setState. So going back to the previous slide you see here
16:22
I'm using this.state.count for updating the state this.setState. But in a function we already have
16:29
a setCount method and count as variables so we don't need this. So you see here in a function
16:35
component by using the useState we already have a predefined method which says setCount. So that's
16:42
It's all about the use state. I'm just directly jumping to the demo
16:46
I just want to show you a very good demo related to the counter which I have developed
16:50
You see here, I am in ID. You can use any ID of your choice
16:54
This is a Visual Studio Code. I have written this use a very small React application
17:00
by using use state code. As I mentioned that I'm using a variable which is count
17:06
and initializing it with a value zero, I'm using a set count predefined method
17:11
which is available in function component. And on the click of a button, you see here on click
17:15
I'm just passing it and incrementing it again and again by one
17:19
So you see here my node server is up and running. And if I show you the output of this particular thing
17:26
so you see on my screen, it is running on the local host on the port number 3000
17:31
And whenever I'm clicking it, it is incrementing the value by one
17:36
because I've given in the code that I have to increment the value by one. So this is the beauty of hooks
17:41
So if I show you in the code, I have written the same code using the class component as well
17:46
So you see here, let's say if I comment this particular code
17:50
so let me comment this particular code from here. I'm commenting the code for user state
17:55
and I'm running the code, the same code, the same equivalent of this user state
18:00
using the class component. So let me comment this code and just saving the file
18:06
I've just saved the file and you see here the same code class app extends constructor and so on
18:12
You see here that this will give me the same output. You see here
18:19
But the problem over here is that you have to write the constructor, you have to write the super and so on
18:24
Instead of writing the class components after this session, I'm assuming that you all will agree with the beauty of
18:32
the React hooks and you will start writing the function components as compared to the class components
18:38
So that was about the use state hook. Now let me jump over directly to the use effect hook
18:47
So I'm jumping to the slide, the presentation. Hey, so now talking about using the effect hook
18:58
Now you must be wondering that, what does it mean? What are these effects
19:02
Are these related to the look and feel or they are related to some kind of branding
19:07
No, they are not. Let me be clear with it, that we are not talking about anything related to branding
19:14
or look and feel of the application. The effect hook, it lets you perform the side effects
19:20
in function components. Ho ho, now side effects. Now, what are the side effects I'm talking about here
19:26
Don't take it otherwise. These are not the side effects to your application
19:30
These are the effects which you can add to your React application
19:35
using the useEffect hook. So likewise, just like I did in the useEffect hook
19:41
I did in the useEffect hook as well. On the left-hand side of my screen
19:45
you can see I have written a code which is related to the use
19:49
which is making the use of useEffect hook. And on the right-hand side, this is the equivalent class example
19:55
So first, let's talk about what is an effect hook. So if I talk about effect hook
20:01
the useEffect hook of the React, So, you know, the data fetching or making
20:08
setting up a subscription, or you can say manually changing the DOM
20:12
in React components, all these are examples of the side effects. Let me repeat it for you
20:17
What I'm saying is that if you want to set up a subscription kind of thing
20:21
or manually change the DOM in a React component, or some kind of data fetching activity
20:26
or task you want to implement, these are some kind of examples of side effects
20:30
in a React application. So whether you like it or not, or whether or not you are used to calling these operations
20:37
as side effects, or maybe you can call them just as effects for your information
20:41
These bigger side effects could be taken is it in a negative way, in a wrong way that why
20:47
how we are doing a negative effect to our application. No, we are not making any negative effect
20:52
or any side effects. You can, if you wish, you can call them as effects as well
20:57
So you have likely performed them in components before. I'm pretty sure that you must have used the lifecycle methods like component did mount or component did update
21:08
Because what happens in a component lifecycle generally, you have to mount, you have to unmount your components
21:14
Because you have to prevent it from the memory leak as well. So I will talk about these two typical or you can say common kinds of side effects in a React components
21:24
Because there are some kind of components which don't require cleanup. and some of them they require the cleanup
21:32
So if I talk about the effects without the cleanup, so there are two lifecycle methods
21:37
which you can see on the screen on the right hand side, the component did mount and component did update
21:43
We have used them a lot or you must have used them a lot in your React application
21:47
I'm pretty sure as a developer, as a front-end developer because it happens
21:51
Sometimes we want to run some additional code because let's say, for example
21:56
the DOM has been uploaded. the DOM has been loaded and then the DOM has been updated. These two are different kinds of
22:03
events when it comes to the React lifecycle. So if I talk about network requests, manual DOM
22:09
manipulations, logging in into the system, these are the common examples of effects. You can call
22:15
them side effects, you can call them effects, whatever you want, but these kinds of effects
22:19
they don't require a cleanup. So there are some effects which require a cleanup. What I mean to
22:24
say is that there are some effects in a React application which need a cleanup And it needs a cleanup means that you have to clear the memory leak you have to clear your component when it is completely mounted you have to unmount it But there are some events or effects that don require a cleanup
22:40
as well. And we say that because we run them and immediately forget about them. So we don't have
22:46
to clean up them. So if I talk about typically in a React class component, what you do
22:53
what you do generally in the render method. So render method itself is a, you can say, should not
22:59
cause side effect. It would be too early for a render method. So that's why in React component
23:05
we have added or we have introduced the methods like component did mount or we have started using
23:10
it before 16.8 version of React. The events, the lifecycle events like component did mount
23:18
component will mount or component unmount, component did update and so on
23:22
So that's why in React classes we put a side effects into especially two kind of methods
23:28
One is the component did mount and another is component did update
23:34
So as you can see on my screen now this is something very important you need to notice
23:39
You must have noticed this thing and as a developer I will say you must have noticed this
23:42
thing that you have to duplicate your code so while you was using the when you
23:49
was using the class component you are duplicating your code here oh my god this
23:53
is not acceptable at all why this is not acceptable because you are writing the
23:58
same code two times in the lifecycle methods in a class because in many cases
24:04
we want to perform the same side effect regardless of whether the component is
24:08
is mounted or it is updated or it has been unmounted. So conceptually, if I talk about
24:15
we want it to happen every time it renders, but React class components don't have a method like this
24:22
So what you have to do, you have to unnecessarily write two methods, componentDidMount, componentDidUpdate
24:33
even when your application DOM is updating and you have to write the same code two times
24:40
So that's where the useEffect hook comes into picture. So if I talk about the equivalent useEffect hook
24:47
you see on the left hand side of the screen that when you are using the useEffect
24:52
you have to just write the code one time. So what does useEffect do
24:57
So by using this kind of hook, you are telling the React
25:01
that your component needs to do something after render, not the before render
25:07
you are telling the React application that your component need to do something after render
25:12
So what will happen that React will remember the function you have passed to it
25:18
So that's why we refer it to as effect. I'm just repeating again for you
25:23
that React will remember the function you have passed to it and we refer to as effect and call it later
25:30
after performing all the DAM manipulations or DOM updates. So you see here on the left-hand side
25:35
this use effect will be called after your return or the render internally when it is called render
25:41
So when that has been executed, so this use effect hook will be called
25:46
So what we are doing over here in this particular effect, we are setting the document title
25:52
You see I'm setting the document title, but we could also perform data fetching
25:56
or call some other imperative APIs over here because on the right hand side of the screen
26:01
you can see that when I'm using a class component. So I'm passing the same code twice
26:08
in two different lifecycle methods. One of them is component did mount
26:12
and component did update. So it's my humble request to all of you now
26:16
as a developer, as a front end developer, stop using these lifecycle methods
26:21
Stop using these class components in your React applications. Start using hooks
26:26
And by after today's session, I'm pretty sure that you will have an idea
26:30
that what are hooks. If I again, if I want to again give you a single
26:34
or a simple one line definition of hook. So hook are basically the function components
26:40
which allows you to manage your state and lifecycle events within the function components itself
26:47
So you don't have to write any more the class components and stuff like that
26:52
So again, coming back to this example, oops, I'm sorry, okay, okay
26:58
So again, coming back to this example, I was talking about useEffect
27:02
Now you see here that useEffect is called inside a component. This is very, very important to understand
27:09
because if I move before you see here, inside the component, we use the useState
27:15
Likewise, you have to use the useEffect hook inside a component. And why it is important
27:24
Why is useEffect called inside a component? Why it is important? So let me tell you that placing useEffect
27:30
inside the component, it allows you to access the count variable. Or see, this count is used here as a prop, right
27:38
You can call or you can use any props right from the effect
27:43
So by using the use effect inside the class, I'm sorry, the function component, that is
27:48
an example over here you can see on the screen. So you don't have to call any special API to read it
27:55
To read it means by to read the count variable. already inside the function scope
28:01
When we talk about functions, from a developer standpoint, I'm again going a little bit technical over here
28:06
that when we talk about a function components, they have variables or the members which have
28:12
particular local or the global scope I'm talking about. When you are specifying the useEffect hook
28:21
inside the function component, that is the example in my case over here
28:25
you don't have to need, or you don't have to call a specifically a special API to read it because it's already in your
28:33
function. You see here the count, the count variable and the useEffect hook is already inside
28:39
your function component. So I will say that they are leveraging the JavaScript capabilities. They
28:47
are embarrassing JavaScript closures and avoiding introducing React specific APIs where JavaScript
28:54
already providing you a solution. So let me tell you a hidden story behind it. What React developers
29:01
or the React team out there in Facebook might have thought that if they have to be in the long run
29:07
as compared to the other frameworks or the front-end frameworks, for example
29:12
Vue.js, Meteor.js, Amber.js, or Angular specifically, they have to introduce the concept
29:19
of hook because this hook allows you to manage your state and the lifecycle components inside
29:27
the function itself so as a JavaScript developer you are used to writing functions instead of
29:35
the writing class so writing function components I will say are pretty easy as compared to writing
29:42
the class components which are very much complex in nature because you have to write the many
29:47
keywords, you have to introduce constructor over there and so on so forth
29:52
So that is why I say that use effect has a very, very important advantage when it is
29:59
called inside a function component. Now the question is that, another question could be coming in your mind is
30:06
does useEffect run on every render? The answer is yes. The answer is yes, by default
30:13
it runs both after the first render and after the update. Because you must have understood by this time now
30:19
that componentDidMount, componentDidUpdate, what they're doing, componentDidMount means the render method, it is calling inside the render method
30:27
and component did update means after the dom has been updated so both these things both these
30:33
functionalities because it is running both after the first render and on the subsequent renders
30:40
which means that after every update the use effect hook will be called okay now what is the effect
30:50
with the cleanup earlier now we looked at how to express side effects that don't require any cleanup
30:56
but some effects as I talked about that they do need a cleanup because we might want to set up
31:03
let's say for example a subscription to some external data source for example you want to call
31:08
a chat API or some kind of a chatting bot or chatting application as a data source
31:14
external data source then definitely you need some effects or I will say the effect hook
31:21
which need cleanup so now coming to the demo part of this that how you can use
31:26
the use effect hook so let me comment this piece of code over here i'm commenting this code so that
31:33
i can show you the demo for the use effect hook in place okay blah blah blah so okay so you can
31:44
can see over here that this is a function app this is a function component okay I'm using a
31:50
use state but before this please remember yeah one thing very important to understand that what
31:55
we have to import now you have to import react use state and use effect from the react library
32:01
because without this statement your use effect hook is not going to work so that is very important
32:07
to understand now if I talk about this particular example again this is a counter example but you
32:13
see I'm not using any class component this is a function component where I'm
32:17
using useEffect hook and I'm just setting the document title and it is
32:22
saying you clicked how many times you click this so let's save this file let's
32:29
save this file and see whether our server is running okay my node server is
32:34
running and now we can see so you see here I clicking it and accordingly my the document title is getting updated So that the beauty That the interesting part of using the useEffect hook So now you see here the number of times I clicking this particular button click me
32:57
it is changing my document title because in the code, if I talk about the code part over here
33:03
in the useEffect hook, I'm just setting the document title. So instead of using the life cycle
33:08
methods like component did mount, component did unmount, or component did update, I'm just using
33:15
the use effect hook, which is allowing me to set my document title and which is saying that you
33:22
click this button how many number of times. So if I show again over here on the screen
33:28
I'm just clicking this button and you see my counter is increasing by one every time and the
33:34
Document title or you can say the browser tab title anything you can say in that sense
33:39
So the document title is also getting updated over here and it is showing you the message you click this
33:45
20 times. So that's the beauty of using the hooks. You can use any ID of your choice
33:51
So till here we talked about the use state hook and the use effect hook and let me tell you there are
34:00
more number of hooks available with the react 16 with the react advent of react 16.8 version you can use use context use reducer use memo
34:11
these are some other kind of hooks and let me give you one more additional information if you
34:17
are getting a question in your mind that hey can i create my own custom hook the answer is yes
34:23
you can create your own custom hook now this is a very good news for us that can i create my own
34:30
custom hook because see there are some hooks which are predefined for you pre-built for you
34:35
and definitely 90% of your tasks will be completed by this but if you want to create your own custom
34:43
hook the answer is yes and how you can create them you can create those custom hooks on top of
34:50
predefined hooks so that's the beauty of the react hooks now coming to the next topic and this is the
34:58
second last topic of my talk today what are the rules of hook so very straightforward there are
35:04
only two rules no no big thing no uh you can say very very important uh it's very much important
35:11
but yes it's not that lengthy that you have to remember it only very simple and straightforward
35:16
rules that you can only call hooks at the top level now what does that mean what does that mean
35:22
that you only can call the hooks at the top level which means that if i talk about a react component It is a hierarchy Now when I say hierarchy this is a kind of a parent relationship I talking about so at the top you have a parent and below
35:37
it you have multiple child which are your sub components so the rule says the thumb rule is
35:43
of using hooks that you don't have to call the hooks inside any loop don't call hooks inside any
35:51
loop inside any condition or any nested function instead i will say that always use hooks at the
35:58
top level of your react function so if you have a react function or a react component function
36:04
component always use it at the top level and i will say that by following this rule if you follow
36:10
this rule of using the react hooks you ensure that i will say that hooks are called in the same order
36:18
each time a component renders because let me tell you one thing that for example in your
36:25
let's say react application in a function component you have called multiple hooks so at the first
36:32
level you have called user state then you have called let's say use effect then you have called
36:38
use reducer then you have called use memo and so on so forth so the specialty of the hooks is
36:46
that they are called in the same order each time a component order and in the order in which they
36:52
are called that's what allows react to correctly preserve the state of the hooks you can say between
37:00
the multiple use state or use effect calls that's why we are saying over here that the thumb rule
37:07
of using hooks that you need to use the hooks at the top level and not in any of the nested
37:13
condition or inside the for loops. So that's the rule number one. Now coming to the rule number two
37:20
that you have to call hooks from the React functions. You don't have to call the hooks
37:27
from regular JavaScript functions. So what does it mean? What is the difference between now here
37:33
Don't get confused at what is the difference when we are saying a JavaScript function or a React
37:38
function. In the simple sense instead just call the react from react function components we are
37:43
talking about and you can also call the hooks from your custom hooks. So as I told earlier
37:50
that the custom hooks are definitely built on top of the basic hooks which react provides. So yes
37:57
you can call the hooks from the custom hooks as well. So these are the only two rules. If you
38:03
To explore more about the hooks you can find on different articles different blogs that people will talk about different rules maybe four rules five rules seven rules eight rules But those are just you can say the part of these two rules only these are the two thumb rules which needs to be you can say
38:24
followed while working with react hooks if you follow these rules i'm pretty sure that you will
38:30
not face any difficulty any challenge or any complexity while using react hooks now coming
38:37
to the last topic and the final words for this session what are the benefits of using hooks so
38:46
as i told you that hooks help us to write a very cleaner and you can say more concise code so as
38:53
you can see on the screen it's just like we went on a cold diet and we lost a lot of weight and we
39:00
look better and feel better now so on the left hand side of the screen you can see i have pasted
39:05
a photo a picture of one of the actors you can see on the right hand side it is the advanced
39:12
version or the more the cleaner version or the precise version because this particular person
39:17
or man might have taken a diet in his scenario so just just jokes apart and just kidding in this
39:25
sense so using hooks it's just like we went on a cold diet and we lost a lot of weight and now we
39:32
look better and feel better. So what is happening you can see here
39:38
in this particular picture, it brings out your jawline, makes it feel lighter on your toes
39:44
So it's the one change that has worked for us. So just look at the React hooks
39:49
which have done for others, it has make our life easier. So all kidding aside, hooks cuts down
39:55
and makes our code more readable, concise and clear. So just at the end of the session
40:04
I just want to say that start using hooks if you have not started yet
40:09
start using with the use state hook, and then you can go on with using the other hooks as well
40:16
Just today I talked about the use effect hook and you can get connected with me
40:21
if you need to have more information, if you need more information about React
40:25
React applications, how to deploy them, how to use from a server-side standpoint
40:32
how to use them with an external API, with external how to build chat applications
40:37
and so on and so forth. So I'm very much open for that kind of discussions
40:42
So I will say that thank you very much. And if you have any questions
40:48
I'm just open for those kind of things