Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Using useEffect() in React.js functional component
The React hook useEffect helps in adding componentDidUpdate and componentDidMount combined lifecycle in React’s functional component.
So far we know we can add lifecycle methods in stateful component only.
To use it, we will need to import it from react −
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
});
}If we run it, we will see the console log and alert on every render cycle. Here we can call http requests also inside useEffect. Now this is similar to componentDidUpdate lifecycle of stateful component.
We can add multiple useEffect functions in a single component.
How to make it work like componentDidMount
Passing an empty array as a second argument to useEffect function call makes it work like componentDidMount.
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
}, [] );
}We can pass a second argument to useEffect, if there is any change on the second argument then React will execute this useEffect function call.
The second argument shown below is an array means we can add multiple elements inside that array.
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
}, [props.player]);
}How to do cleanup work in functional component
Inside useEffect we can add a return statement at the end of function call which returns a function. This return function does the cleanup work. Frequency execution of the cleanup work also depends upon the second argument passed to useEffect function.
import React, { useEffect } from ‘react’;
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
return ( ()=>{
console.log(‘cleanup on change of player props’);
});
}, [props.player]);
}We know that componentWillUnmount executes when component is removed from actual DOM. Similarly if we use useEffect with an empty second argument and adding a return function call it will work as componentWillUnmount’
const tutorials=(props)=>{
useEffect( ()=>{
console.log(‘hello’);
setTimeout( ()=>{ alert(‘hello’); }, 2000);
return ( ()=>{
console.log(‘cleanup similar to componentWillUnmount’);
});
}, []);
}With above code example, we are sure that we combined three lifecycles in one function useEffect. These lifecycles are componentDidUpdate , componentDidMount, componentWillUnmount.
Adding return statement is optional in useEffect that means clean up work is optional and depends upon the use cases.
If we use multiple useEffect, then they will execute with the same order as per declaration.
Giving correct second argument we can optimize the performance of useEffect.
useEffect will trigger only if the specified second argument is changed.
The code execution in useEffe ct happens asynchronously. There is another hook similar to useEffect but that works in synchronous way. It called as useLayoutEffect.
As the execution of useLayoutEffect happens synchronously it can block visual update for some time before call completes. So it should be used in very specific usecases and standard useEffect is preferred in common usecases.
There is one more hook which can used in debug and with third party libraries such as Redux. It is called as useDebugValue to display a label for custom hooks.
3K+ Views
To Continue Learning Please Login