This content originally appeared on DEV Community and was authored by Pratik Bhagat
What are Hooks?
Hooks allow us to use state and lifecycle features in function components that were specific to class components before React 16.8
Benefits of React Hooks
- Less Code
- Easily Readable
- Easier to decouple logic from UI
- Performance boost with functional components
useState Hook
The first hook we will look at is the useState hook. The useState hook allows us to add state to a functional component.
Syntax: The first element is the initial state and the second one is a function that is used for updating the state.
const [count, setCount] = React.useState(0)
In the above example, we declare a variable count which holds the value 0 and setCount is the function to update the count. Executing this function re-renders the component.
Let's make a counter using the useState hook
import React, { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<div>{count}</div>
<button onClick={incrementCount}>increment</button>
</div>
);
}
First, we initialize our count to 0, and then we created a function incrementCount which uses setCount to increase our count by 1. We display our count and a button which on click calls the incrementCount function.
useEffect Hook
In class components, you may be familiar with lifecycle methods. The lifecycle methods, componentDidMount, componentDidUpdate, and componentWillUnmount, are all handled by the useEffect hook in functional components. The Effect Hook lets you perform side effects in function components. Examples of side effects are fetching data, changing the DOM. Fetching data is one of the most common uses of the useState hook. The useEffect hook needs at least one argument or a function to execute. You can also add a cleanup function inside the useEffect hook.
useEffect(()=>{
// will be called on initial render and every single re-render
})
The useEffect hook also takes an array after the function which is called the dependency array. Where we can pass dependencies on which our effect depends on. Let's take a look at an example :
useEffect(() => {
console.log("count")
}, [count])
useEffect(()=>{
console.log("render")
},[])
In the above example, count is our dependency so console.log("count") will only execute when the count changes. If we leave our dependency array empty console.log("
render") will only execute on the initial render.
useEffect( () => {
effect
return () => {
cleanup
}
}, [value])
Inside useEffect, we can add a return statement at the end of the function call which returns a function. This return function does all the cleanup work. It's similar to componentWillUnmount in class component. Note that adding a return statement is optional in useEffect.
Thank you for reading.
If you found this useful drop a like :)
Read more about hooks ?
This content originally appeared on DEV Community and was authored by Pratik Bhagat
Pratik Bhagat | Sciencx (2021-07-08T14:53:26+00:00) Introduction to React Hooks. Retrieved from https://www.scien.cx/2021/07/08/introduction-to-react-hooks/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.