useEffect hook in ReactJS

 useEffect(): It enables for performing the side effects in the functional components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.

1. No dependency passed:

useEffect(() => {
  //Runs on every render
});

2. An empty array:

useEffect(() => {
  //Runs only on the first render
}, []);

3. Props or state values:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Example Code: 

import Expenses from './component/expenses/Expenses';

import React,{useEffect, useState} from 'react';

import NewExpense from './component/newExpenses/NewExpense';

let _dummyExpense= [];

const App= ()=> {

    const [expenses, setExpense]= useState(_dummyExpense);

    function getExpenseData(){

        fetch('http://localhost:65257/API/Expense/').then(

            response=> {

                return response.json();

            }

        ).then(

            data=> {

                console.log(data);

                setExpense(data);

            }

        );

    }

    useEffect(()=> {getExpenseData();},[]);

    const addExpenseHandler= (expense)=>{

        fetch('http://localhost:65257/API/Expense/',{

            method:"Post",

            body:JSON.stringify(expense),

            headers:{'content-Type':'application/json'}

        }).then(

            response=> {

                getExpenseData();

            }

        );

    }

    return <div className="app-container">

        <h2>Parent App</h2>

        <NewExpense onAddExpense={addExpenseHandler}></NewExpense>

        <Expenses item={expenses}/>

    </div>

}

export default App;

Effect Cleanup

Some effects require cleanup to reduce memory leaks.

Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.

Reference: https://reactjs.org/, https://www.w3schools.com/