React Hooks, which you gonna use the most.

This article covers the basic introduction of “Hooks” also how to use built-in hooks and create custom one. For more details refer official doc here.

Hooks are new addition in react version 16.8, it basically help to manage the state without using class component.

In earlier version functions were stateless through classes lifecycle and state used to get manage. Now you can do much more things with functional components also. Without writing a class you can achieve full feature of lifecycle and state.

Why you should move from class components to functional components?

PS - If you are already using class components in your project don’t rush to pick up hooks. It is optional you can still work with your existing components, refactoring everything I won’t suggest.

So, class components comes with constructors, lifecycle methods, binding, using “this” everywhere, lots and lots of code in single class to maintain. Using functional components removes a lot of this, so our code becomes easier to follow and maintain.

Let’s see a example of class component and then will see same to implement through functional component.

First you need to install latest version of react, use following command.

npm install — save react@latest

Let’s begin with react hooks.

1. useState —

Above is very simple example of useState, here we have ‘change’ button onClick event listener will be updating prevCount by +1, and using setCount will be updating the state of count.

const [count, setCount] = useState(0);

— basically this piece of code is setting the initial value of count to zero, so when it first render will se something like this.

It will get update when you perform click action.

How do I handle multiple state variables?

2. useEffect —

When using hooks and functional components, we no longer have access to React lifecycle methods like componentDidMount, componentDidUpdate

so how do we handle the props change or state change, here enters useEffect.

In React terms “when a component’s variables or state changes based on some outside thing”. For example, this could be:

• When a component receives new props that change its state
• When a component makes an API call and does something with the response (e.g, changes the state).

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component.

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable to keep track of, we give an array of such variables as a second argument.

This basically says only run this effect if the count state changes. This way we can change the color and not cause our effect to run infinitely.

If you don’t give second argument of useEffect(), it would get us stuck in an infinite loop!. You can specify empty array [] as second argument it will only execute during the mounting phase.

There are two ways of using useEffect. You can use it without cleanup or with cleanup, the above code is without cleanup.

useEffect tells React that our component needs to do something after the component renders. It runs after the first render and after every update. In above code we only saw useEffect without cleanup, so I would like to cover really quickly how to allow a functional component to have a side effect with cleanup.

The optional argument is empty for now, this means it will run only once after the render. Incase we want to call effect whenever there is change in ‘id’ or any other variable we specify that in optional arguments.

Custom Hooks —

Custom hooks are normal JavaScript functions whose names start with “use” and they may call other hooks(built-in or custom).

Building your own Hooks lets you extract component logic into reusable functions.

The main reason for which you should be using Custom hooks is to maintain the concept of DRY(Don’t Repeat Yourself) in your React apps. For example, suppose you have some logic that makes use of some built-in hooks and you need to use the logic in multiple functional components you make a custom hook and make use of it wherever it is needed.

Below one is simple code without custom hook. Will see how we can implement custom hook in same example.

So, what we would like to do here is to create a custom Hook that we pass a piece of text into and the Hook updates the document title for us. Let’s look at the code required to create this custom hook

Above you see that all we need this Hook to take as an argument is a string of text which we will call title. Inside the Hook we call React Core's basic useEffect Hook and set the title so long as the title has changed. The second argument to useEffect will perform that check for us and only update the title if it has changed/update.

Let’s review what our overall functional component will now look like.

Thank you for reading, I hope you’ve enjoyed this.