Skip to content

Lazy #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 13, 2023
Merged

Lazy #80

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e1576c
lazy
nafistiham Aug 10, 2023
11f4eef
lazy-done
nafistiham Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions src/content/reference/react/lazy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: lazy

<Intro>

`lazy` lets you defer loading component's code until it is rendered for the first time.
`lazy` আপনাকে component এর কোড বিলম্বিত করার সুযোগ দেয় যতক্ষণ না এটা প্রথম বারের মত রেন্ডার করা হচ্ছে।

```js
const SomeComponent = lazy(load)
Expand All @@ -16,63 +16,63 @@ const SomeComponent = lazy(load)

---

## Reference {/*reference*/}
## রেফারেন্স {/*reference*/}

### `lazy(load)` {/*lazy*/}

Call `lazy` outside your components to declare a lazy-loaded React component:
একটি lazy-loaded React component ডিক্লেয়ার করার জন্য আপনার component অস্মূহের বাইরে `lazy` কল করুনঃ

```js
import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```

[See more examples below.](#usage)
[নিচে আরো উদাহরণ দেখুন।](#usage)

#### Parameters {/*parameters*/}
#### প্যারামিটার {/*parameters*/}

* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle.
* `load`: একটি ফাংশন যা একটি [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) অথবা অন্য কোন *thenable* (`then` মেথড সহ একটি Promise-like অবজেক্ট) রিটার্ন করে। আপনি যতক্ষণ রিটার্ন হওয়া component লোড করার চেষ্টা করছেন ততক্ষণ React `load` কল করবে না। React প্রথম বার `load` কল করার পর, এটা resolved হবার অপেক্ষা করবে, এবং এর পরে resolved value React component হিসেবে রেন্ডার করবে। রিটার্ন হওয়া Promise এবং Promise এর resolved value cached হয়ে থাকবে, সুতরাং React একবারের বেশি `load` কল করবে না। যদি Promise reject করে, React rejection এর কারণ `throw` করবে যেন সবচেয়ে নিকটবর্তী error boundary সেটা হ্যান্ডেল করে।

#### Returns {/*returns*/}
#### রিটার্ন {/*returns*/}

`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [`<Suspense>`](/reference/react/Suspense) to display a loading indicator while it's loading.
`lazy` একটি React component রিটার্ন করে যা আপনি আপনার ট্রিতে রেন্ডার রক্তে পারবেন। যতক্ষণ পর্যন্ত lazy component এর কোড লোড হচ্ছে, এটাকে রেন্ডারের চেষ্টা *suspend* হবে। এটা লোডীং এর সময় লোডীং ইনডিকেটর দেখানোর জন্য [`<Suspense>`](/reference/react/Suspense) ব্যবহার করুন।

---

### `load` function {/*load*/}
### `load` ফাংশন {/*load*/}

#### Parameters {/*load-parameters*/}
#### প্যারামিটার {/*load-parameters*/}

`load` receives no parameters.
`load` কোন প্যারামিটার রিসিভ করে না।

#### Returns {/*load-returns*/}
#### রিটার্ন {/*load-returns*/}

You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component.
আপনাকে একটি [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) অথবা অন্য কোন *thenable* (`then` মেথড সহ একটি Promise-like অবজেক্ট)। একে শেষমেশ একটি যথাযথ React component টাইপে যেতে হবে, যেমন একটি ফাংশন, [`memo`](/reference/react/memo), অথবা একটি [`forwardRef`](/reference/react/forwardRef) component।

---

## Usage {/*usage*/}
## ব্যবহার {/*usage*/}

### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/}

Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration:
সাধারণত, আপনি component ইমপোর্ট করেন static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) ডিক্লেয়ারেশন সহঃ

```js
import MarkdownPreview from './MarkdownPreview.js';
```

To defer loading this component's code until it's rendered for the first time, replace this import with:
এই component এর কোডের লোডীং প্রথম বার রেন্ডার হবার আগ পর্যন্ত বিলম্বিত করতে এই ইমপোর্ট নিচের কোড দিয়ে প্রতিস্থাপন করুনঃ

```js
import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
```

This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework.
এই কোড [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) এর উপর নির্ভর করে যার আপনার বান্ডলার বা ফ্রেমওয়ার্ক থেকে support এর দরকার পড়তে পারে।

Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [`<Suspense>`](/reference/react/Suspense) boundary:
এখন যেহেতু আপনার component এর কোড চাহিদানুযায়ী লোড হয়, আপনাকে এটা নির্ধারণ করে দিতে হবে যে এটা লোডীং এর সময়ে কী ডিসপ্লে হওয়া উচিত। এটা আপনি করতে পারেন lazy component অথবা এর যেকোন parent কে [`<Suspense>`](/reference/react/Suspense) boundary এর মধ্যে wrap করার মাধ্যমেঃ

```js {1,4}
<Suspense fallback={<Loading />}>
Expand All @@ -81,7 +81,7 @@ Now that your component's code loads on demand, you also need to specify what sh
</Suspense>
```

In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox:
এই উদাহরণে, `MarkdownPreview` এর কোড ততক্ষণ লোড হবে না যতক্ষণ আপনি এটা রেন্ডারের চেষ্টা করেন। যদি `MarkdownPreview` লোড না হয়ে থাকে, `Loading` তার নিজের জায়গায় দেখাবে। চেকবক্স টিক করে দেখুনঃ

<Sandpack>

Expand Down Expand Up @@ -175,17 +175,17 @@ body {

</Sandpack>

This demo loads with an artificial delay. The next time you untick and tick the checkbox, `Preview` will be cached, so there will be no loading state. To see the loading state again, click "Reset" on the sandbox.
এই ডেমো কৃত্রিম একটা বিলম্বের সাথে লোড হয়। এর পরের বার যখন আপনি চেকবক্স টিক করবেন এবং আনটিক করবেন, `Preview` এর cache হয়ে যাবে, সুতরাং কোন লোডীং state থাকবে না। লোডীং state আবার দেখতে চাইলে, স্যান্ডবক্সের উপর "Reset" বাটন ক্লিক করুন।

[Learn more about managing loading states with Suspense.](/reference/react/Suspense)

---

## Troubleshooting {/*troubleshooting*/}
## ট্রাবলশ্যুট {/*troubleshooting*/}

### My `lazy` component's state gets reset unexpectedly {/*my-lazy-components-state-gets-reset-unexpectedly*/}
### আমার `lazy` component এর state অপ্রত্যাশিতভাবে রিসেট হয়ে যায় {/*my-lazy-components-state-gets-reset-unexpectedly*/}

Do not declare `lazy` components *inside* other components:
`lazy` component গুলোকে অন্যান্য component গুলোর *ভেতরে* ডিক্লেয়ার করবেন নাঃ

```js {4-5}
import { lazy } from 'react';
Expand All @@ -197,7 +197,7 @@ function Editor() {
}
```

Instead, always declare them at the top level of your module:
তার বদলে, এগুলোকে সব সময় আপনার মডিউলের সর্বোচ্চ স্তরে ডিক্লেয়ার করুনঃ

```js {3-4}
import { lazy } from 'react';
Expand Down