Non è necessario utilizzare useEffect per recuperare i dati in React

Ciao, in questo blog cercheremo di sbarazzarci del useEffectrendering iniziale con l'aiuto di react-router. Il router React v6 è uscito con alcuni nuovi fantastici hook che aiuteranno a facilitare il processo di caricamento dei dati, invio di moduli. Grazie al team Remix .

Come menzionato dal team di React: UseEffect synchronisationnon è per lifecycle methods.

Nella nostra app di reazione di solito chiamiamo l'API useEffectcome esempio riportato di seguito. Ma in React 18 questo useEffect viene chiamato due volte e alcuni sviluppatori pensano che questo sia un bug in react poiché ciò si verifica solo in modalità di sviluppo, credetemi questo non è un bug.

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;