React'te veri almak için useEffect kullanmaya gerek yok

Merhaba , Bu blogda useEffect. react-routerReact router v6, veri yükleme ve form gönderme sürecini kolaylaştırmaya yardımcı olacak bazı harika yeni kancalarla çıktı. Remix ekibine teşekkürler .

React ekibi tarafından belirtildiği gibi: UseEffect for synchronisationnot for lifecycle methods.

Tepki uygulamamızda genellikle api'yi useEffectaşağıda verilen örnekte çağırırız. Ancak React 18'de bu useEffect iki kez çağrılır ve bazı geliştiriciler bunun tepkide bir hata olduğunu düşünür, çünkü bu yalnızca geliştirme modunda gerçekleşir, inanın bana bu hata değil.

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;