??? ????

React Suspense? ?? ??? ???? ???? ?? ?? UI? ???? ???? ??? ???? ???? ??? ? ?? ??? ??? ?????. ?? React.lazy, ?? ??? ? React Query, Relay ?? ??? ?? ??? ?? ??? ???? ???? ?? ?????.

---

???? ?? ??

1. ?? ??? ??: Suspense? ??? ??? ???? ?? ?? ??? ?????. ???? ?? ?? UI(?: ?? ???)? ?????.
2. ?? ???: ??? ??? ???? ?? ?? ?? ?? ???? ??????.

---

?? ??

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

• React.Suspense: ?? ??? ?? ??? ?????.
• fallback: ?? ??? ????? ???? ?? ??? UI? ?????.

---

????? ?? ??

1. ?? ?? ?? ??: React.lazy? ???? ???? ?? ??? ?????.
2. ??? ????: Relay ?? React Query? ?? ?????? ???? ??? ??? ??? ?????.
3. ?? ???: ?? React ???? ???? ??????.

---

?? 1: Suspense? ??? ?? ??

???? ??

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent? ????? ???? ?? ?? ??? ?????.

????? ??

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

?? HeavyComponent? ??? ?? ???? ?? ???? ?? ??? ?????.

---

?? 2: ?? ?? ??? ?? ? ?? Suspense

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

?? UI? ? ?? ?? ??? ??? ???

?????.

---

? 3: ??? ????? ?? ?? ??(???)

React Suspense? Relay ?? React Query? ?? ?????? ??? ? ??? ??? ?????? ?????.

React ??? ?

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading data...</div>}>
      <DataComponent />
    </Suspense>
  );
}

export default App;

---

Suspense? ??? ?? ??

????? ???? ???? ?? ??? ???? React Suspense? ??? ?? ?? ??? ???? ????. ??? ???? ?? ??? ?????.

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

---

Suspense ?? ?? ??

1. ??? ??: ?? ????? ????? ??? ?? ???? ?????.
2. ?? ??? ??: ?? ?? ?? ??? ?? ??? ???? ????? ?????.
3. ???? ??: ? ?? ??? ?? ??????? ??? ??? ????.

---

????? ??

1. ??? ??? ??: ?? UI? ???? ?? ???? ?????.
2. ??? ?? ??: ???? ?? ??? ?? ?? ??? ? ?????.
3. ???? ??? ??: ?? ???? ???? ?? ??? ?????.

---

?? ??: ??? ????

?? ??? ????? ???? ?? ?? Suspense ????? ??? ? ????.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

????? ??

1. ??? ???? ??: ???? ?? ???? ???? ?????.
2. ?? ?? ??: ?? ??? ?? ?? ?? ?? ????? ?????.
3. ???? ???: ES6 ?? ? Promise? ???? ?? ????? ?????.

---

??

React Suspense? React ???????? ??? ???? ???? ?? ??? ?????. ?? ?? ??? ?????, ?? ???? ??? ?????, ?? ?? ? ?? ?? ??? ???? ?? ??? ??? ??? ?????.

---

? ??? ??? ??? ???? ?? React?? Suspense? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!