React js useEffect Hook Tutorial with Example

In this tutorial i will discuss about react hook useEffect. If you are a react js developer then it's a very important for you that you have got clear concept about useEffect. This hook seems like componentDidMount(), componentDidUpdate() and componentWillUnmount(). 

Remember that 

  • useEffect is a Hook that lets you perform "side effects" in function components, such as data fetching, manual DOM manipulation, and so on...

  • useEffect accepts a function as argument.

  • useEffect runs after every render.

 

See the below code as an example

 

useEffect accepts a second argument: the dependencies array. It tells React to run the effect function only if one of the dependencies as changed. Or you can pass an empty array ([]) to run it only once.

useEffect(() => {
  	window.addEventListener("mousedown", eventhandler);

	return () => {
		window.removeEventListener("mousedown", eventhandler);
	};
}, []);

 

Read also : React Redux Complete Setup Example with Api Call

 

This above code will render only one time. Hope you got the point.

 

Facebook Github
A web enthusiastic, a self-motivated full-stack software engineer from Dhaka, Bangladesh with experience in developing applications using Laravel , React and Vue js