Understanding Side Effects

React is centered around functional programming. A side effect is any execution that affects something outside the scope of the function being executed. It is not a React specific term, it’s a general concept about the behavior of a function. For example, if a function modifies a global variable, then that function is introducing a side effect — the global variable doesn’t belong to the scope of the current function.

Some examples of side effects in React components are:

• Making asynchronous API calls for data
• Manually updating the DOM element
• Updating global variables from inside a function

Hooks are available for functional components.useEffect hook is an extremely powerful an versatile tool, allowing you to even create your own, custom hooks.

Basic use & behavior

useEffect is - as the name suggests - a hook to perform arbitrary side effects during a life of a component.

It is basically a hook replacement for the "old-school" lifecycle methods componentDidMount, componentDidUpdate and componentWillUnmount.

It allows you to execute lifecycle tasks without a need for a class component. So you can now make side effects inside a functional component. This

import React, { useEffect } from "react";

function SimpleUseEffect() {

  useEffect(() => {
    alert("Component Rendered")
  });

  return (
    <div>
      <b>A Simple use of useEffect...</b>
    </div>
  )
}

In the code above, we used the useEffect hook. It takes a function as input, which is executed after the initial rendering, as well as re-rendering, of the component. After each rendering, one the DOM has been updated and the function passed to useEffect is invoked. In the above scenario, the component gives an alert after the initial rendering of the component.

There are two arguments that are passed to useEffect():

1. Effect: An anonymous callback function that houses your useEffect logic. This logic is executed based upon how you set up useEffect() to run

2. Dependency array: The second is an array that takes in comma-delimited variables called the dependency list. This is how you change the way useEffect() operates.

we van achieve different life cycle like: componentDidMount, componenntDidUpdate & componentwillUnmount using effect & dependecy array.

Here are the more common ways useEffect() hooks are implemented:

• componentDidMount:For a useEffect() invocation to only run on every mount and unmount, use the useEffect() hook in the following manner:

useEffect(() => { 
   // some component logic to execute...
}, []); 
/* 
  Notice the empty array as the second argument above. 

  We don't pass anything to the array as we don't want useEffect() to depend on anything - thus the purpose of having the dependency list in the first place.
*/

• componentDidUpdate:For a useEffect() invocation to run less, or more, often based upon what that useEffect() invocation is dependent on (i.e. — what is passed through to the dependency list), use the useEffect() hook in the following manner:

const [value, setValue] = useState(0);
useEffect(() => {
  // some component logic to execute...
}, [value, setValue]);
/* 
  Notice the dependency array as the second argument above. 

  We pass 'value' to the array as an example to showcase how this hook can work. This useEffect() invocation will execute every single time 'value' is updated.
  Another thing to mention is that arguments in the dependency list don't have to come from other hooks like they do in this example - they can be other forms of data that are assigned to a particular variable where the underlying assigned values can be/are mutated.
*/

• componentWillUnmount:

React.useEffect(
    () => {
      val.current = props;
    },
    [props]
  );
  React.useEffect(() => {
    return () => {
      console.log(props, val.current);
    };