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
![Output Image](https://res.cloudinary.com/practicaldev/image/fetch/s--HNudynp7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mrn2l8pryhamco5jq21.png)
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 :-
![Output Image](https://res.cloudinary.com/practicaldev/image/fetch/s--QQo61l7X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9svxfvyzth325zxlwzlw.png)
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;
![Output Image](https://res.cloudinary.com/practicaldev/image/fetch/s--UZ1Psy4c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufqaz409zav3di0frxez.png)
Thank You.
You can follow us on:
Youtube
Instagram
Top comments (0)