The real use of useEffect in ReactJS

Yes you are right ! , we are here to find out the real use of useEffect hook in ReactJS

Prerequisites
1. Ofcourse its ReactJS ! , The functional programming paradigm and lastly at least a basic understanding of components in reactjs.

What is useEffect

UseEffect is a very powerful hook that can introduce the life cycle methods of a Reactjs class based components in functional components and also it is used to handle side effect functionalities.In functional programming we dont have class as a base for creating components.Everything is a function here (like the good ‘ol vanilla JavaScript days)

useEffect is a hook for encapsulating code that has ‘side effects,’ and is like a combination of componentDidMount , componentDidUpdate , and componentWillUnmount

Lets dig in with a practical example :)

The example consists of two components (parent and child) and a lot of useEffect hooks in the child component to demonstrate each of the lifecycle hooks.

Parent component

// parent component
import React, { useState } from "react";
import AnotherComponent from "./AnotherComponent";
function UseEffectExample() {
const [v1, setV1] = useState("");
const [v2, setV2] = useState("");
return (
<React.Fragment>
<p>Prop 1<input type="text" value={v1} onChange={(evt) => {setV1(evt.target.value)}} /></p>
<p>Prop 2<input type="text" value={v2} onChange={(evt) => {setV2(evt.target.value)}} /></p>
<AnotherComponent prop1={v1} prop2={v2} />
</React.Fragment>
);
}
export default UseEffectExample;

Child component

// child component
import React, { useEffect } from "react";
function AnotherComponent(props) {
const {
prop1,
prop2
} = props;
useEffect(() => {
console.log('This will always trigger , on load and prop change ,{{ComponentDidMount}}');
})
useEffect(() => {
console.log('This will trigger only once {{ComponentWillUnMount}}');
}, [])
useEffect(() => {
console.log('This will trigger when prop1 changes {{componentDidUpdate}}');
}, [prop1])
useEffect(() => {
console.log('This will trigger when prop2 changes  {{componentDidUpdate}}');
}, [prop2])
return(
<p>Another one with props: {prop1}, {prop2}</p>
)}
export default AnotherComponent;

So what we did was we created two components , a parent component with two text inputs and the corresponding state values.A child component is there to accept the values as parameters.In the child component we have written four different useEffects representing the lifecycle methods.

When the loading the app , this will be the output in the console

The console will trigger from all the useEffect blocks.The first useEffect block will behave as componentDidMount so it will trigger everytime the component is called , it even triggers both both props (prop1 and prop2 because the value is set to “” for both props initially).

useEffect(() => {console.log('This will always trigger , on load and prop change ,{{ComponentDidMount}}');})

The second useEffect block with a [] as dependency will run only once as it indicates all the effects are applied here.

useEffect(() => {console.log('This will trigger only once {{ComponentWillUnMount}}');}, [])

The third and fourth useEffect blocks are exclusively linked to that dependency prop change

useEffect(() => {console.log('This will trigger when prop2 changes {{componentDidUpdate}}');}, [prop2])

Conclusion

So basically what we did was we created multiple useEffect hooks to demonstrate the different life cycle methods with respect to components.The dependency injection in useEffect is a great way to reduce unnecessary component reloads and thereby increasing the app performance.