Pas besoin d'utiliser useEffect pour récupérer des données dans React

Bonjour, Dans ce blog, nous allons essayer de nous débarrasser du useEffectrendu initial à l'aide de react-router. Le routeur React v6 est sorti avec de nouveaux crochets sympas qui aideront à faciliter le processus de chargement des données et de soumission des formulaires. Merci à l' équipe Remix .

Comme mentionné par l'équipe React : UseEffect est pour synchronisationpas pour lifecycle methods.

Dans notre application de réaction, nous appelons généralement l'API dans useEffectl'exemple ci-dessous. Mais dans React 18, cet useEffect est appelé deux fois et certains développeurs pensent qu'il s'agit d'un bogue dans React car cela ne se produit qu'en mode développement, croyez-moi, ce n'est pas un bogue.

import React, { useState, useEffect } from 'react';

const Homepage = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch the data from the API
    fetch('https://example.com/api/data')
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  // Return a loading message while the data is being fetched
  if (data === null) {
    return <p>Loading...</p>;
  }

  // Render the data when it is available
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

export default Homepage;

import {  createBrowserRouter, defer } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Homepage/>,
    loader: async ({ request, params }) => {
       const data =  fetch('https://example.com/api/data')
        return defer({
           results: data,
         })
    },
  },
]);

import React from 'react';
import { useLoaderData } from "react-router-dom";

const Homepage = () => {
  const data = useLoaderData()

  // Render the data when it is available
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

export default Homepage;

import React from 'react';
import { useLoaderData, Await } from "react-router-dom";

const Homepage = () => {
  const data = useLoaderData()

  // Render the data when it is available
  return <React.Suspense
  fallback={<p>Loading data...</p>}
>
  <Await
    resolve={data.result}
    errorElement={
      <p>Error loading data</p>
    }
  >
    {(result) => (
      <pre>{JSON.stringify(results, null, 2)}</pre>
    )}
  </Await>
</React.Suspense>
};

export default Homepage;