New Way to create Functional Component Hooks


In this article, we are going to learn a new feature in react 16.8 version which is Hooks. Hooks is new in the react 16.8 version. So make sure you update the react-dom package before you use hooks in the React application. So what actually you are going to learn in the section.

Hooks

You will learn:-

  1. What is Hooks?
  2. How to use it?

So we will first understand what is Hooks?

What is Hooks?

We know that we could create a stateless functional component to reuse the code. In that component, we used the property to define a dynamic login. Well, we know that we cannot use state in the functional component that is why we named it a stateless functional component.

But using react hooks you can use state in the functional component as well. Yes, you heard it right. React hoots allow us to use state in the functional component.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. So basically using hooks you can use state in the functional component.

As you know there are two ways to create a functional component.

Or

You know that we cannot use state in the functional component. But using hooks we able to use state in the functional component.

Keep in mind, Hooks don’t work inside classes. But you can use them instead of writing classes.

But what is a hook actually

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to functional components. It means hooks are just functions that help us to use state functionality in the functional component.

But when would you use hooks. 

If you write a function component and realize you need to add some state to it then you could use hooks. Now let’s understand how to create hooks in react.

Gets Hands Durty

We will create a simple clickable button that increases the value of the count variable. We create this example using hooks or you can say using functional component and compare with the class example

So this is a simple class component that increases the value of count when we click on the button. So this is a simple class component that increases the value of count when we click on the button.

Now let’s look at how to create this using hooks.

Sample.jsx

In the above code, we had created a component with a Button. when you click on the button we will increase the value of the state variable. Now, this is a very simple class component. We want to learn how to create the same example using Hooks.

Let’s create a Hook and add the button with the state.

In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component:

Like this.

Hooks.jsx

We import the useState Hook from React. It lets us keep the local state in a functional component.

What is useStete() :-

useState is a function or you can say hook that allows users to declare state variable.  This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class.

Normally, variables “disappear” when the function exists but state variables are preserved by React. 

In the useState, you only need to pass the initial value of the state variable. so pass 0 as the initial state for our variable.

We also need to understand what useState function return:-

It returns a pair of values: the current state and a function that updates it.  This is why we write const [count, setCount] = useState(). This is similar to this.state.count and this.setState in a class.

But what is this square bracket?

[count, setCount] = useState()

This syntax is known as array destructuring.  It means that we’re making two new variables count and setCount, where the count is set to the first value returned by useState, and seCount is the second.

Now in this example,

We declare a state variable called count and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.

Now When we want to display the current count in a class, we read this.state.count:

<p>You clicked {this.state.count} times</p>

In a function, we can use count directly:

In a class, we need to call this.setState() to update the count state:

In a function, we already have setCount and count as variables so we don’t need this:

At last just export it. Start the development server. So you can see the functional component is working fine. So now your Hooks.jsx file looks like this.

Hooks.jsx

 

Effect Hooks

The Effect Hook lets you perform side effects in functional components: To declare effect hook you just need to say useEffect in the import statement to call effect hook.

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as a combination of componentDidMount, componentDidUpdate, and componentWillUnmount methods.

It means this method will call these three methods when needed. This method not actually call this method but work like these methods. 

Now let’s understand how to use effect hook.

Now, whenever you run this code and make any changes in the component useEffect will call and re-render the UI. When you click on the button this will the count variable increase by one. You can notice in the title text is also updating.

Instead of thinking in terms of “mounting” and “updating”, you might find it easier to think that effects happen “after render”.

That’s it I hope you understand what is Hooks. If you have any question you can ask me in the comment.

Leave a Reply

Your email address will not be published. Required fields are marked *