Day 16: The useEffect Hook in React

useEffect method hook is used for operations like fetching data from an API.

By using this Hook, you tell React that your component needs to do something after rendered the component. React will remember the function you passed and call it later after performing the DOM updates. In this effect, we set the document title, we could also perform data fetching or call some other imperative API.

In the future when we will fetch data from an API, if we are using functional-based components, we will need to use useEffect hook. Let’s see an example of how it works.

Example 1

Add the following code to App.js

import React, {useEffect, useState} from 'react';
function App() {
const [count,setCount] = useState(1) //destructring 
const handleClick =() =>{
setCount(count + 1);
}
useEffect(()=>{
console.log('use effect called');
})

return (
<React.Fragment>
<h1>Count up: {count}</h1>
<button onClick = {handleClick}>change</button>
</React.Fragment>
);}
export default App;

as you reload the page, you will see “use effect called” on the console screen. And as many times you press the button, you will see the same message on every click. It means this function runs on every reload of DOM.

However, you may not want to call useEffect on every render or rendering of DOM. So to eliminate that, we can use this way:

Example 2

import React, {useEffect, useState} from 'react';
function App() {
const [count1,setCount1] = useState(1)
const [count2,setCount2] = useState(50)
const handleIncrement =() =>{
setCount1(count1 + 1);
}
const handleDecrement =() =>{
setCount2(count2 - 1);
}
useEffect(()=>{
console.log('use effect called');
},[count1]);
return (
<React.Fragment>
<h1>Count up: {count1}</h1>
<button 
onClick = {handleIncrement}>Increment
</button>
<h1>Count up: {count2}</h1>
<button onClick = {handleDecrement}>Decrement</button>
</React.Fragment>
);}
export default App;

what we doing here is creating a component, one method will increment the value and other will decrement it.

If you go and check, for every increment our useEffect hook will work, and it will not work for decrement.

useEffect(()=>{
console.log('use effect called');
},[count1]);

If we just add an array to the useEffect method, we can tell it when to use it. This is pretty easy to use and remember and will help us when we will be fetching data from the API.

This is all for this tutorial, see you in the next lesson.

You can find more tutorials about programming on my YouTube channel,Tech with Saran, https://www.youtube.com/channel/UCOHJCOprtOf4caI50lJlHSQ