React Hooks

To be honest I used to find React pretty confusing initially for some weird reason. React Hooks made my life so much easier and I love react now :) For all those lost souls who wants to learn react but find it confusing this react hooks tutorial is perfect for you :)
Let me start off by saying that hooks don’t work inside classes, it works inside function components.
State Hook
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}What is a state hook?
In simple words, it’s a state variable and a method you declare to update the state variable.
- ‘count’ is a state variable that can be accessed anywhere in the function.
- ‘setCount’ is the method that updates the value of the variable.
- The argument that you pass to ‘useState’ is the initial state of the variable.
In the above code segment you can see that the argument passed to useState is 0. That is because the counter starts from 0. Inside the setCount method we are incrementing the count by 1. On each click the setCount method will increment the count variable by 1. The count variable in ‘You clicked {count} times’ will show you the number of times that you have clicked the Click me button. You don’t have to access the variable using this.state anymore :)
You can use multiple state hooks in a single functional component.
function MultipleStates() {
const [age, setAge] = useState(42);
const [color, setColor] = useState('green');
const [noted, setNotes] = useState([{ text: 'Good day' }]);
}Effect Hook
The useEffect hook serves the same purpose as componentDidMount, componentDidUpdate and componentWillUnmount like in React classes.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render — including the first render.
Inside the useEffect hook you can see that a document title update happens. The document title will get updated every time the count variable is updated. The useEffect hook usually runs for every render, but if we pass a parameter, like [count] in the above code, the useEffect hook will run every time the count variable is updated thereby updating the document title.
Just like with useState, you can use more than a single effect in a component.
Here are a few rules that you must not forget:
- You can only call hooks at the top level of a functional component. Don’t call Hooks inside loops, conditions, or nested functions.
- Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions.