added render and commit fa translation

Author: faeghe-hajiabadi

src/content/learn/render-and-commit.md

@@ -1,44 +1,46 @@
 ---
-title: Render and Commit
+title: رندر و کامیت
 ---
 
 <Intro>
 
-Before your components are displayed on screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior.
+قبل از اینکه اجزای شما در صفحه نمایش داده شوند، آنها باید توسط ری‌اکت رندر شوند. درک مراحل این فرآیند به شما کمک می‌کند تا درباره اجرای کد خود فکر کنید و رفتار آن را توضیح دهید.
+
 
 </Intro>
 
 <YouWillLearn>
 
-* What rendering means in React
-* When and why React renders a component
-* The steps involved in displaying a component on screen
-* Why rendering does not always produce a DOM update
+* معنای رندر کردن در ری‌اکت
+* زمان و دلیل رندر شدن یک کامپوننت در ری‌اکت
+* مراحل درگیر در نمایش یک کامپوننت در صفحه نمایش
+* دلیل اینکه رندر کردن همیشه به به‌روزرسانی دام
+ منجر نمی‌شود
 
 </YouWillLearn>
 
-Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps:
+تصور کنید که اجزای شما مانند آشپزها در آشپزخانه هستند که از مواد اولیه غذاهای خوشمزه تدارک می‌بینند. در این سناریو، ری‌اکت همانقدر که پیشخدمت است که درخواست‌ها را از مشتریان می‌گیرد و سفارشاتشان را به آن‌ها می‌آورد. این فرآیند درخواست و ارائه رابط کاربری سه مرحله دارد:
 
-1. **Triggering** a render (delivering the guest's order to the kitchen)
-2. **Rendering** the component (preparing the order in the kitchen)
-3. **Committing** to the DOM (placing the order on the table)
+1. **فراخوانی** یک رندر (رساندن سفارش مشتری به اشپزخانه)
+2. **رندر کردن** کامپوننت (اماده کردن سفارش در اشپزخانه)
+3. **رساندن** به دام (گذاشتن سفارش روی میز)
 
 <IllustrationBlock sequential>
   <Illustration caption="Trigger" alt="React as a server in a restaurant, fetching orders from the users and delivering them to the Component Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" />
   <Illustration caption="Render" alt="The Card Chef gives React a fresh Card component." src="/images/docs/illustrations/i_render-and-commit2.png" />
   <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" />
 </IllustrationBlock>
 
-## Step 1: Trigger a render {/*step-1-trigger-a-render*/}
+## قدم اول: فراخوانی یک رندر {/*step-1-trigger-a-render*/}
 
-There are two reasons for a component to render:
+دو دلیل برای یک کامپوننت برای رندر هست:
 
-1. It's the component's **initial render.**
-2. The component's (or one of its ancestors') **state has been updated.**
+1. است **رندر اولیه**
+2. کامپوننت  (یا یکی از نیاکان آن) **حالت اپدیت شده است**
 
-### Initial render {/*initial-render*/}
+### رندر اولیه {/*initial-render*/}
 
-When your app starts, you need to trigger the initial render. Frameworks and sandboxes sometimes hide this code, but it's done by calling [`createRoot`](/reference/react-dom/client/createRoot) with the target DOM node, and then calling its `render` method with your component:
+هنگامی که برنامه‌ی شما شروع به اجرا می‌شود، شما باید فرآیند رندر اولیه را آغاز کنید. گاهی اوقات چارچوب‌ها و محیط‌های ماسباکس این کد را پنهان می‌کنند، اما این کار با فراخوانی [`createRoot`](/reference/react-dom/client/createRoot) با گره DOM هدف انجام می‌شود، سپس با فراخوانی متد `render` آن با کامپوننت شما:
 
 <Sandpack>
 
@@ -63,28 +65,30 @@ export default function Image() {
 
 </Sandpack>
 
-Try commenting out the `root.render()` call and see the component disappear!
+با امتحان کردن کد فراخوانی `root.render()` را کامنت کنید و تغییرات را مشاهده کنید!
+
+### دوباره رندر شدن زمانی که حالت تغییر می‌کند {/*re-renders-when-state-updates*/}
 
-### Re-renders when state updates {/*re-renders-when-state-updates*/}
+پس از اینکه کامپوننت ابتدایی رندر شده است، می‌توانید با به‌روزرسانی وضعیت آن با استفاده از [تابع `set`](/reference/react/useState#setstate) رندرهای بیشتری را فراخوانی کنید. به‌روزرسانی وضعیت کامپوننت شما به‌صورت خودکار یک رندر را در صف قرار می‌دهد. (می‌توانید این را تصور کنید که یک مشتری رستوران پس از سفارش اول، به تبلیغ چای، دسر و انواع دیگر از چیزها علاقه دارد، به تبع وضعیت تشنگی یا گرسنگی خود.)
 
-Once the component has been initially rendered, you can trigger further renders by updating its state with the [`set` function.](/reference/react/useState#setstate) Updating your component's state automatically queues a render. (You can imagine these as a restaurant guest ordering tea, dessert, and all sorts of things after putting in their first order, depending on the state of their thirst or hunger.)
 
 <IllustrationBlock sequential>
   <Illustration caption="State update..." alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. They patron expresses they want a pink card, not a black one!" src="/images/docs/illustrations/i_rerender1.png" />
   <Illustration caption="...triggers..." alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card." src="/images/docs/illustrations/i_rerender2.png" />
   <Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
 </IllustrationBlock>
 
-## Step 2: React renders your components {/*step-2-react-renders-your-components*/}
+##  قدم دوم: ری‌اکت کامپوننت شما را دوباره رندر میکند {/*step-2-react-renders-your-components*/}
 
-After you trigger a render, React calls your components to figure out what to display on screen. **"Rendering" is React calling your components.**
+پس از اینکه یک رندر فراخوانی می‌شود، ری‌اکت کامپوننت‌های شما را فراخوانی می‌کند تا بفهمد چه چیزی باید در صفحه نمایش داده شود. **"رندر کردن" به معنای فراخوانی React از کامپوننت‌های شما است.**
 
-* **On initial render,** React will call the root component.
-* **For subsequent renders,** React will call the function component whose state update triggered the render.
+* **در رندر اولیه،** ری‌اکت کامپوننت ریشه را فراخوانی می‌کند.
+* **برای رندرهای بعدی،** ری‌اکت تابع کامپوننت را فراخوانی می‌کند که به‌روزرسانی وضعیت آن رندر را آغاز کرده است.
 
-This process is recursive: if the updated component returns some other component, React will render _that_ component next, and if that component also returns something, it will render _that_ component next, and so on. The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
+این فرآیند بازگشتی است: اگر کامپوننت به‌روزرسانی‌شده کامپوننت دیگری را برگرداند، ری‌اکت بعدی را رندر می‌کند و اگر آن کامپوننت هم چیزی برگرداند، بعدی را رندر می‌کند و به همین ترتیب. این فرآیند ادامه پیدا می‌کند تا زمانی که کامپوننت‌های تو در تو بیشتری وجود نداشته باشند و ری‌اکت دقیقاً بداند چه چیزی باید در صفحه نمایش داده شود.
+
+در مثال زیر، ری‌اکت چند بار `Gallery()` و `Image()` را فراخوانی می‌کند:
 
-In the following example, React will call `Gallery()` and  `Image()` several times:
 
 <Sandpack>
 
@@ -124,36 +128,36 @@ img { margin: 0 10px 10px 0; }
 
 </Sandpack>
 
-* **During the initial render,** React will [create the DOM nodes](https://developer.mozilla.org/docs/Web/API/Document/createElement) for `<section>`, `<h1>`, and three `<img>` tags. 
-* **During a re-render,** React will calculate which of their properties, if any, have changed since the previous render. It won't do anything with that information until the next step, the commit phase.
+* **در رندر اولیه،** ری‌اکت [گره‌های DOM](https://developer.mozilla.org/docs/Web/API/Document/createElement) برای `<section>`، `<h1>` و سه تگ `<img>` ایجاد می‌کند.
+* **در یک رندر مجدد،** ری‌اکت محاسبه می‌کند که ویژگی‌های آن‌ها، اگر هرکدام تغییر کرده باشد، از زمان رندر قبلی چه تغییراتی کرده‌اند. این اطلاعات را تا مرحلهٔ بعد، یعنی مرحلهٔ commit، استفاده نخواهد کرد.
 
 <Pitfall>
 
-Rendering must always be a [pure calculation](/learn/keeping-components-pure):
+رندر کردن همیشه باید یک [محاسبه خالص](/learn/keeping-components-pure) باشد:
 
-* **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. (When someone orders a salad with tomatoes, they should not receive a salad with onions!)
-* **It minds its own business.** It should not change any objects or variables that existed before rendering. (One order should not change anyone else's order.)
+* **ورودی‌های یکسان، خروجی یکسان.** با دادن ورودی‌های یکسان، یک کامپوننت همیشه باید به همان JSX بازگردد. (وقتی کسی یک سالاد با گوجه می‌سفارش دهد، نباید یک سالاد با پیاز دریافت کند!)
+* **به کار خود توجه می‌کند.** نباید هیچ‌گونه تغییری در اشیاء یا متغیرهایی که قبل از رندر وجود داشته‌اند، ایجاد کند. (یک سفارش نباید سفارش دیگری را تغییر دهد.)
 
-Otherwise, you can encounter confusing bugs and unpredictable behavior as your codebase grows in complexity. When developing in "Strict Mode", React calls each component's function twice, which can help surface mistakes caused by impure functions.
+در غیر این صورت، ممکن است با مشکلات گیج‌کننده و رفتارهای پیش‌بینی‌ناپذیر در حالی که کد شما پیچیده می‌شود، روبرو شوید. هنگام توسعه در "حالت دقیق"، ری‌اکت هر تابع کامپوننت را دو بار فراخوانی می‌کند که می‌تواند به کشف اشتباهات ناشی از توابع ناخالص کمک کند.
 
 </Pitfall>
 
 <DeepDive>
 
-#### Optimizing performance {/*optimizing-performance*/}
+#### بهینه‌سازی عملکرد {/*optimizing-performance*/}
 
-The default behavior of rendering all components nested within the updated component is not optimal for performance if the updated component is very high in the tree. If you run into a performance issue, there are several opt-in ways to solve it described in the [Performance](https://reactjs.org/docs/optimizing-performance.html) section. **Don't optimize prematurely!**
+رفتار پیش‌فرض که همه کامپوننت‌های تو در تو درون کامپوننت به‌روزرسانی‌شده را رندر می‌کند، اگر کامپوننت به‌روزرسانی‌شده در ارتفاع درخت بسیار بالا باشد، به لحاظ عملکرد بهینه نیست. اگر به یک مشکل عملکرد برخورد کردید، چندین راه برای حل آن در بخش [عملکرد](https://reactjs.org/docs/optimizing-performance.html) توصیف شده‌اند. **پیش بهینه‌سازی نکنید تا زمانی که ضروری نشده باشد!**
 
 </DeepDive>
 
-## Step 3: React commits changes to the DOM {/*step-3-react-commits-changes-to-the-dom*/}
+##  قدم سوم: ری‌اکت تغییرات را در دام اعمال می‌کند {/*step-3-react-commits-changes-to-the-dom*/}
 
-After rendering (calling) your components, React will modify the DOM. 
+پس از رندر (فراخوانی) کامپوننت‌های شما، ری اکت DOM را تغییر می‌دهد.
 
-* **For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen. 
-* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
+* **برای رندر اولیه،** ری اکت از API DOM [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) برای قرار دادن تمام گره‌های DOMی که ایجاد کرده است روی صفحه نمایش استفاده می‌کند.
+* **برای رندرهای مجدد،** ری اکت عملیات ضروری حداقل را (هنگام رندر!) اجرا می‌کند تا DOM با آخرین خروجی رندرینگ هماهنگ شود.
 
-**React only changes the DOM nodes if there's a difference between renders.** For example, here is a component that re-renders with different props passed from its parent every second. Notice how you can add some text into the `<input>`, updating its `value`, but the text doesn't disappear when the component re-renders:
+**React تنها زمانی گره‌های DOM را تغییر می‌دهد که تفاوتی بین رندرها وجود داشته باشد.** به عنوان مثال، در زیر یک کامپوننت است که هر ثانیه با ویژگی‌های مختلف از والدینش دوباره رندر می‌شود. توجه کنید چگونه می‌توانید متنی را به `<input>` اضافه کنید و مقدار آن را به‌روزرسانی کنید، اما متن وقتی که کامپوننت دوباره رندر می‌شود ناپدید نمی‌شود:
 
 <Sandpack>
 
@@ -193,21 +197,22 @@ export default function App() {
 
 </Sandpack>
 
-This works because during this last step, React only updates the content of `<h1>` with the new `time`. It sees that the `<input>` appears in the JSX in the same place as last time, so React doesn't touch the `<input>`—or its `value`!
-## Epilogue: Browser paint {/*epilogue-browser-paint*/}
+این کار به این دلیل کار می‌کند که در این مرحله آخر، React تنها محتوای `<h1>` را با `time` جدید به‌روزرسانی می‌کند. این می‌بیند که `<input>` در JSX در همان مکانی که قبلاً بوده است ظاهر شده است، بنابراین React به `<input>` - یا `value` آن - دست نمی‌زند!
+
+## ختام: نقاشی مرورگر {/*epilogue-browser-paint*/}
 
-After rendering is done and React updated the DOM, the browser will repaint the screen. Although this process is known as "browser rendering", we'll refer to it as "painting" to avoid confusion throughout the docs.
+پس از انجام رندر و به‌روزرسانی DOM توسط React، مرورگر صفحه نمایش را نقاشی می‌کند. اگرچه این فرآیند به نام "رندر مرورگر" شناخته می‌شود، ما در این مستندات به آن "نقاشی" می‌گوییم تا از ابهام جلوگیری شود.
 
 <Illustration alt="A browser painting 'still life with card element'." src="/images/docs/illustrations/i_browser-paint.png" />
 
 <Recap>
 
-* Any screen update in a React app happens in three steps:
-  1. Trigger
-  2. Render
+* هر به‌روزرسانی صفحه در یک اپلیکیشن React در سه مرحله انجام می‌شود:
+  1. فعال کردن
+  2. رندر
   3. Commit
-* You can use Strict Mode to find mistakes in your components
-* React does not touch the DOM if the rendering result is the same as last time
+* می‌توانید از حالت دقیق استفاده کنید تا اشتباهات در کامپوننت‌های خود را پیدا کنید.
+* اگر نتیجه رندرینگ همانند زمان گذشته باشد، React به DOM دست نمی‌زند.
 
 </Recap>