ไม่จำเป็นต้องใช้ useEffect เพื่อดึงข้อมูลใน React

สวัสดี ในบล็อกนี้ เราจะพยายามกำจัดuseEffectการแสดงผลเริ่มต้นด้วยความช่วยเหลือreact-routerของ เราเตอร์ React v6 ออกมาพร้อมกับตะขอใหม่ๆ ที่จะช่วยให้กระบวนการโหลดข้อมูลและการส่งแบบฟอร์มง่ายขึ้น ขอบคุณทีมงานรีมิกซ์

ดังที่ทีม React กล่าวถึง: UseEffect synchronisationไม่ได้มีไว้สำหรับlifecycle methods.

ในแอปตอบโต้ของเรา เรามักจะเรียก API useEffectตามตัวอย่างด้านล่าง แต่ใน React 18 useEffect นี้ถูกเรียกสองครั้งและนักพัฒนาบางคนคิดว่านี่เป็นข้อผิดพลาดในการตอบสนองเนื่องจากสิ่งนี้เกิดขึ้นเฉพาะในโหมดการพัฒนา เชื่อฉันเถอะว่านี่ไม่ใช่ข้อผิดพลาด

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;