How the execution in this react component is happening

Viewed 31

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

1 Answers
Related