react useEffect() Hook (Web Dev Simplified)
Tags: react, webdev, javascript, beginners
Published: 2022-12-14 16:30:16

## App.js Code:
 

``` react
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

![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mrn2l8pryhamco5jq21.png)

---

## App.js Code :-

``` react
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 :-

![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9svxfvyzth325zxlwzlw.png)

---

## App.js Code :-

``` react
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;

```


![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufqaz409zav3di0frxez.png)


Thank You.
You can follow us on:
[Youtube ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)