What do we understand about hooks in a general sense? It is something that is used to hang other things on. So how hooks are used in react to hold something? Let’s discuss it.
We have two types of components in react. One is the class component and the other is the function component. Class components are frequently called stateful components and function components are called stateless components. But this is not true always because you can make function component stateful using state hook(useState). You will understand this by the following example(from the official doc)
Function component:
import React, { useState } from 'react';
function Example() {
[count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}-----Class component:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
So here we have introduced one of the hooks useState. This is a built-in hook in react. useEffect is another built-in hook. Besides this, there are a bunch of custom hooks. Custom means these are made by developers to make their life easier. useState is used in the function component. But remember you can not use hooks in the class component. Because react is allowing you to access life-cycle features in function component using hooks. Now the question is why we should use the useState hook?
If we need to change something inside our component, then we can use the useState hook. Here is the most common example we see most frequently:
const [count, setCount] = useState(0);here count is the state variable, setCount is a function. It seems like an array destructuring. We have passed 0 to useState as the initial value or state. You can pass string, object, array according to your need. Now here is the matter you have to notice is that why hook names are started by use. Why not create? This is because when we declare state variable first, a state is create and react becomes aware of changing something in your component. But the second time when you change something(increment or decrement the count), react automatically update the state and render it to UI. You should not worry about this.
There is another built-in hook called useEffect(). Its main duty is to minimize the side effects in your react application. Fetching data from API call is is a good example of side effects. So react needs to handle this? The main benefit of using useEffect is to ensure that DOM has been updated successfully. Because useEffect runs after every render. It is equivalent to componentDidMount and componentDidUpdate in our class component. See the example below:
After compiling this code, you will see in the UI:
So here is a simple example of how you can use useEffect hook in handling promise and showing the output in the browser. You should have to notice that I have used an empty array as the second argument. Why? This is called dependency by which react will update your state and show the outcome accordingly. React claimed this method as a performance optimization. By doing this, we are saying react to apply the effect only when the value we pass as the second parameter changes on every re-render. So this is the performance issue of our app.
