USE CASES of useEffects

 USE CASES OF useEffects INCLUDE VARIOUS OPERATIONS SUCH AS , IF WE WANT TO DISPLAY A LOADER SIMILAR TO THAT OF YOUTUBE , THAT HAS TO BE DISPLAYED ONLY IN THE BEGINNING OF A WEBPAGE , WHEN IT IS RENDERED.

THEY ARE USED FOR API CALLS - ASYNCHROUS OPERATIONS

LET'S CREATE AN API, TO DISPLAY JOKES. COPY THE JOKES API URL FROM GITHUB 

USING API IN REACT IS SIMILAR TO JS.

export default function Joker() {

  let URL = "https://official-joke-api.appspot.com/random_joke";

  let [joke, setJoke] = useState({});

  let getJoke = async () => {

    let res = await fetch(URL);

    let jsonRes = await res.json();

    console.log(jsonRes);

    setJoke({ setup: jsonRes.setup, punchline: jsonRes.punchline });

  };

  return (

    <div>

      <h2>Joker!!</h2>

      <h2>{joke.setup}</h2>

      <h2>{joke.punchline}</h2>

      <button onClick={getJoke}>Get joke</button>

    </div>

  );

}

HERE , WHEN REFRESHING THE WEBPAGE NO JOKE IS DISPLAYED. WE WANT TO DISPLAY A JOKE INITIALLY.

WE MIGHT THINK OF INITIALIZING ,

  let [joke, setJoke] = useState(getJoke);

BUT IT DOESNOT WORK BECAUSE, WE CANNOT USE ASYNC FUNCTIONS FOR INITIALIZATION.

HENCE ,WE USE useEffects.

  useEffect(() => {

    async function getFirstJoke() {

      let res = await fetch(URL);

      let jsonRes = await res.json();

      setJoke({ setup: jsonRes.setup, punchline: jsonRes.punchline });

    }

    getFirstJoke();

  }, []);