react useEffect() Hook (Web Dev Simplified)

App.js Code:

import { useState, useEffect } from 'react';

const App = () => {

  const [resourceType, setresourceType] = useState("posts")
  const [loading, setloading] = useState([])


  // useEffect(() => {
  //   console.log("resource type changed");
  // }, [resourceType]) 

  // useEffect(() => {
  //   console.log("on Mount");
  // }, []);

  useEffect(() => {
    setloading([]);
    async function fetchData() {
      const res = await fetch("https://aksh-crud.azurewebsites.net/api/v1/");
      console.log(res.status)
      const data = await res.json();
      setloading(data)
      return data;
    }
    fetchData();
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => {
          setresourceType("posts")
        }}> Posts </button>
        <button onClick={() => setresourceType("Users")}> Users </button>
        <button onClick={() => setresourceType("Comments")}> Comments </button>
      </div>

      <h1> {resourceType} </h1>
      <h4>{loading.length === 0 ? (<pre> Loading...</pre>) : (
        loading.map((item, index) => {
          return <pre key={index}> {JSON.stringify(item)} </pre>
        })
      )}</h4>
    </>
  )
}

export default App;

Output Image

---

App.js Code :-

import { useState, useEffect } from 'react'

const App = () => {
  const [windowWidth, setwindowWidth] = useState(window.innerWidth);

  const handleResize = () => {
    setwindowWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);
  }, []);

  return (
    <>
      <h1> {windowWidth} </h1>
    </>
  )
}

export default App;

Output Image :-

---

App.js Code :-

import { useState, useEffect } from 'react';

const App = () => {

  const [resourceType, setresourceType] = useState("posts")
  const [loading, setloading] = useState([])

  useEffect(() => {
    console.log("outside return");
    setloading([]);
    async function fetchData() {
      const res = await fetch("https://aksh-crud.azurewebsites.net/api/v1/");
      const data = await res.json();
      setloading(data)
      return data;
    }
    fetchData();

    return () => {
      console.log("inside return ");
    }
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => {
          setresourceType("posts")
        }}> Posts </button>
        <button onClick={() => setresourceType("Users")}> Users </button>
        <button onClick={() => setresourceType("Comments")}> Comments </button>
      </div>

      <h1> {resourceType} </h1>
      <h4>{loading.length === 0 ? (<pre> Loading...</pre>) : (
        loading.map((item, index) => {
          return <pre key={index}> {JSON.stringify(item)} </pre>
        })
      )}</h4>
    </>
  )
}

export default App;

Thank You.
You can follow us on:
Youtube
Instagram