Skip to content

Commit bcb9a24

Browse files
moshfiqronymoshfiqrony
authored
Merge pull request #39 from SusmoySenGupta/translate-hooks-index
Translate: Reference > Hooks
2 parents f54073d + a3c0d8a commit bcb9a24

File tree

1 file changed

+39
-39
lines changed

1 file changed

+39
-39
lines changed

‎src/content/reference/react/index.md

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
---
2-
title: "Built-in React Hooks"
2+
title: "React-এর বিল্ট-ইন হুক্স"
33
---
44

55
<Intro>
66

7-
*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React.
7+
*হুক্স* আপনাকে আপনার কম্পোনেন্ট থেকে React-এর বিভিন্ন ফিচার ব্যবহার করতে দেয়। আপনি বিল্ট-ইন হুকগুলো ব্যবহার করতে পারেন অথবা তাদের সংযোজন করে আপনার নিজস্ব হুক তৈরি করতে পারেন। এই পেজে React-এর সব বিল্ট-ইন হুকগুলোর তালিকা করা আছে।
88

99
</Intro>
1010

1111
---
1212

13-
## State Hooks {/*state-hooks*/}
13+
## State হুক্স {/*state-hooks*/}
1414

15-
*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.
15+
*State* হুকগুলো আপনার কম্পোনেন্টের মধ্যে [ব্যবহৃত "তথ্য সংরক্ষণ" করতে দেয়](/learn/state-a-components-memory)। উদাহরণস্বরূপ, একটি ফর্ম কম্পোনেন্ট স্টেট ব্যবহার করে ইনপুট ভ্যালু সংরক্ষণ করতে পারে, আর একটি ইমেজ গ্যালারি কম্পোনেন্ট স্টেট ব্যবহার করে সিলেক্টেড ইমেজ ইনডেক্স সংরক্ষণ করতে পারে।
1616

17-
To add state to a component, use one of these Hooks:
17+
কম্পোনেন্টে স্টেট যুক্ত করতে আপনি নিচের হুকগুলোর একটি ব্যবহার করতে পারেন:
1818

19-
* [`useState`](/reference/react/useState) declares a state variable that you can update directly.
20-
* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
19+
* [`useState`](/reference/react/useState) একটি স্টেট ভ্যারিয়েবল ডিক্লেয়ার করে যা আপনি সরাসরি আপডেট করতে পারেন।
20+
* [`useReducer`](/reference/react/useReducer) একটি স্টেট ভ্যারিয়েবল ডিক্লেয়ার করে যা একটি [reducer ফাংশনের](/learn/extracting-state-logic-into-a-reducer) মধ্যে আপডেট করা হয়।
2121

2222
```js
2323
function ImageGallery() {
@@ -27,11 +27,11 @@ function ImageGallery() {
2727
2828
---
2929
30-
## Context Hooks {/*context-hooks*/}
30+
## Context হুক্স {/*context-hooks*/}
3131
32-
*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep.
33-
34-
* [`useContext`](/reference/react/useContext) reads and subscribes to a context.
32+
*Context* হুকগুলো একটি কম্পোনেন্টে [দূরবর্তী যেকোনো প্যারেন্ট কম্পোনেন্ট থেকে প্রপ্‌স হিসেবে না পাঠিয়ে সরাসরি তথ্য পাঠাতে দেয়](/learn/passing-props-to-a-component)। উদাহরণস্বরূপ, আপনার অ্যাপের টপ-লেভেল কম্পোনেন্ট নিচের সকল কম্পোনেন্টের মধ্যে বর্তমান UI থিম পাঠাতে পারে, সেটি যত গভীর হোক না কেন।
33+
34+
* [`createContext`](/reference/react/createContext) একটি কনটেক্সট পড়ে এবং সেটিতে subscribe করে।
3535
3636
```js
3737
function Button() {
@@ -41,13 +41,13 @@ function Button() {
4141
4242
---
4343
44-
## Ref Hooks {/*ref-hooks*/}
45-
46-
*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs.
44+
## Ref হুক্স {/*ref-hooks*/}
4745
48-
* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node.
49-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used.
46+
*Ref* হুকগুলো একটি কম্পোনেন্টের [তথ্য সংরক্ষণ করতে দেয় যা রেন্ডারিং এর জন্য ব্যবহৃত হয় না,](/learn/referencing-values-with-refs) যেমন একটি DOM নোড বা timeout ID। স্টেট আপডেট করলে যেমন কম্পোনেন্ট রি-রেন্ডার হয়, ref আপডেট করলে কিন্তু কম্পোনেন্ট রি-রেন্ডার হয় না। Ref হুকগুলো হচ্ছে React-এর প্যারাডাইম থেকে বের হওয়ার একটি "escape hatch"। এগুলি তখনই ব্যবহার করা যেতে পারে যখন আপনার কোনো non-React সিস্টেম এর সাথে কাজ করতে হয়, যেমন ব্রাউজারের বিল্ট-ইন API।
5047
48+
* [`useRef`](/reference/react/useRef) একটি ref ডিক্লেয়ার করে। আপনি এর মধ্যে যেকোনো ভ্যালু রাখতে পারেন, কিন্তু সবচেয়ে বেশি এটি DOM নোড রাখতে ব্যবহৃত হয়।
49+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) আপনার কম্পোনেন্টের ref কাস্টমাইজ করতে দেয়। এটি খুব কমই ব্যবহৃত হয়।
50+
5151
```js
5252
function Form() {
5353
const inputRef = useRef(null);
@@ -56,11 +56,11 @@ function Form() {
5656
5757
---
5858
59-
## Effect Hooks {/*effect-hooks*/}
59+
## Effect হুক্স {/*effect-hooks*/}
6060
61-
*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.
61+
*Effect* হুকগুলো একটি কম্পোনেন্টকে [বাইরের সিস্টেমের সাথে সংযোগ করে এবং সিংক্রোনাইজ করে](/learn/synchronizing-with-effects)। এটি নেটওয়ার্ক, ব্রাউজার DOM, অ্যানিমেশন, বিভিন্ন non-React কোড এবং বাইরের যেকোনো UI লাইব্রেরির সাথে সংযোগ স্থাপন করতে ব্যবহৃত হয়।
6262
63-
* [`useEffect`](/reference/react/useEffect) connects a component to an external system.
63+
* [`useEffect`](/reference/react/useEffect) একটি কম্পোনেন্টকে বাইরের সিস্টেমের সাথে সংযোগ করে।
6464
6565
```js
6666
function ChatRoom({ roomId }) {
@@ -72,23 +72,23 @@ function ChatRoom({ roomId }) {
7272
// ...
7373
```
7474
75-
Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect)
75+
Effect হুকগুলো React-এর প্যারাডাইমের একটি "escape hatch"। আপনার অ্যাপ্লিকেশানের ডেটা ফ্লো সুসমন্বিত করার জন্য Effect ব্যবহার করবেন না। যদি আপনি কোনো বাইরের সিস্টেমের সাথে ইন্টারেক্ট না করেন, তাহলে আপনার [কোন Effect-এর দরকার নাও হতে পারে।](/learn/you-might-not-need-an-effect)
7676
77-
There are two rarely used variations of `useEffect` with differences in timing:
77+
`useEffect` এর দুইটি অপেক্ষাকৃত কম ব্যবহৃত ভ্যারিয়েশন আছে যা টাইমিং নিয়ে ভিন্নতা রাখেঃ
7878
79-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here.
80-
* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here.
79+
* [`useLayoutEffect`](/reference/react/useLayoutEffect) ব্রাউজারের রি-পেইন্ট করার আগে কল হয়। আপনি এখানে layout পরিমাপ করতে পারেন।
80+
* [`useInsertionEffect`](/reference/react/useInsertionEffect) React DOM-এ পরিবর্তন করার আগে কল হয়। লাইব্রেরিগুলি এখানে ডায়নামিক CSS ইনসার্ট করতে পারে।
8181
8282
---
8383
84-
## Performance Hooks {/*performance-hooks*/}
84+
## Performance হুক্স {/*performance-hooks*/}
8585
86-
A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render.
86+
রি-রেন্ডারিং অপ্টিমাইজ করার একটি সাধারণ উপায় হল অপ্রয়োজনীয় কাজ এড়িয়ে যাওয়া। যেমন, আপনি React-কে জানিয়ে দিতে পারেন যেন একটি cache করা ক্যালকুলেশন ব্যবহার করে অথবা একটি রি-রেন্ডার এড়িয়ে যায় যদি ডেটা পূর্বের রেন্ডার থেকে পরিবর্তিত না হয়ে থাকে।
8787
88-
To skip calculations and unnecessary re-rendering, use one of these Hooks:
88+
অপ্রয়োজনীয় ক্যালকুলেশন এবং রি-রেন্ডারিং এড়িয়ে যাওয়ার জন্য, এই হুকগুলোর মধ্যে থেকে একটি ব্যবহার করতে পারেনঃ
8989
90-
- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation.
91-
- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component.
90+
- [`useMemo`](/reference/react/useMemo) আপনাকে একটি ব্যয়বহুল ক্যালকুলেশন cache করে রাখতে দেয়।
91+
- [`useCallback`](/reference/react/useCallback) একটি অপটিমাইজড কম্পোনেন্টে পাঠানোর আগে একটি ফাংশন ডেফিনিশন cache করে রাখতে দেয়।
9292
9393
```js
9494
function TodoList({ todos, tab, theme }) {
@@ -97,25 +97,25 @@ function TodoList({ todos, tab, theme }) {
9797
}
9898
```
9999
100-
Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart).
100+
কখনও কখনও, আপনি রি-রেন্ডারিং এড়িয়ে যেতে পারবেন না কারণ স্ক্রীনটিকে আসলেই আপডেট করতে হবে। এই ক্ষেত্রে, আপনি ব্লকিং আপডেটগুলি যা সিংক্রোনাস হতে হবে (যেমন ইনপুটে টাইপ করা) এবং নন-ব্লকিং আপডেটগুলি যা ব্যবহারকারীর ইন্টারফেস ব্লক করতে হয় না (যেমন একটি চার্ট আপডেট করা) আলাদা করে পারফর্মেন্স বৃদ্ধি করতে পারেন।
101101
102-
To prioritize rendering, use one of these Hooks:
102+
রি-রেন্ডারিং অগ্রাধিকার দেওয়ার জন্য, এই হুকগুলোর মধ্যে থেকে একটি ব্যবহার করতে পারেনঃ
103103
104-
- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it.
105-
- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first.
104+
- [`useTransition`](/reference/react/useTransition) আপনাকে একটি স্টেট ট্রানজিশনকে ব্লক না করে অন্যান্য আপডেটগুলি তার মধ্যে অব্যাহত রাখতে দেয়।
105+
- [`useDeferredValue`](/reference/react/useDeferredValue) আপনাকে একটি অপ্রয়োজনীয় অংশের UI আপডেট পিছিয়ে দেয় এবং অন্যান্য অংশগুলিকে প্রথমে আপডেট করতে দেয়।
106106
107107
---
108108
109-
## Other Hooks {/*other-hooks*/}
109+
## অন্যান্য হুক্স {/*other-hooks*/}
110110
111-
These Hooks are mostly useful to library authors and aren't commonly used in the application code.
111+
এই হুকগুলো মূলত লাইব্রেরি লেখকদের জন্য প্রয়োজনীয় এবং অ্যাপ্লিকেশন কোডে খুব একটা ব্যবহৃত হয় না।
112112
113-
- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook.
114-
- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs.
115-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store.
113+
- [`useDebugValue`](/reference/react/useDebugValue) আপনাকে আপনার কাস্টম হুকের জন্য React ডেভটুলসের প্রদর্শিত লেবেল কাস্টমাইজ করতে দেয়।
114+
- [`useId`](/reference/react/useId) একটি কম্পোনেন্টকে একটি ইউনিক ID দিয়ে সংযুক্ত করে। এটি সাধারণত অ্যাক্সেসিবিলিটি API-এর সঙ্গে ব্যবহার করা হয়।
115+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) একটি কম্পোনেন্টকে একটি বাহ্যিক স্টোরে subscribe করতে দেয়।
116116
117117
---
118118
119-
## Your own Hooks {/*your-own-hooks*/}
119+
## আপনার নিজস্ব হুক {/*your-own-hooks*/}
120120
121-
You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions.
121+
আপনি নিজেও জাভাস্ক্রিপ্ট ফাংশন হিসাবে [আপনার নিজস্ব কাস্টম হুক বানাতে পারেন।](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component)

0 commit comments

Comments
 (0)