I am Unable to Do the Debugging. That What is Order Of Execution in this
import React, { useState, useEffect, useCallback } from "react";
import MoviesList from "./components/MoviesList";
import "./App.css";
function App() {
const [movies, setMovies] = useState([]);
const [isloading, setLoading] = useState(false);
const [err, setError] = useState(null);
const fetchMoviesHandler = useCallback(async function () {
console.log("fetch run");
setLoading(true);
setError(null);
console.log("res run1");
try {
console.log("res run 2");
const response = await fetch("https://swapi.dev/api/films/");
if (!response.ok) {
throw new Error("Something went wrong");
}
const data = await response.json();
//console.log("res run");
const transformedMovies = data.results.map((movieData) => {
return {
id: movieData.episode_id,
title: movieData.title,
openingText: movieData.opening_crawl,
releaseDate: movieData.release_date,
}; //har ek rerender mai react yaad rakhega ki function ki kon si line execute hui hai iske baad uske
//aage ki line se execute karega
});
setMovies(transformedMovies);
} catch (error) {
setError(error.message);
}
//console.log("movies");
setLoading(false);
console.log("loading..");
}, []);
console.log("app run1");
useEffect(() => {
fetchMoviesHandler();
}, [fetchMoviesHandler]);
return (
<React.Fragment>
<section>
<button onClick={fetchMoviesHandler}>Fetch Movies</button>
</section>
<section>
{!isloading && err && <p>{err}</p>}
{!isloading && <MoviesList movies={movies} />}
{isloading && <p>...Loading</p>}
</section>
</React.Fragment>
);
}
export default App;
app run1
fetch run
res run1
res run2
app run1
GET https://swapi.dev/api/films/ net::ERR_CONNECTION_TIMED_OUT
app run1
app run1
loading..
Can anyone Explain me the execution pattern of this code snippet