DEPENDENCIES IN useEffect()

 DEPENDENCIES REFER TO STATE VARIABLES.

WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT.

WE DECLARE THEM AS ARRAYS IN TWO  WAYS,

 [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT.

[] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG) 

EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X.

import { useEffect, useState } from "react";

export default function Counter() {

  let [countx, setCountx] = useState(0);

  let [county, setCounty] = useState(0);

  let incx = () => {

    setCountx((currCount) => currCount + 1);

  };

  let incy = () => {

    setCounty((currCount) => currCount + 1);

  };

  useEffect(function PrintSomething() {

    console.log("this is a side effect");

  },[countx]);

  return (

    <>

      <h2>Countx:{countx}</h2>

      <button onClick={incx}>+1</button>

      <h2>County:{county}</h2>

      <button onClick={incy}>+1</button>

    </>

  );

}

2. [] - SIDE EFFECT HAPPENS IN THE BEGINNING.

  useEffect(function PrintSomething() {

    console.log("this is a side effect");

  },[]);