React useEffect And What Is It?

React Side Effect What is it with examples?

You may want to run some code after rendering without running that code in the render() method itself. The useEffect function runs after the JSX component return.

Examples:
All sort of codes will effect your app from outside: API, websockets, local storage and multiple states need to be in sync

When does React run useEffect? and when does NOT?

Runs the first time with the first render and for each other re-render of the component it must check first on the dependency array.

What is the dependency array?

This is an important part of the useEffect function, it's an array containing the dependencies, these dependencies will be the conditions that the useEffect function will only run when they change.

useEffect Example:

// import useEffect 
import { useEffect } from 'react';

 function MyComponent() { 
// We create the count state to include it in the useEffect 
   dependency array
   const [count, setCount] = React.useState(0); 

// Arguments: function and array 
// Count is one of dependencies 
   useEffect(() => {}, [count]); 
// will run useEffect when count has different value than 0

// JSX component return
 return ... }