No es necesario usar useEffect para obtener datos en React

Hola, en este blog intentaremos deshacernos del useEffectrenderizado inicial con la ayuda de react-router. React router v6 salió con algunos ganchos nuevos y geniales que ayudarán a facilitar el proceso de carga de datos y envío de formularios. Gracias al equipo de Remix .

Como lo mencionó el equipo de React: UseEffect es para synchronisationno para lifecycle methods.

En nuestra aplicación de reacción, generalmente llamamos a la API useEffectcomo ejemplo que se muestra a continuación. Pero en React 18, este useEffect se llama dos veces y algunos desarrolladores piensan que se trata de un error en React, ya que esto ocurre solo en el modo de desarrollo, créanme, esto no es un error.

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;