Published in


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
<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




From Web Development to Machine Learning, we will put a lot of free materials for anyone who wants to learn to code.

Recommended from Medium

Callbacks and Promises — When Javascript Plays Hard to Get

flowchart of what happens after promise in JS

Tailwind Weekly #25: v1.6 is out + a sneak peek at v2.0 👀


Advanced Tips for Using Google Maps API

React App

Fix duplicate SVG ID collision in React

Serving Ourselves! (With Node.js)

Progressive enhancement as a valuable philosophy in the age of JavaScript

LinkedList vs Array vs Vector in Java

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

Saranjeet Singh

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .

More from Medium

Puzzle Image in React

Calling APIs with React Custom Hooks

Breaking Down the GET Fetch Request in React

This Week In React #92: Remix, MDX 2, Lifetime Analysis, Story of React, Quick Start Docs…