Không cần sử dụng useEffect để lấy dữ liệu trong React

Xin chào, Trong blog này, chúng tôi sẽ cố gắng loại bỏ useEffectkết xuất ban đầu với sự trợ giúp của react-router. React router v6 ra mắt với một số hook mới thú vị sẽ giúp giảm bớt quá trình tải dữ liệu, gửi biểu mẫu. Cảm ơn nhóm Remix .

Như nhóm React đã đề cập: UseEffect synchronisationkhông dành cho lifecycle methods.

Trong ứng dụng phản ứng của chúng tôi, chúng tôi thường gọi api useEffectnhư ví dụ dưới đây. Nhưng trong React 18, useEffect này được gọi hai lần và một số nhà phát triển nghĩ rằng đây là một số lỗi trong phản ứng vì điều này chỉ xảy ra trong chế độ phát triển, tôi tin rằng đây không phải là lỗi.

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;