What is a React Hook?
A Hook (react ) is used to get into React states and lifecycle features in functional components. The key here is functional components i.e. hooks don't work in class based components. Hooks make it possible to uses states and some methods like componentDidMount in functional components. Don't worry if you haven't worked with class component. The most common and most used state is the usesState hook. I'll be taking you through the usestate hook and how it works.
What you should know before you proceed
You will need the understanding of JavaScript ES6 to be able to understand the concept talked about in the post. You should be familiar with concepts like Arrays, Object, Destructuring and arrow function syntax in JavaScript.
The useState Hook?
The useState hook is used to declare a state in react functional component. A state is a built in react object that is used to store information that belongs to a component.
What the useState hook does is that it allows us to set a state and track it value in a functional component. Enough of the theory, let us get into coding aspect. The first thing we have to do to be able to use the useState hook is to import it
//javascript
import React, {useState} from 'react
The above line is required to be able to use the useState hook in our react application The reason why useState is destructured is because it is a named export. Then we initialize our state as shown below
const counter = () => {
const [count, setCount] = useState(1);
}
The counter function is a component in react. The count is the state we are trying to set and the setCount is a function that can be used to modify the content of the state(count).
The count state is set to an initial value of 1.
To see the value of our count state, we log count to the console
const counter = () => {
const [count, setCount] = useState(1);
console.log(count); // prints 1
return (
<div className="App">
<h1>Learning usestate hook</h1>
</div>
);
}
Output:
Rendering the count state in our code, we have:
//javascript
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(1);
console.log(count);
return (
<div className="App">
<h1>Learning usestate hook</h1>
<p>{count}</p>
</div>
);
};
export default Counter;
The p tag above is where we render our state on the browser.
Output:
We will now create 2 buttons that either increment or decrement the value of the count state.
The new code is as below:
//javascript
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(1);
console.log(count);
return (
<div className="App">
<h1>Learning usestate hook</h1>
<p>{count}</p>
<button>Increment</button> <br /> <br />
<button>Decrement</button>
</div>
);
};
export default Counter;
Output:
The buttons have no functionality yet, but we will implement them so they can work now. We will be using the setCount function to do that. First, let us create different functions to handle the decrement and increment respectively.
Our new code will look something like this
//javascript
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(1);
console.log(count);
const handleIncrement = () => {
}
const handleDecrement = () => {
}
return (
<div className="App">
<h1>Learning usestate hook</h1>
<p>{count}</p>
<button onClick={handleIncrement}>Increment</button> <br /> <br />
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
export default Counter;
The functions do nothing for now but the next step will be to actually implement the functions
Our final code after implementing the functions handleIncrement and handleDecrement will look like below:
//javascript
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(1);
console.log(count);
const handleIncrement = () => {
setCount(count + 1);
};
const handleDecrement = () => {
setCount(count - 1);
};
return (
<div className="App">
<h1>Learning usestate hook</h1>
<p>{count}</p>
<button onClick={handleIncrement}>Increment</button> <br /> <br />
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
export default Counter;
As it can be seen above, the setCount function is what is used in modifying the state, cool right?. This is pretty much everything basic about the React useState hook.
Live link to the finished project: https://codesandbox.io/s/usestate-blog-xf10ci?file=/src/Count.jsx
Note: React UseStates do not only accept integer(number) datatypes. The accept all datatypes ranging from strings to arrays and objects.
Conclusion
This is a basic introduction to the useState hook. I will be making a tutorial on the more advance feature of the useState hook soon. I hope you enjoy reading this as much as I enjoy writing it. Thank you for reading.😉