From 35c13ecddbb726ce8c9d6186f0d21eed763ea1e7 Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Wed, 6 Mar 2019 22:35:38 +0100
Subject: [PATCH 01/31] :tada: initial commit on translate react

---
 content/docs/lists-and-keys.md | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index f34e9e5d6..3cd13865a 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,14 +1,18 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: لیست ها و کلید ها
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-First, let's review how you transform lists in JavaScript.
+ابتدا بیاید بررسی کنیم چگونه در جاوااسکریپت  لیست ها را تغییر میدهند.
+
+به کد زیر دقت کنید،ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده میکنیم  تا آرایه ی `numbers` را گرفته و  مقادیرش را دوبرابر کند.  
+
+
+آرایه ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص میدهیم و آن را چاپ میکنیم.
 
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -16,13 +20,13 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-This code logs `[2, 4, 6, 8, 10]` to the console.
+این کد آرایه ی`[2, 4, 6, 8, 10]` را چاپ میکند.
 
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+در ری اکت هم تغییر آرایه ها به لیست [elements](/docs/rendering-elements.html) تقریبا یکسان است. 
 
-### Rendering Multiple Components {#rendering-multiple-components}
+### رندر کردن چندین کامپوننت {#rendering-multiple-components}
 
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+میتوانید با استفاده از آکولاد`{}`، مجموعه ای از المنت ها را بسازید و [آن ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx) .
 
 Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
 

From 4bc0832e58b37c9f3a6943f4d193e726b4ed796d Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Sun, 17 Mar 2019 18:45:50 +0330
Subject: [PATCH 02/31] :tada: translate lists and keys page

---
 content/docs/lists-and-keys.md | 93 ++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 43 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 3cd13865a..d3d8ff1ed 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -6,9 +6,9 @@ prev: conditional-rendering.html
 next: forms.html
 ---
 
-ابتدا بیاید بررسی کنیم چگونه در جاوااسکریپت  لیست ها را تغییر میدهند.
+ابتدا اجازه دهید به بررسی نحوه تبدیل لیست ها در جاوا اسکریپت بپردازیم.
 
-به کد زیر دقت کنید،ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده میکنیم  تا آرایه ی `numbers` را گرفته و  مقادیرش را دوبرابر کند.  
+با توجه به کد زیر،ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده میکنیم  تا آرایه ی `numbers` را گرفته و  مقادیرش را دوبرابر کند.  
 
 
 آرایه ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص میدهیم و آن را چاپ میکنیم.
@@ -22,13 +22,14 @@ console.log(doubled);
 
 این کد آرایه ی`[2, 4, 6, 8, 10]` را چاپ میکند.
 
-در ری اکت هم تغییر آرایه ها به لیست [elements](/docs/rendering-elements.html) تقریبا یکسان است. 
+در ری اکت هم تغییر آرایه ها به لیست [المنت ها](/docs/rendering-elements.html) تقریبا یکسان است. 
 
-### رندر کردن چندین کامپوننت {#rendering-multiple-components}
+### رندر کردن کامپوننت های چندگانه {#rendering-multiple-components}
 
 میتوانید با استفاده از آکولاد`{}`، مجموعه ای از المنت ها را بسازید و [آن ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx) .
 
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوااسکریپت،در آرایه ی `numbers`حلقه میزنیم. 
+برای هر آیتم یک `<li>` برمیگردانیم  و در نهایت  نتیجه ی آرایه ی المان ها را به `listItems` اختصاص میدهیم. :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -37,7 +38,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+کل آرایه ی `listItems` را درون یک المنت `<ul>` قرار میدهیم و [آن را در DOM رندر میکنیم](/docs/rendering-elements.html#rendering-an-element-into-the-dom):  
 
 ```javascript{2}
 ReactDOM.render(
@@ -46,15 +47,16 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-This code displays a bullet list of numbers between 1 and 5.
 
-### Basic List Component {#basic-list-component}
+این کد یک لیست گلوله ای از اعداد بین ۱ تا ۵ را نشان میدهد.
 
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+###  کامپوننت لیست ساده {#basic-list-component}
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
+معمولا لیست هارا درون یک [کامپوننت](/docs/components-and-props.html) رندر میکنیم.
+
+میتوانیم مثال قبلی را طوری بیهنه سازی کنیم که یک کامپوننت  آرایه ای از `numbers` را بگیرد و لیستی از المنت هارا خروجی بدهد. 
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -74,9 +76,10 @@ ReactDOM.render(
 );
 ```
 
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
+وقتی این کد را اجرا کنید، با این هشداری مواجه میشیوید که برای آیتم های لیست یک کلید لازم است.""کلید" یک  ویژگی خاص از جنس رشته است که وقتی لیست المنت درست میکنید،باید آن را include کنید. 
+در بخش بعدی دلیل اهمیت آن را توضیح میدهیم.
 
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+اجازه دهید به آیتم های لیستمان در `numbers.map()`،  یک `کلید` اختصاص دهیم و مشکل نبودن این کلید را حل کنیم.
 
 ```javascript{4}
 function NumberList(props) {
@@ -98,11 +101,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
-## Keys {#keys}
+## کلیدها {#keys}
 
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+کلیدها در ری اکت  به شناسایی این که کدام آیتم ها تغییر کرده اند، اضافه و یا حذف شده اند کمک میکند. کلیدها باید به المنت های داخل آرایه داده شوند تا به المنت ها یک شناسه ی ثابت بدهند. 
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -113,8 +116,8 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
-
+بهترین راه برای انتخاب یک کلید،استفاده از یک رشته است که یک لیست آیتم را در میان برادرانش به صورت یکتا تعیین میکند. 
+اغلب از ID های اطلاعات خودتان به عنوان کلید استفاده میکنید.
 ```js{2}
 const todoItems = todos.map((todo) =>
   <li key={todo.id}>
@@ -123,34 +126,35 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+زمانی که برای آیتم های رندر شده یک شناسه ی ثابت نداشته باشید،میتوانید از شاخص آیتم به عنوان کلید برای چاره ی آخر استفاده کنید: 
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
   // Only do this if items have no stable IDs
+  // فقط زمانی این کار را انجام دهید که آیتم ها شناسه ی پایداری ندارند
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+اگر ممکن است ترتیب آیتم ها تغییر کند،پیشنهاد نمیکنیم که برای کلیدها از شاخص استفاده کنید.زیرا ممکن است تاثیر منفی ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state های کامپوننت بشود. 
+مقاله ی رابین پوکرنی را در مورد [توضیح مفصل در مورد تاثیر منفی استفاده از شاخص به عنوان یک کلید](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) بخوانید. 
 
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+اگر علاقه مندید بیشتر بدانید مقاله ی [توضیح مفصل در مورد اینکه چرا کلید ضروری است](/docs/reconciliation.html#recursing-on-children) را بخوانید. 
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### استخراج کامپوننت ها با کلید {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+فقط زمانی استفاده از کلید ها درست است که از آرایه های احاطه شده استفاده میکنیم. 
 
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
-
-**Example: Incorrect Key Usage**
+برای مثال اگر یک کامپوننت لیست آیتم را[استخراج](/docs/components-and-props.html#extracting-components) کنید،بهتر است کلید را در `<ListItem />` نگاه دارید تا در `<li>` داخل خود`ListItem`  
 
+**مثال: استفاده ی اشتباه از کلید**
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+   // اشتباه! اینجا احتیاجی به مشخص کردن کلید نیست: 
     <li key={value.toString()}>
       {value}
     </li>
@@ -160,7 +164,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // اشتباه! اینجا باید کلید مشخص میشد:
     <ListItem value={number} />
   );
   return (
@@ -177,11 +181,11 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**مثال: استفاده ی صحیح از کلید**
 
 ```javascript{2,3,9,10}
-function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+function ListItem(props) { 
+  // صحیح!اینجا احتیاجی به مشخص کردن کلید نیست:
   return <li>{props.value}</li>;
 }
 
@@ -206,13 +210,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+یک قاعده خوب این است که المنت های داخل `map()` کلید های لازم را دارند.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+###  کلیدها فقط باید در میان فرزندان یکتا باشند {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+کلیدهایی که در آرایه ها استفاده میشوند باید در میان فرزندانشان یکتا باشند.
+اگرچه احتیاجی نیست که به صورت عمومی یکتا باشند.
+وقتی دو نوع آرایه مختلف تولید میکنیم میتوانیم از کلید های یکسان استفاده کنیم: 
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -250,9 +256,10 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+کلیدها به عنوان یک راهنما در ری اکت استفاده میشوند،اما در کامپوننت هایتان منتقل نمیشوند.
+اگر به همان کلید در کامپوننتتان احتیاج دارید،به طور صریح آن را به عنوان یک prop با یک نام متفاوت منتقل کنید.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -263,11 +270,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+در مثال بالا، کامپوننت `Post` میتواند `props.id` را بخواند،اما `props.key` را نه.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### جاسازی map() در JSX  {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+در مثال بالا، متغیر `listItems` را جداگانه اعلام کردیم و آن را در JSX قرار دادیم:
 
 ```js{3-6}
 function NumberList(props) {
@@ -284,7 +291,7 @@ function NumberList(props) {
 }
 ```
 
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+ [جاسازی هر عبارت](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد اجازه میدهد، به طوری که میتوانیم نتیجه ی را `map()` وارد کنیم:
 
 ```js{5-8}
 function NumberList(props) {
@@ -300,6 +307,6 @@ function NumberList(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+گاهی اوقات این کار باعث واضح تر شدن کد میشود،اما این سبک نیز می تواند بد استفاده شود. مانند جاوا اسکریپت، به شما این امکان را می دهد که تصمیم بگیرید که آیا می ارزد که یک متغیر را برای خوانایی بهتر استخراج کنید یا نه. در نظر داشته باشید که اگر بدنه `map ()` بیش از حد تو در تو قرار باشد، ممکن است زمان مناسب برای[استخراج عناصر](/docs/components-and-props.html#extracting-components)  باشد.

From 51efa70cbf84e8a994ffa236119f6d15e653385b Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Sun, 24 Mar 2019 02:01:40 +0430
Subject: [PATCH 03/31] :memo: fix dictations and spaces

---
 content/docs/lists-and-keys.md | 76 +++++++++++++++++-----------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index d3d8ff1ed..ee4424cf4 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,17 +1,17 @@
 ---
 id: lists-and-keys
-title: لیست ها و کلید ها
+title: لیست‌ها و کلید‌‌ها
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-ابتدا اجازه دهید به بررسی نحوه تبدیل لیست ها در جاوا اسکریپت بپردازیم.
+ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوا‌اسکریپت بپردازیم.
 
-با توجه به کد زیر،ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده میکنیم  تا آرایه ی `numbers` را گرفته و  مقادیرش را دوبرابر کند.  
+با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌ی `numbers` را گرفته و مقادیرش را دو برابر کند.  
 
 
-آرایه ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص میدهیم و آن را چاپ میکنیم.
+آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
 
 
 ```javascript{2}
@@ -20,16 +20,16 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-این کد آرایه ی`[2, 4, 6, 8, 10]` را چاپ میکند.
+این کد آرایه‌ی`[2, 4, 6, 8, 10]` را چاپ می‌کند.
 
-در ری اکت هم تغییر آرایه ها به لیست [المنت ها](/docs/rendering-elements.html) تقریبا یکسان است. 
+در ری‌اکت هم تغییر آرایه‌ها به لیست [المنت ها](/docs/rendering-elements.html) تقریبا یکسان است. 
 
-### رندر کردن کامپوننت های چندگانه {#rendering-multiple-components}
+### رندر کردن کامپوننت‌های چندگانه {#rendering-multiple-components}
 
-میتوانید با استفاده از آکولاد`{}`، مجموعه ای از المنت ها را بسازید و [آن ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx) .
+می‌توانید با استفاده از آکولاد`{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
-در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوااسکریپت،در آرایه ی `numbers`حلقه میزنیم. 
-برای هر آیتم یک `<li>` برمیگردانیم  و در نهایت  نتیجه ی آرایه ی المان ها را به `listItems` اختصاص میدهیم. :
+در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، در آرایه‌ی `numbers`حلقه می‌زنیم. 
+برای هر آیتم یک `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -38,7 +38,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-کل آرایه ی `listItems` را درون یک المنت `<ul>` قرار میدهیم و [آن را در DOM رندر میکنیم](/docs/rendering-elements.html#rendering-an-element-into-the-dom):  
+کل آرایه‌ی `listItems` را درون یک المنت `<ul>` قرار می‌دهیم و [آن را در DOM رندر میکنیم](/docs/rendering-elements.html#rendering-an-element-into-the-dom):  
 
 ```javascript{2}
 ReactDOM.render(
@@ -50,13 +50,13 @@ ReactDOM.render(
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
 
-این کد یک لیست گلوله ای از اعداد بین ۱ تا ۵ را نشان میدهد.
+این کد یک لیست گلوله‌ای از اعداد بین ۱ تا ۵ را نشان می‌دهد.
 
 ###  کامپوننت لیست ساده {#basic-list-component}
 
-معمولا لیست هارا درون یک [کامپوننت](/docs/components-and-props.html) رندر میکنیم.
+معمولا لیست‌هارا درون یک [کامپوننت](/docs/components-and-props.html) رندر می‌کنیم.
 
-میتوانیم مثال قبلی را طوری بیهنه سازی کنیم که یک کامپوننت  آرایه ای از `numbers` را بگیرد و لیستی از المنت هارا خروجی بدهد. 
+می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را خروجی بدهد. 
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -76,10 +76,10 @@ ReactDOM.render(
 );
 ```
 
-وقتی این کد را اجرا کنید، با این هشداری مواجه میشیوید که برای آیتم های لیست یک کلید لازم است.""کلید" یک  ویژگی خاص از جنس رشته است که وقتی لیست المنت درست میکنید،باید آن را include کنید. 
-در بخش بعدی دلیل اهمیت آن را توضیح میدهیم.
+وقتی این کد را اجرا کنید، با این هشدار مواجه می‌شوید که برای آیتم‌های لیست یک کلید لازم است. "کلید" یک ویژگی خاص از جنس رشته است که وقتی لیست المنت درست می‌کنید، باید آن را include کنید. 
+در بخش بعدی دلیل اهمیت آن را توضیح می‌دهیم.
 
-اجازه دهید به آیتم های لیستمان در `numbers.map()`،  یک `کلید` اختصاص دهیم و مشکل نبودن این کلید را حل کنیم.
+اجازه دهید به آیتم‌های لیستمان در `numbers.map()`،  یک `کلید` اختصاص دهیم و مشکل نبودن این کلید را حل کنیم.
 
 ```javascript{4}
 function NumberList(props) {
@@ -105,7 +105,7 @@ ReactDOM.render(
 
 ## کلیدها {#keys}
 
-کلیدها در ری اکت  به شناسایی این که کدام آیتم ها تغییر کرده اند، اضافه و یا حذف شده اند کمک میکند. کلیدها باید به المنت های داخل آرایه داده شوند تا به المنت ها یک شناسه ی ثابت بدهند. 
+کلیدها در ری‌اکت به شناسایی این که کدام آیتم‌ها تغییر کرده‌اند، اضافه و یا حذف شده اند کمک میکند. کلیدها باید به المنت‌های داخل آرایه داده شوند تا به المنت‌ها یک شناسه ی ثابت بدهند. 
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -116,8 +116,8 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-بهترین راه برای انتخاب یک کلید،استفاده از یک رشته است که یک لیست آیتم را در میان برادرانش به صورت یکتا تعیین میکند. 
-اغلب از ID های اطلاعات خودتان به عنوان کلید استفاده میکنید.
+بهترین راه برای انتخاب یک کلید، استفاده از یک رشته است که یک لیست آیتم را در میان برادرانش به صورت یکتا تعیین می‌کند. 
+اغلب از ID‌های اطلاعات خودتان به عنوان کلید استفاده می‌کنید.
 ```js{2}
 const todoItems = todos.map((todo) =>
   <li key={todo.id}>
@@ -126,7 +126,7 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-زمانی که برای آیتم های رندر شده یک شناسه ی ثابت نداشته باشید،میتوانید از شاخص آیتم به عنوان کلید برای چاره ی آخر استفاده کنید: 
+زمانی که برای آیتم‌های رندر شده یک شناسه ی ثابت نداشته باشید، می‌توانید از شاخص آیتم به عنوان کلید برای چاره ی آخر استفاده کنید: 
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
@@ -138,18 +138,18 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-اگر ممکن است ترتیب آیتم ها تغییر کند،پیشنهاد نمیکنیم که برای کلیدها از شاخص استفاده کنید.زیرا ممکن است تاثیر منفی ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state های کامپوننت بشود. 
+اگر ممکن است ترتیب آیتم‌ها تغییر کند، پیشنهاد نمی‌کنیم که برای کلیدها از شاخص استفاده کنید. زیرا ممکن است تاثیر منفی‌ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state های کامپوننت بشود. 
 مقاله ی رابین پوکرنی را در مورد [توضیح مفصل در مورد تاثیر منفی استفاده از شاخص به عنوان یک کلید](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) بخوانید. 
 
-اگر علاقه مندید بیشتر بدانید مقاله ی [توضیح مفصل در مورد اینکه چرا کلید ضروری است](/docs/reconciliation.html#recursing-on-children) را بخوانید. 
+اگر علاقه‌مندید بیشتر بدانید مقاله ی [توضیح مفصل در مورد اینکه چرا کلید ضروری است](/docs/reconciliation.html#recursing-on-children) را بخوانید. 
 
-### استخراج کامپوننت ها با کلید {#extracting-components-with-keys}
+### استخراج کامپوننت‌ها با کلید {#extracting-components-with-keys}
 
-فقط زمانی استفاده از کلید ها درست است که از آرایه های احاطه شده استفاده میکنیم. 
+فقط زمانی استفاده از کلید‌ها درست است که از آرایه‌های احاطه شده استفاده می‌کنیم. 
 
-برای مثال اگر یک کامپوننت لیست آیتم را[استخراج](/docs/components-and-props.html#extracting-components) کنید،بهتر است کلید را در `<ListItem />` نگاه دارید تا در `<li>` داخل خود`ListItem`  
+برای مثال اگر یک کامپوننت لیست آیتم را[استخراج](/docs/components-and-props.html#extracting-components) کنید، بهتر است کلید را در `<ListItem />` نگاه‌دارید تا در `<li>` داخل خود`ListItem`  
 
-**مثال: استفاده ی اشتباه از کلید**
+**مثال: استفاده‌ی اشتباه از کلید**
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
@@ -181,7 +181,7 @@ ReactDOM.render(
 );
 ```
 
-**مثال: استفاده ی صحیح از کلید**
+**مثال: استفاده‌ی صحیح از کلید**
 
 ```javascript{2,3,9,10}
 function ListItem(props) { 
@@ -212,13 +212,13 @@ ReactDOM.render(
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-یک قاعده خوب این است که المنت های داخل `map()` کلید های لازم را دارند.
+یک قاعده خوب این است که المنت‌های داخل `map()` کلید‌های لازم را دارند.
 
-###  کلیدها فقط باید در میان فرزندان یکتا باشند {#keys-must-only-be-unique-among-siblings}
+###  کلید‌ها فقط باید در میان فرزندان یکتا باشند {#keys-must-only-be-unique-among-siblings}
 
-کلیدهایی که در آرایه ها استفاده میشوند باید در میان فرزندانشان یکتا باشند.
+کلید‌هایی که در آرایه‌ها استفاده می‌شوند باید در میان فرزندانشان یکتا باشند.
 اگرچه احتیاجی نیست که به صورت عمومی یکتا باشند.
-وقتی دو نوع آرایه مختلف تولید میکنیم میتوانیم از کلید های یکسان استفاده کنیم: 
+وقتی دو نوع آرایه مختلف تولید می‌کنیم می‌توانیم از کلید‌های یکسان استفاده کنیم: 
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -258,8 +258,8 @@ ReactDOM.render(
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-کلیدها به عنوان یک راهنما در ری اکت استفاده میشوند،اما در کامپوننت هایتان منتقل نمیشوند.
-اگر به همان کلید در کامپوننتتان احتیاج دارید،به طور صریح آن را به عنوان یک prop با یک نام متفاوت منتقل کنید.
+کلید‌ها به عنوان یک راهنما در ری‌اکت استفاده می‌شوند،اما در کامپوننت هایتان منتقل نمیشوند.
+اگر به همان کلید در کامپوننتتان احتیاج دارید، به طور صریح آن‌را به عنوان یک prop با یک نام متفاوت منتقل کنید.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -270,11 +270,11 @@ const content = posts.map((post) =>
 );
 ```
 
-در مثال بالا، کامپوننت `Post` میتواند `props.id` را بخواند،اما `props.key` را نه.
+در مثال بالا، کامپوننت `Post` می‌تواند `props.id` را بخواند، اما `props.key` را نه.
 
 ### جاسازی map() در JSX  {#embedding-map-in-jsx}
 
-در مثال بالا، متغیر `listItems` را جداگانه اعلام کردیم و آن را در JSX قرار دادیم:
+در مثال بالا، متغیر `listItems` را جداگانه اعلام کردیم و آن‌را در JSX قرار دادیم:
 
 ```js{3-6}
 function NumberList(props) {
@@ -291,7 +291,7 @@ function NumberList(props) {
 }
 ```
 
- [جاسازی هر عبارت](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد اجازه میدهد، به طوری که میتوانیم نتیجه ی را `map()` وارد کنیم:
+ [جاسازی هر عبارت](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد اجازه می‌دهد، به طوری که می‌توانیم نتیجه ی را `map()` وارد کنیم:
 
 ```js{5-8}
 function NumberList(props) {
@@ -309,4 +309,4 @@ function NumberList(props) {
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-گاهی اوقات این کار باعث واضح تر شدن کد میشود،اما این سبک نیز می تواند بد استفاده شود. مانند جاوا اسکریپت، به شما این امکان را می دهد که تصمیم بگیرید که آیا می ارزد که یک متغیر را برای خوانایی بهتر استخراج کنید یا نه. در نظر داشته باشید که اگر بدنه `map ()` بیش از حد تو در تو قرار باشد، ممکن است زمان مناسب برای[استخراج عناصر](/docs/components-and-props.html#extracting-components)  باشد.
+گاهی اوقات این کار باعث واضح تر شدن کد میشود، اما این سبک نیز می تواند بد استفاده شود. مانند جاوا اسکریپت، به شما این امکان را می دهد که تصمیم بگیرید که آیا می‌ارزد که یک متغیر را برای خوانایی بهتر استخراج کنید یا نه. در نظر داشته باشید که اگر بدنه `map ()` بیش از حد تو‌در‌تو قرار باشد، ممکن است زمان مناسب برای[استخراج عناصر](/docs/components-and-props.html#extracting-components)  باشد.

From 48d937228ba984eb09c047904fa28ca2be5cc830 Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Mon, 25 Mar 2019 02:01:49 +0430
Subject: [PATCH 04/31] :memo: do the requested changes

---
 content/docs/lists-and-keys.md | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index ee4424cf4..32cf0e40b 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -7,11 +7,7 @@ next: forms.html
 ---
 
 ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوا‌اسکریپت بپردازیم.
-
-با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌ی `numbers` را گرفته و مقادیرش را دو برابر کند.  
-
-
-آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
+با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌ی `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
 
 
 ```javascript{2}
@@ -20,13 +16,13 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-این کد آرایه‌ی`[2, 4, 6, 8, 10]` را چاپ می‌کند.
+این کد آرایه `[2, 4, 6, 8, 10]` را در کنسول چاپ می‌کند.
 
-در ری‌اکت هم تغییر آرایه‌ها به لیست [المنت ها](/docs/rendering-elements.html) تقریبا یکسان است. 
+در ری‌اکت تبدیل آرایه‌ها به لیستی از[المنت ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
 
 ### رندر کردن کامپوننت‌های چندگانه {#rendering-multiple-components}
 
-می‌توانید با استفاده از آکولاد`{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
+می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
 در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، در آرایه‌ی `numbers`حلقه می‌زنیم. 
 برای هر آیتم یک `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
@@ -38,7 +34,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-کل آرایه‌ی `listItems` را درون یک المنت `<ul>` قرار می‌دهیم و [آن را در DOM رندر میکنیم](/docs/rendering-elements.html#rendering-an-element-into-the-dom):  
+کل آرایه‌ی `listItems` را درون یک المنت `<ul>` قرار می‌دهیم و [آن را در DOM رندر می‌کنیم](/docs/rendering-elements.html#rendering-an-element-into-the-dom):  
 
 ```javascript{2}
 ReactDOM.render(
@@ -54,9 +50,9 @@ ReactDOM.render(
 
 ###  کامپوننت لیست ساده {#basic-list-component}
 
-معمولا لیست‌هارا درون یک [کامپوننت](/docs/components-and-props.html) رندر می‌کنیم.
+معمولا شما لیست‌ها را درون یک [کامپوننت](/docs/components-and-props.html) رندر خواهید کرد.
 
-می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را خروجی بدهد. 
+می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را باز گرداند. 
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -76,10 +72,9 @@ ReactDOM.render(
 );
 ```
 
-وقتی این کد را اجرا کنید، با این هشدار مواجه می‌شوید که برای آیتم‌های لیست یک کلید لازم است. "کلید" یک ویژگی خاص از جنس رشته است که وقتی لیست المنت درست می‌کنید، باید آن را include کنید. 
-در بخش بعدی دلیل اهمیت آن را توضیح می‌دهیم.
+وقتی این کد را اجرا کنید، با این هشدار مواجه می‌شوید که برای آیتم‌های لیست یک key لازم است. “key” یک ویژگی خاص از جنس رشته است که وقتی لیستی از المنت‌ها درست می‌کنید، باید از آن استفاده کنید. در بخش بعدی دلیل اهمیت آن را توضیح می‌دهیم.
 
-اجازه دهید به آیتم‌های لیستمان در `numbers.map()`،  یک `کلید` اختصاص دهیم و مشکل نبودن این کلید را حل کنیم.
+بیاید به آیتم‌های لیست خود در `numbers.map()`،  یک `key` اختصاص دهیم و مشکل نبودن این `key` را حل کنیم.
 
 ```javascript{4}
 function NumberList(props) {

From a41238497dd3cf9034ffca9fbd7c71bc15df3244 Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Thu, 4 Apr 2019 01:22:56 +0430
Subject: [PATCH 05/31] props translation

---
 content/docs/components-and-props.md | 102 +++++++++++++++------------
 1 file changed, 57 insertions(+), 45 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 4b3bbb6e6..d00ecc953 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: کامپوننت‌‌ها و prop ها
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,23 +16,27 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
+کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تبدیل کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید API مربوط به کامپوننت ها و جزییات بیشتر را در این [لینک](/docs/react-component.html) مطالعه فرمایید.
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوا اسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را تولید می‌کنند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
 
-## Function and Class Components {#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+## کامپوننت‌هایی از جنس تابع و کلاس {#function-and-class-components}
+
+ساده‌ترین راه برای تعریف کردن یک کامپوننت، نوشتن یک تابع جاوا اسکریپت است:
+
 
 ```js
 function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
 ```
+این تابع یک کامپوننت قابل قبول ری‌اکت است زیرا یک قطعه ورودی قابل پردازش (props, کوچک شده properties به معنی متعلقات) همراه با اطلاعات دریافت می‌کند و یک المنت ری‌اکت تولید می‌کند.
+به این نوع کامپوننت‌ها، «کامپوننت‌‌های تابع‌» گفته می‌شود زیرا آنها در واقعیت تابع‌هایی از جاوا اسکریپت هستند.
+
 
-This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+شما همچنین می‌توانید از کلاس‌های  [کلاس‌های ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) برای تعریف کامپوننت‌ها استفاده کنید:
 
 ```js
 class Welcome extends React.Component {
@@ -42,27 +46,28 @@ class Welcome extends React.Component {
 }
 ```
 
-The above two components are equivalent from React's point of view.
+دو کامپوننت بالا از نظر ری‌اکت یکسان هستند.
 
-Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
+کلاس‌ها ویژگی های منحصر بفرد دیگری نیز دارند که  [ در بخش‌های بعدی ](/docs/state-and-lifecycle.html)به آنها خواهیم پرداخت. تا آن زمان به دلیل اختصار از کامپوننت‌های تابع استفاده می‌کنیم .
 
-## Rendering a Component {#rendering-a-component}
+## رندر کردن یک کامپوننت {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+پیش‌تر ما فقط با المنت‌هایی از ری‌اکت مواجه شدیم که بیانگر تگ‌های DOM بودند:
 
 ```js
 const element = <div />;
 ```
+اما المنت‌ها می‌توانند بیانگر کامپوننت‌‌هایی که از توسط کاربر تعریف شده نیز باشند:
 
-However, elements can also represent user-defined components:
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
+زمانی که ری‌اکت با المنتی مواجه می‌شود که بیانگر یک کامپوننت تعریف شده توسط کاربر باشد، یک ورودی JSX واحد (object) را به عنوان ورودی دریافت می‌کند. ما این object را "props" می‌نامیم. 
 
-For example, this code renders "Hello, Sara" on the page:
+
+برای مثال کد زیر "Hello, Sara" را بر روی صفحه رندر می‌کند:
 
 ```js{1,5}
 function Welcome(props) {
@@ -78,24 +83,28 @@ ReactDOM.render(
 
 [](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
+بیایید مرور کنیم که در این مثال چه اتفاقی می‌افتد:
+
+۱. ما تابع `ReactDOM.render()` را با المنت `<Welcome name="Sara" />` فرا می‌خوانیم.
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+۲. ری‌اکت کامپوننت `Welcome` را به همراه `{name: 'Sara'}` که در ورودی تابع به عنوان `props` تعریف شده است را پردازش می‌کند.
 
->**Note:** Always start component names with a capital letter.
+۳. کامپوننت `Welcome` ما در نتیجه یک المنت  تولید می‌کند که حاوی `<h1>Hello, Sara</h1>` است.
+
+۴. DOM ری‌اکت به صورت بهینه DOM را به‌روزرسانی می‌کند تا  `<h1>Hello, Sara</h1>` را نمایش دهد.
+
+>**نکته:** همیشه نام کامپوننت‌ها را با حروف بزرگ انگلیسی شروع کنید.
 >
->React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>ری‌اکت با کامپوننت‌هایی که با حروف کوچک انگلیسی شروع شده باشند همانند تگ‌های DOM برخورد می‌کند. برای مثال تگ `<div />` بیانگر یک تگ HTML است , اما `<Welcome />` بیانگر یک کامپوننت است و بنابرین لازم است `Welcome` در scope تابع کامپوننت ما باشد.
 >
->To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
+>برای اطلاعات بیشتر درباره این معاهده ، لطفا  [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) را مطالعه فرمایید.
+
+## طراحی کامپوننت‌ها {#composing-components}
 
-## Composing Components {#composing-components}
+کامپوننت‌ها می‌توانند در خروجی خود به دیگر کامپوننت‌ها اشاره کنند. این به ما اجازه می‌دهد تا یک کامپوننت را برای هر سطحی از جزییات استفاده کنیم. در برنامه‌های ری‌اکتی یک دکمه، یک فرم، یک دیالوگ، و یک صفحه همگی به صورت کامپوننت بیان می‌شوند.
 
-Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
+برای مثال ما می‌توانیم یک کامپوننت به نام `App` بسازیم که کامپوننت `Welcome` را بارها رندر می‌کند:
 
-For example, we can create an `App` component that renders `Welcome` many times:
 
 ```js{8-10}
 function Welcome(props) {
@@ -120,13 +129,14 @@ ReactDOM.render(
 
 [](codepen://components-and-props/composing-components)
 
-Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
+معمولا، پروژه‌های تازه ری‌اکت دارای یک کامپوننت `App` واحد در بالاترین سطح هستند. اما اگر شما ری‌اکت را با پروژه‌ای موجود ادغام می‌کنید، می‌توانید از سطوح پایین به بالا طراحی کنید، برای مثال از یک کامپوننت کوچک مانند `Button` شروع کنید و تدریجا تا بالای سلسله مراتب view طراحی را ادامه دهید.
 
-## Extracting Components {#extracting-components}
 
-Don't be afraid to split components into smaller components.
+## استخراج کامپوننت‌ها {#extracting-components}
 
-For example, consider this `Comment` component:
+از این که کامپوننت‌ها رو به کامپوننت‌های کوچک‌تر تبدیل کنید هراسان نباشید.
+
+برای مثال این کامپوننت `Comment` را در نظر بگیرید:
 
 ```js
 function Comment(props) {
@@ -154,11 +164,11 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+این کامپوننت `author` (یک object جاوا اسکریپت)، `text` (یک string)، و `date` (یک تاریخ) را به عنوان props دریافت می‌کند و یک کامنت (نظر) در یک شبکه اجتماعی توصیف می‌کند.
 
-This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
+به علت آشیانه‌ای بودن، تغییر دادن این کامپوننت می‌تواند دشوار باشد، و همچنین استفاده مجدد از اجزای مستقل آن آسان نیست. بیایید چند کامپوننت را از آن استخراج کنیم تا این دشواری‌ها را رفع کنیم.
 
-First, we will extract `Avatar`:
+در ابتدا `Avatar` را استخراج می‌نماییم:
 
 ```js{3-6}
 function Avatar(props) {
@@ -171,11 +181,11 @@ function Avatar(props) {
 }
 ```
 
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
+کامپوننت `Avatar` نیازی به دانستن اینکه قرار است در داخل یک کامپوننت `Comment` رندر شود ندارد. برای همین به prop آن بجای اسمی خاص نظیر `author` به آن اسمی عام نظیر `user` داده‌ایم.
 
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
+ما پیشنهاد می‌کنیم که propها بدون درنظر گرفتن بستری که کامپوننت‌ها قرار است در آن استفاده شوند و از نگاه خود کامپوننت نام‌گذاری کنید.
 
-We can now simplify `Comment` a tiny bit:
+حال می‌توانیم کامپوننت `Comment` را کمی ساده کنیم:
 
 ```js{5}
 function Comment(props) {
@@ -198,7 +208,7 @@ function Comment(props) {
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+سپس ما کامپوننت `UserInfo` را استخراج می‌کنیم که کامپوننت `Avatar` را در کنار اسم کاربر رندر می‌کند:
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +223,7 @@ function UserInfo(props) {
 }
 ```
 
-This lets us simplify `Comment` even further:
+این به ما کمک می‌کند تا کامپوننت `Comment` را حتی بیشتر از این ساده کنیم:
 
 ```js{4}
 function Comment(props) {
@@ -233,11 +243,12 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components-continued)
 
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
+استخراج کامپوننت‌ها شاید در ابتدا به نظر کار سختی بیاید، اما داشتن یک پالت از کامپوننت‌های قابل استفاده مجدد در اپ‌های بزرگتر بسیار به کار می‌آید. به عنوان یک قانون کلی در نظر داشته باشید که اگر قسمتی از رابط کاربری شما بارها استفاده شده است (نظیر `Button`, `Panel` , `Avatar`) و یا اینکه قسمتی از رابط کاربری پیچیدگی منحصر به فرد خود را دارد (نظیر `App`, `FeedStory`, `Comment`) آن قسمت کاندیدای مناسبی برای تبدیل شدن به یک کامپوننت قابل استفاده مجدد است.
 
-## Props are Read-Only {#props-are-read-only}
+## Propها فقط قابل خواندن هستند {#props-are-read-only}
 
-Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
+بدون در نظر گرفتن اینکه شما یک کامپوننت را به عنوان  [یک تابع یا یک کلاس](#function-and-class-components) تعریف کرده‌اید، آن کامپوننت نباید هرگز propهای خودش را تغییر دهد.
+این تابع `sum` را در نظر بگیرید:
 
 ```js
 function sum(a, b) {
@@ -245,9 +256,9 @@ function sum(a, b) {
 }
 ```
 
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
+اینگونه توابع  ["خالص یا pure"](https://en.wikipedia.org/wiki/Pure_function) نامیده می‌شوند زیرا سعی نمی‌کنند که ورودی خود را تغییر دهند و همیشه با ورودی‌های ثابت و مشخص خروجی‌های ثابتی را نمایش می‌دهند.
 
-In contrast, this function is impure because it changes its own input:
+در نقطه متقابل این کامپوننت "ناخالص یا impure" است زیرا ورودی خود را تغییر می‌دهد:
 
 ```js
 function withdraw(account, amount) {
@@ -255,8 +266,9 @@ function withdraw(account, amount) {
 }
 ```
 
-React is pretty flexible but it has a single strict rule:
+ری‌اکت خیلی منعطف است اما یک قانون سختگیرانه دارد:
+
+**تمامی کامپوننت‌های ری‌اکت باید در نسبت با propهای خود همانند توابع خالص عمل کنند.**
 
-**All React components must act like pure functions with respect to their props.**
+البته رابط‌های کاربری اپ‌ها داینامیک هستند و با زمان تغییر می‌کنند. در [بخش بعدی](/docs/state-and-lifecycle.html)، ما یک مفهوم جدید به نام "state" را معرفی می‌کنیم. State به کامپوننت‌های ری‌اکت اجازه می‌دهد تا خروجی خود را با توجه به اعمال کاربر، پاسخ‌های دریافتی از شبکه، و هر چیز دیگر در زمان مورد نیاز بدون اینکه این قانون را نقض کنند تغییر دهند.
 
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

From 46d6605a7c37515bfaf057a7b3ad250a53d82654 Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Sat, 6 Apr 2019 18:28:13 +0200
Subject: [PATCH 06/31] :memo: do the requested changes by Soroush

---
 content/docs/lists-and-keys.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 32cf0e40b..c86ba1ec8 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -51,7 +51,6 @@ ReactDOM.render(
 ###  کامپوننت لیست ساده {#basic-list-component}
 
 معمولا شما لیست‌ها را درون یک [کامپوننت](/docs/components-and-props.html) رندر خواهید کرد.
-
 می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را باز گرداند. 
 
 ```javascript{3-5,7,13}
@@ -111,8 +110,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-بهترین راه برای انتخاب یک کلید، استفاده از یک رشته است که یک لیست آیتم را در میان برادرانش به صورت یکتا تعیین می‌کند. 
-اغلب از ID‌های اطلاعات خودتان به عنوان کلید استفاده می‌کنید.
+بهترین راه برای انتخاب یک کلید، استفاده از یک رشته است که یک مورد از لیست را میان برادرانش متمایز می‌کند. اغلب شما از IDهای داده خود به عنوان کلید استفاده خواهید کرد.
 ```js{2}
 const todoItems = todos.map((todo) =>
   <li key={todo.id}>
@@ -121,8 +119,7 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-زمانی که برای آیتم‌های رندر شده یک شناسه ی ثابت نداشته باشید، می‌توانید از شاخص آیتم به عنوان کلید برای چاره ی آخر استفاده کنید: 
-
+زمانی که برای آیتم‌های رندر شده یک شناسه ثابت نداشته‌باشید، شما می‌توانید به عنوان آخرین راه چاره از index آیتم به عنوان کلید استفاده کنید:
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
   // Only do this if items have no stable IDs
@@ -133,16 +130,18 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-اگر ممکن است ترتیب آیتم‌ها تغییر کند، پیشنهاد نمی‌کنیم که برای کلیدها از شاخص استفاده کنید. زیرا ممکن است تاثیر منفی‌ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state های کامپوننت بشود. 
-مقاله ی رابین پوکرنی را در مورد [توضیح مفصل در مورد تاثیر منفی استفاده از شاخص به عنوان یک کلید](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) بخوانید. 
+اگر ممکن است ترتیب آیتم‌ها تغییر کند، پیشنهاد نمی‌کنیم که برای کلیدها از شاخص استفاده کنید. زیرا ممکن است تاثیر منفی‌ای بر عملکرد بگذارد و حتی باعث ایجاد مشکلاتی در state کامپوننت شود. 
+مقاله رابین پوکرنی (Robin Pokorny) که توضیحی مفصل در مورد [تاثیر منفی استفاده از شاخص به عنوان یک کلید](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) است را بخوانید.
 
 اگر علاقه‌مندید بیشتر بدانید مقاله ی [توضیح مفصل در مورد اینکه چرا کلید ضروری است](/docs/reconciliation.html#recursing-on-children) را بخوانید. 
 
+
 ### استخراج کامپوننت‌ها با کلید {#extracting-components-with-keys}
 
-فقط زمانی استفاده از کلید‌ها درست است که از آرایه‌های احاطه شده استفاده می‌کنیم. 
+استفاده از keyها زمانی معنی می‌دهد که [کد] در یک آرایه احاطه شده‌باشد.
 
-برای مثال اگر یک کامپوننت لیست آیتم را[استخراج](/docs/components-and-props.html#extracting-components) کنید، بهتر است کلید را در `<ListItem />` نگاه‌دارید تا در `<li>` داخل خود`ListItem`  
+
+برای مثال اگر یک تکه از کد را به عنوان کامپوننت ListItem [جدا](/docs/components-and-props.html#extracting-components) کنید، باید کلید را روی کامپوننت‌های `<listitem />`قرار دهید، نه روی المنت `<li>` که درون خود ListItem است.
 
 **مثال: استفاده‌ی اشتباه از کلید**
 ```javascript{4,5,14,15}
@@ -207,9 +206,9 @@ ReactDOM.render(
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-یک قاعده خوب این است که المنت‌های داخل `map()` کلید‌های لازم را دارند.
+یک قاعده خوب این است که المنت‌های داخل فراخوانی`map()` نیاز به کلید دارند.
 
-###  کلید‌ها فقط باید در میان فرزندان یکتا باشند {#keys-must-only-be-unique-among-siblings}
+###  کلید‌ها فقط باید در میان همتایان خود یکتا باشند {#keys-must-only-be-unique-among-siblings}
 
 کلید‌هایی که در آرایه‌ها استفاده می‌شوند باید در میان فرزندانشان یکتا باشند.
 اگرچه احتیاجی نیست که به صورت عمومی یکتا باشند.
@@ -253,7 +252,7 @@ ReactDOM.render(
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-کلید‌ها به عنوان یک راهنما در ری‌اکت استفاده می‌شوند،اما در کامپوننت هایتان منتقل نمیشوند.
+ری‌اکت از keyها به عنوان یک راهنما استفاده می‌کند، اما به کامپوننت‌های شما منتقل نمی‌شوند.
 اگر به همان کلید در کامپوننتتان احتیاج دارید، به طور صریح آن‌را به عنوان یک prop با یک نام متفاوت منتقل کنید.
 
 ```js{3,4}
@@ -269,7 +268,7 @@ const content = posts.map((post) =>
 
 ### جاسازی map() در JSX  {#embedding-map-in-jsx}
 
-در مثال بالا، متغیر `listItems` را جداگانه اعلام کردیم و آن‌را در JSX قرار دادیم:
+در مثال بالا، ما متغیر `listItems` را جداگانه تعریف کردیم و آن‌را در JSX قرار دادیم:
 
 ```js{3-6}
 function NumberList(props) {
@@ -286,8 +285,7 @@ function NumberList(props) {
 }
 ```
 
- [جاسازی هر عبارت](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد اجازه می‌دهد، به طوری که می‌توانیم نتیجه ی را `map()` وارد کنیم:
-
+ [استفاده توکار هر expression ](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد می‌دهد، بنابراین می‌توانیم نتیجه ی را `map()` در خط inline  قرار دهیم:
 ```js{5-8}
 function NumberList(props) {
   const numbers = props.numbers;
@@ -304,4 +302,6 @@ function NumberList(props) {
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-گاهی اوقات این کار باعث واضح تر شدن کد میشود، اما این سبک نیز می تواند بد استفاده شود. مانند جاوا اسکریپت، به شما این امکان را می دهد که تصمیم بگیرید که آیا می‌ارزد که یک متغیر را برای خوانایی بهتر استخراج کنید یا نه. در نظر داشته باشید که اگر بدنه `map ()` بیش از حد تو‌در‌تو قرار باشد، ممکن است زمان مناسب برای[استخراج عناصر](/docs/components-and-props.html#extracting-components)  باشد.
+گاهی اوقات این کار باعث واضح تر شدن کد میشود، اما این سبک نیز می تواند بد استفاده شود.همان‌طور که در جاوااسکریپت، تصمیم اینکه یک متغییر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه `map ()` بیش از حد تودرتو شد، زمان درستی است که از آن [یک کامپوننت استخراج کنید](/docs/components-and-props.html#extracting-components).
+                                                                                      
+

From c0f7d71bc4a41d4f1d1a9fe9a18f6ebfba557bbc Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Sun, 7 Apr 2019 19:20:16 +0200
Subject: [PATCH 07/31] :memo: do the requested changes by Soroush

---
 content/docs/lists-and-keys.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c86ba1ec8..7dd4a1ef4 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -18,7 +18,7 @@ console.log(doubled);
 
 این کد آرایه `[2, 4, 6, 8, 10]` را در کنسول چاپ می‌کند.
 
-در ری‌اکت تبدیل آرایه‌ها به لیستی از[المنت ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
+در ری‌اکت تبدیل آرایه‌ها به لیستی از [المنت‌ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
 
 ### رندر کردن کامپوننت‌های چندگانه {#rendering-multiple-components}
 
@@ -208,7 +208,7 @@ ReactDOM.render(
 
 یک قاعده خوب این است که المنت‌های داخل فراخوانی`map()` نیاز به کلید دارند.
 
-###  کلید‌ها فقط باید در میان همتایان خود یکتا باشند {#keys-must-only-be-unique-among-siblings}
+###  کلید‌ها فقط باید میان همتایان خود یکتا باشند {#keys-must-only-be-unique-among-siblings}
 
 کلید‌هایی که در آرایه‌ها استفاده می‌شوند باید در میان فرزندانشان یکتا باشند.
 اگرچه احتیاجی نیست که به صورت عمومی یکتا باشند.
@@ -253,7 +253,7 @@ ReactDOM.render(
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
 ری‌اکت از keyها به عنوان یک راهنما استفاده می‌کند، اما به کامپوننت‌های شما منتقل نمی‌شوند.
-اگر به همان کلید در کامپوننتتان احتیاج دارید، به طور صریح آن‌را به عنوان یک prop با یک نام متفاوت منتقل کنید.
+اگر به همان کلید در کامپوننت خود احتیاج دارید، به طور مشخص آن‌را به عنوان یک prop با یک نام متفاوت انتقال دهید.
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -285,7 +285,8 @@ function NumberList(props) {
 }
 ```
 
- [استفاده توکار هر expression ](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد می‌دهد، بنابراین می‌توانیم نتیجه ی را `map()` در خط inline  قرار دهیم:
+ [استفاده توکار هر expression ](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد می‌دهد بنابراین می‌توان نتیجه `map()` را در خط (inline) نوشت:
+ 
 ```js{5-8}
 function NumberList(props) {
   const numbers = props.numbers;
@@ -302,6 +303,6 @@ function NumberList(props) {
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-گاهی اوقات این کار باعث واضح تر شدن کد میشود، اما این سبک نیز می تواند بد استفاده شود.همان‌طور که در جاوااسکریپت، تصمیم اینکه یک متغییر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه `map ()` بیش از حد تودرتو شد، زمان درستی است که از آن [یک کامپوننت استخراج کنید](/docs/components-and-props.html#extracting-components).
+گاهی اوقات این‌کار باعث واضح‌تر شدن کد میشود، اما این سبک نیز می‌تواند بد استفاده شود. همان‌طور که در جاوااسکریپت، تصمیم اینکه یک متغیر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه `map()` بیش از حد تودرتو شد، زمان درستی است که از آن [یک کامپوننت استخراج کنید](/docs/components-and-props.html#extracting-components).
                                                                                       
 

From a7c2a62f71fdc0a982c9bc2c69b98965fe926975 Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Mon, 8 Apr 2019 15:41:11 +0430
Subject: [PATCH 08/31] revisions

---
 content/docs/components-and-props.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index d00ecc953..e5d0aa6f2 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -134,7 +134,7 @@ ReactDOM.render(
 
 ## استخراج کامپوننت‌ها {#extracting-components}
 
-از این که کامپوننت‌ها رو به کامپوننت‌های کوچک‌تر تبدیل کنید هراسان نباشید.
+از این که کامپوننت‌ها را به کامپوننت‌های کوچک‌تر تبدیل کنید هراسان نباشید.
 
 برای مثال این کامپوننت `Comment` را در نظر بگیرید:
 
@@ -166,7 +166,7 @@ function Comment(props) {
 
 این کامپوننت `author` (یک object جاوا اسکریپت)، `text` (یک string)، و `date` (یک تاریخ) را به عنوان props دریافت می‌کند و یک کامنت (نظر) در یک شبکه اجتماعی توصیف می‌کند.
 
-به علت آشیانه‌ای بودن، تغییر دادن این کامپوننت می‌تواند دشوار باشد، و همچنین استفاده مجدد از اجزای مستقل آن آسان نیست. بیایید چند کامپوننت را از آن استخراج کنیم تا این دشواری‌ها را رفع کنیم.
+به علت آشیانه‌ای و تودرتو بودن این کامپوننت ، تغییر دادن آن می‌تواند دشوار باشد، و همچنین استفاده مجدد از اجزای مستقل آن آسان نیست. بیایید چند کامپوننت را از آن استخراج کنیم تا این دشواری‌ها را رفع کنیم.
 
 در ابتدا `Avatar` را استخراج می‌نماییم:
 
@@ -183,7 +183,7 @@ function Avatar(props) {
 
 کامپوننت `Avatar` نیازی به دانستن اینکه قرار است در داخل یک کامپوننت `Comment` رندر شود ندارد. برای همین به prop آن بجای اسمی خاص نظیر `author` به آن اسمی عام نظیر `user` داده‌ایم.
 
-ما پیشنهاد می‌کنیم که propها بدون درنظر گرفتن بستری که کامپوننت‌ها قرار است در آن استفاده شوند و از نگاه خود کامپوننت نام‌گذاری کنید.
+ما پیشنهاد می‌کنیم که prop ها بدون درنظر گرفتن بستری که کامپوننت‌ها قرار است در آن استفاده شوند و از نگاه خود کامپوننت نام‌گذاری کنید.
 
 حال می‌توانیم کامپوننت `Comment` را کمی ساده کنیم:
 

From ff9c11ac480bb8927b8a82f7bc9e2b9f93eb2c02 Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Mon, 8 Apr 2019 15:56:14 +0430
Subject: [PATCH 09/31] fix: typo

---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index e5d0aa6f2..7e41af383 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -36,7 +36,7 @@ function Welcome(props) {
 
 
 
-شما همچنین می‌توانید از کلاس‌های  [کلاس‌های ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) برای تعریف کامپوننت‌ها استفاده کنید:
+شما همچنین می‌توانید از  [کلاس‌های ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) برای تعریف کامپوننت‌ها استفاده کنید:
 
 ```js
 class Welcome extends React.Component {

From 422e7632376764f6af2f6e9bf569be93a01cab0d Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:04:20 +0200
Subject: [PATCH 10/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 7dd4a1ef4..5a6d7b9cb 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -16,7 +16,7 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-این کد آرایه `[2, 4, 6, 8, 10]` را در کنسول چاپ می‌کند.
+این کد `[2, 4, 6, 8, 10]` را در کنسول چاپ می‌کند.
 
 در ری‌اکت تبدیل آرایه‌ها به لیستی از [المنت‌ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
 

From 0ac9c2bc7dd3f117dca8bd796dc80d11d8c31e98 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:04:34 +0200
Subject: [PATCH 11/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 5a6d7b9cb..473ed0ed9 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -20,7 +20,7 @@ console.log(doubled);
 
 در ری‌اکت تبدیل آرایه‌ها به لیستی از [المنت‌ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
 
-### رندر کردن کامپوننت‌های چندگانه {#rendering-multiple-components}
+### رندر کردن جندین کامپوننت‌ {#rendering-multiple-components}
 
 می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 

From 0a260f35ce164c28aa6ee2ece511ccfc581688d2 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:04:49 +0200
Subject: [PATCH 12/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 473ed0ed9..84f4cb1b1 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -24,7 +24,7 @@ console.log(doubled);
 
 می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
-در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، در آرایه‌ی `numbers`حلقه می‌زنیم. 
+در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ی `numbers`حلقه می‌زنیم. 
 برای هر آیتم یک `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
 
 ```javascript{2-4}

From 50ed641468461a57dc2d5bea2a1113adcfa957a1 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:05:06 +0200
Subject: [PATCH 13/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 84f4cb1b1..7a9f308e4 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -25,7 +25,7 @@ console.log(doubled);
 می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
 در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ی `numbers`حلقه می‌زنیم. 
-برای هر آیتم یک `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
+برای هر آیتم یک المنت `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];

From 99d35a02258360c5d2c8a90dff992d3269548785 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:05:25 +0200
Subject: [PATCH 14/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 7a9f308e4..c5ddd5b61 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -252,7 +252,7 @@ ReactDOM.render(
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-ری‌اکت از keyها به عنوان یک راهنما استفاده می‌کند، اما به کامپوننت‌های شما منتقل نمی‌شوند.
+ری‌اکت از keyها به عنوان یک راهنما استفاده می‌کند، اما به کامپوننت‌های شما داده نمی‌شوند.
 اگر به همان کلید در کامپوننت خود احتیاج دارید، به طور مشخص آن‌را به عنوان یک prop با یک نام متفاوت انتقال دهید.
 
 ```js{3,4}

From daa02df80bd77ed3948e15cdcab2b73bd7eec591 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:05:40 +0200
Subject: [PATCH 15/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c5ddd5b61..0cc02e36b 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -253,7 +253,7 @@ ReactDOM.render(
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
 ری‌اکت از keyها به عنوان یک راهنما استفاده می‌کند، اما به کامپوننت‌های شما داده نمی‌شوند.
-اگر به همان کلید در کامپوننت خود احتیاج دارید، به طور مشخص آن‌را به عنوان یک prop با یک نام متفاوت انتقال دهید.
+اگر به همان کلید در کامپوننت خود احتیاج دارید، به صورت آشکار آن‌را به عنوان یک prop با یک نام متفاوت پاس دهید.
 
 ```js{3,4}
 const content = posts.map((post) =>

From 36f78ced32cdb5b50bc82d12358fe92cbdaf4b68 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:05:59 +0200
Subject: [PATCH 16/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 0cc02e36b..428e7b98a 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -303,6 +303,6 @@ function NumberList(props) {
 
 [**در کدپن امتحان کنید**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-گاهی اوقات این‌کار باعث واضح‌تر شدن کد میشود، اما این سبک نیز می‌تواند بد استفاده شود. همان‌طور که در جاوااسکریپت، تصمیم اینکه یک متغیر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه `map()` بیش از حد تودرتو شد، زمان درستی است که از آن [یک کامپوننت استخراج کنید](/docs/components-and-props.html#extracting-components).
+گاهی اوقات این‌کار باعث واضح‌تر شدن کد میشود، اما این سبک نیز می‌تواند بد استفاده شود. همانند جاوااسکریپت، تصمیم اینکه یک متغیر را برای خوانایی بهتر استخراج کنید یا نه، به شما بستگی دارد. به خاطر داشته باشید که اگر بدنه `map()` بیش از حد تودرتو شد، ممکن است زمان خوبی باشد که از آن [یک کامپوننت استخراج کنید](/docs/components-and-props.html#extracting-components).
                                                                                       
 

From f8adba3283000f2ef03344ae066536a79a29fc93 Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 16:06:57 +0200
Subject: [PATCH 17/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 428e7b98a..61d2706fb 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -285,7 +285,7 @@ function NumberList(props) {
 }
 ```
 
- [استفاده توکار هر expression ](/docs/introducing-jsx.html#embedding-expressions-in-jsx) JSX  را در آکولاد می‌دهد بنابراین می‌توان نتیجه `map()` را در خط (inline) نوشت:
+JSX اجازه [استفاده توکار هر expression ](/docs/introducing-jsx.html#embedding-expressions-in-jsx) را در آکولادها می‌دهد بنابراین می‌توان نتیجه `map()` را درخط (inline) نوشت:
  
 ```js{5-8}
 function NumberList(props) {

From 439145fd474c94d363f06e22123e1bfe1e449fff Mon Sep 17 00:00:00 2001
From: sJJdGG <25764288+sJJdGG@users.noreply.github.com>
Date: Wed, 10 Apr 2019 22:24:24 +0200
Subject: [PATCH 18/31] Update content/docs/lists-and-keys.md

Co-Authored-By: zahrajoulaei <zahrajoulaei@gmail.com>
---
 content/docs/lists-and-keys.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 61d2706fb..833ac793a 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -51,6 +51,7 @@ ReactDOM.render(
 ###  کامپوننت لیست ساده {#basic-list-component}
 
 معمولا شما لیست‌ها را درون یک [کامپوننت](/docs/components-and-props.html) رندر خواهید کرد.
+
 می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را باز گرداند. 
 
 ```javascript{3-5,7,13}

From 294d7872ea984cd2ff535e8568a360b2e2bc1a9e Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Sat, 13 Apr 2019 23:00:40 +0200
Subject: [PATCH 19/31] :memo: do the requested changes by sJJdGG

---
 content/docs/lists-and-keys.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 833ac793a..2fd6f9ae8 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -7,7 +7,7 @@ next: forms.html
 ---
 
 ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوا‌اسکریپت بپردازیم.
-با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌ی `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
+با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌‌ای از اعداد با نام متغیر `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
 
 
 ```javascript{2}
@@ -20,11 +20,11 @@ console.log(doubled);
 
 در ری‌اکت تبدیل آرایه‌ها به لیستی از [المنت‌ها](/docs/rendering-elements.html) به صورت مشابه انجام می‌شود.
 
-### رندر کردن جندین کامپوننت‌ {#rendering-multiple-components}
+### رندر کردن چندین کامپوننت‌ {#rendering-multiple-components}
 
 می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
-در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ی `numbers`حلقه می‌زنیم. 
+در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ای از اعداد به نام‌ `numbers`حلقه می‌زنیم. 
 برای هر آیتم یک المنت `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
 
 ```javascript{2-4}

From f6a842b9b6d8a6c092fd2415818896ec3565532d Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@oculus.com>
Date: Mon, 15 Apr 2019 17:44:46 +0100
Subject: [PATCH 20/31] Update addons-shallow-compare.md (#1924)

---
 content/docs/addons-shallow-compare.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/addons-shallow-compare.md b/content/docs/addons-shallow-compare.md
index 99af2495c..44bee0cf3 100644
--- a/content/docs/addons-shallow-compare.md
+++ b/content/docs/addons-shallow-compare.md
@@ -8,7 +8,7 @@ category: Reference
 
 > Note:
 >
-> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
+> `shallowCompare` is a legacy add-on. Use [`React.memo`](/docs/react-api.html#reactmemo) or [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
 
 **Importing**
 

From 5db92a31c2e7c7daea527681bfabe35bde4a4c6e Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Tue, 16 Apr 2019 18:50:30 +0200
Subject: [PATCH 21/31] :memo: do the requested changes about numbers.

---
 content/docs/lists-and-keys.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 2fd6f9ae8..89e439a5f 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -7,7 +7,7 @@ next: forms.html
 ---
 
 ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوا‌اسکریپت بپردازیم.
-با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌‌ای از اعداد با نام متغیر `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
+با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌‌ای از اعداد با نام  `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
 
 
 ```javascript{2}
@@ -24,7 +24,7 @@ console.log(doubled);
 
 می‌توانید با استفاده از آکولاد `{}`، مجموعه‌ای از المنت‌ها را بسازید و [آن‌ها را در JSX درج کنید](/docs/introducing-jsx.html#embedding-expressions-in-jsx).
 
-در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ای از اعداد به نام‌ `numbers`حلقه می‌زنیم. 
+در قسمت زیر ما با استفاده از تابع [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)  در جاوا‌اسکریپت، بر‌روی آرایه‌ ی‌ `numbers`حلقه می‌زنیم. 
 برای هر آیتم یک المنت `<li>` برمی‌گردانیم و در نهایت  نتیجه‌ی آرایه‌ی المان‌ها را به `listItems` اختصاص می‌دهیم. :
 
 ```javascript{2-4}
@@ -52,7 +52,7 @@ ReactDOM.render(
 
 معمولا شما لیست‌ها را درون یک [کامپوننت](/docs/components-and-props.html) رندر خواهید کرد.
 
-می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ای از `numbers` را بگیرد و لیستی از المنت‌ها را باز گرداند. 
+می‌توانیم مثال قبلی را طوری بیهنه‌سازی کنیم که یک کامپوننت آرایه‌ ی `numbers` را بگیرد و لیستی از المنت‌ها را باز گرداند. 
 
 ```javascript{3-5,7,13}
 function NumberList(props) {

From 7ad08180f87118a7739069f4eb6049f10ac3d48c Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Wed, 17 Apr 2019 01:39:53 +0430
Subject: [PATCH 22/31] revisions

---
 content/docs/components-and-props.md | 40 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 7e41af383..b5c8286a9 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,9 +16,9 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تبدیل کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید API مربوط به کامپوننت ها و جزییات بیشتر را در این [لینک](/docs/react-component.html) مطالعه فرمایید.
+کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تبدیل کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید مرجع API کامپوننت‌ با جزئیات بیشتر را [اینجا](/docs/react-component.html) پیدا کنید.
 
-از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوا اسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را تولید می‌کنند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
+از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوا اسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را باز می‌گردانند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
 
 
 ## کامپوننت‌هایی از جنس تابع و کلاس {#function-and-class-components}
@@ -81,7 +81,7 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/rendering-a-component)
+[روی CodePen امتحان کنید](codepen://components-and-props/rendering-a-component)
 
 بیایید مرور کنیم که در این مثال چه اتفاقی می‌افتد:
 
@@ -89,21 +89,21 @@ ReactDOM.render(
 
 ۲. ری‌اکت کامپوننت `Welcome` را به همراه `{name: 'Sara'}` که در ورودی تابع به عنوان `props` تعریف شده است را پردازش می‌کند.
 
-۳. کامپوننت `Welcome` ما در نتیجه یک المنت  تولید می‌کند که حاوی `<h1>Hello, Sara</h1>` است.
+۳. کامپوننت `Welcome` ما یک المنت `<h1>Hello, Sara</h1>` را به عنوان نتیجه باز می‌گرداند.
 
 ۴. DOM ری‌اکت به صورت بهینه DOM را به‌روزرسانی می‌کند تا  `<h1>Hello, Sara</h1>` را نمایش دهد.
 
->**نکته:** همیشه نام کامپوننت‌ها را با حروف بزرگ انگلیسی شروع کنید.
+>**نکته:** همیشه نام کامپوننت‌ها را با یک حرف بزرگ شروع کنید.
 >
->ری‌اکت با کامپوننت‌هایی که با حروف کوچک انگلیسی شروع شده باشند همانند تگ‌های DOM برخورد می‌کند. برای مثال تگ `<div />` بیانگر یک تگ HTML است , اما `<Welcome />` بیانگر یک کامپوننت است و بنابرین لازم است `Welcome` در scope تابع کامپوننت ما باشد.
+>ری‌اکت با کامپوننت‌هایی که با حروف کوچک شروع شده باشند همانند تگ‌های DOM برخورد می‌کند. برای مثال تگ `<div />` بیانگر یک تگ HTML است , اما `<Welcome />` بیانگر یک کامپوننت است و بنابرین لازم است `Welcome` در scope تابع کامپوننت ما باشد.
 >
->برای اطلاعات بیشتر درباره این معاهده ، لطفا  [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) را مطالعه فرمایید.
+>برای یادگیری دلیل این قرارداد، لطفا  [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) را مطالعه فرمایید.
 
-## طراحی کامپوننت‌ها {#composing-components}
+## ترکیب کامپوننت‌ها {#composing-components}
 
-کامپوننت‌ها می‌توانند در خروجی خود به دیگر کامپوننت‌ها اشاره کنند. این به ما اجازه می‌دهد تا یک کامپوننت را برای هر سطحی از جزییات استفاده کنیم. در برنامه‌های ری‌اکتی یک دکمه، یک فرم، یک دیالوگ، و یک صفحه همگی به صورت کامپوننت بیان می‌شوند.
+کامپوننت‌ها می‌توانند در خروجی خود به دیگر کامپوننت‌ها اشاره کنند. این به ما اجازه می‌دهد تا یک abstraction کامپوننت را برای هر سطحی از جزییات استفاده کنیم. در برنامه‌های ری‌اکتی یک دکمه، یک فرم، یک دیالوگ، و یک صفحه همگی به صورت کامپوننت بیان می‌شوند.
 
-برای مثال ما می‌توانیم یک کامپوننت به نام `App` بسازیم که کامپوننت `Welcome` را بارها رندر می‌کند:
+برای مثال ما می‌توانیم یک کامپوننت به نام `App` بسازیم که `Welcome` را بارها رندر می‌کند:
 
 
 ```js{8-10}
@@ -127,9 +127,9 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/composing-components)
+[روی CodePen امتحان کنید](codepen://components-and-props/composing-components)
 
-معمولا، پروژه‌های تازه ری‌اکت دارای یک کامپوننت `App` واحد در بالاترین سطح هستند. اما اگر شما ری‌اکت را با پروژه‌ای موجود ادغام می‌کنید، می‌توانید از سطوح پایین به بالا طراحی کنید، برای مثال از یک کامپوننت کوچک مانند `Button` شروع کنید و تدریجا تا بالای سلسله مراتب view طراحی را ادامه دهید.
+معمولا، پروژه‌های جدید ری‌اکت دارای یک کامپوننت `App` واحد در بالاترین سطح هستند. اما اگر شما ری‌اکت را با پروژه‌ای موجود ادغام می‌کنید، می‌توانید از سطوح پایین به بالا طراحی کنید، برای مثال از یک کامپوننت کوچک مانند `Button` شروع کنید و تدریجا تا بالای سلسله مراتب view طراحی را ادامه دهید.
 
 
 ## استخراج کامپوننت‌ها {#extracting-components}
@@ -162,7 +162,7 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components)
+[روی CodePen امتحان کنید](codepen://components-and-props/extracting-components)
 
 این کامپوننت `author` (یک object جاوا اسکریپت)، `text` (یک string)، و `date` (یک تاریخ) را به عنوان props دریافت می‌کند و یک کامنت (نظر) در یک شبکه اجتماعی توصیف می‌کند.
 
@@ -181,7 +181,7 @@ function Avatar(props) {
 }
 ```
 
-کامپوننت `Avatar` نیازی به دانستن اینکه قرار است در داخل یک کامپوننت `Comment` رندر شود ندارد. برای همین به prop آن بجای اسمی خاص نظیر `author` به آن اسمی عام نظیر `user` داده‌ایم.
+کامپوننت `Avatar` نیازی به دانستن اینکه قرار است در داخل یک `Comment` رندر شود ندارد. برای همین به prop آن بجای `author` اسمی عام نظیر `user` داده‌ایم.
 
 ما پیشنهاد می‌کنیم که prop ها بدون درنظر گرفتن بستری که کامپوننت‌ها قرار است در آن استفاده شوند و از نگاه خود کامپوننت نام‌گذاری کنید.
 
@@ -241,11 +241,11 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components-continued)
+[روی CodePen امتحان کنید](codepen://components-and-props/extracting-components-continued)
 
 استخراج کامپوننت‌ها شاید در ابتدا به نظر کار سختی بیاید، اما داشتن یک پالت از کامپوننت‌های قابل استفاده مجدد در اپ‌های بزرگتر بسیار به کار می‌آید. به عنوان یک قانون کلی در نظر داشته باشید که اگر قسمتی از رابط کاربری شما بارها استفاده شده است (نظیر `Button`, `Panel` , `Avatar`) و یا اینکه قسمتی از رابط کاربری پیچیدگی منحصر به فرد خود را دارد (نظیر `App`, `FeedStory`, `Comment`) آن قسمت کاندیدای مناسبی برای تبدیل شدن به یک کامپوننت قابل استفاده مجدد است.
 
-## Propها فقط قابل خواندن هستند {#props-are-read-only}
+## propها فقط قابل خواندن هستند {#props-are-read-only}
 
 بدون در نظر گرفتن اینکه شما یک کامپوننت را به عنوان  [یک تابع یا یک کلاس](#function-and-class-components) تعریف کرده‌اید، آن کامپوننت نباید هرگز propهای خودش را تغییر دهد.
 این تابع `sum` را در نظر بگیرید:
@@ -256,9 +256,9 @@ function sum(a, b) {
 }
 ```
 
-اینگونه توابع  ["خالص یا pure"](https://en.wikipedia.org/wiki/Pure_function) نامیده می‌شوند زیرا سعی نمی‌کنند که ورودی خود را تغییر دهند و همیشه با ورودی‌های ثابت و مشخص خروجی‌های ثابتی را نمایش می‌دهند.
+اینگونه توابع  ["خالص (pure)"](https://en.wikipedia.org/wiki/Pure_function) نامیده می‌شوند زیرا سعی نمی‌کنند که ورودی خود را تغییر دهند و همیشه با ورودی‌های مشخص خروجی‌های ثابتی را نمایش می‌دهند.
 
-در نقطه متقابل این کامپوننت "ناخالص یا impure" است زیرا ورودی خود را تغییر می‌دهد:
+در نقطه متقابل این کامپوننت "ناخالص (impure)" است زیرا ورودی خود را تغییر می‌دهد:
 
 ```js
 function withdraw(account, amount) {
@@ -268,7 +268,7 @@ function withdraw(account, amount) {
 
 ری‌اکت خیلی منعطف است اما یک قانون سختگیرانه دارد:
 
-**تمامی کامپوننت‌های ری‌اکت باید در نسبت با propهای خود همانند توابع خالص عمل کنند.**
+**تمامی کامپوننت‌های ری‌اکت باید نسبت به propهای خود همانند توابع خالص عمل کنند.**
 
-البته رابط‌های کاربری اپ‌ها داینامیک هستند و با زمان تغییر می‌کنند. در [بخش بعدی](/docs/state-and-lifecycle.html)، ما یک مفهوم جدید به نام "state" را معرفی می‌کنیم. State به کامپوننت‌های ری‌اکت اجازه می‌دهد تا خروجی خود را با توجه به اعمال کاربر، پاسخ‌های دریافتی از شبکه، و هر چیز دیگر در زمان مورد نیاز بدون اینکه این قانون را نقض کنند تغییر دهند.
+البته رابط‌های کاربری اپ‌ها داینامیک هستند و با زمان تغییر می‌کنند. در [بخش بعدی](/docs/state-and-lifecycle.html)، ما یک مفهوم جدید به نام "state" را معرفی می‌کنیم. State به کامپوننت‌های ری‌اکت اجازه می‌دهد تا خروجی خود را در جواب به عملکرد کاربر، پاسخ‌های دریافتی از شبکه، و هر چیز دیگر در زمان مورد نیاز بدون اینکه این قانون را نقض کنند تغییر دهند.
 

From f73ed1060bb70dc376bf93b6254091ff1244b189 Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Wed, 17 Apr 2019 14:59:49 +0430
Subject: [PATCH 23/31] final revisions

---
 content/docs/components-and-props.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index b5c8286a9..b145a3363 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -18,12 +18,12 @@ next: state-and-lifecycle.html
 
 کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تبدیل کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید مرجع API کامپوننت‌ با جزئیات بیشتر را [اینجا](/docs/react-component.html) پیدا کنید.
 
-از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوا اسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را باز می‌گردانند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
+از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوااسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را باز می‌گردانند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
 
 
 ## کامپوننت‌هایی از جنس تابع و کلاس {#function-and-class-components}
 
-ساده‌ترین راه برای تعریف کردن یک کامپوننت، نوشتن یک تابع جاوا اسکریپت است:
+ساده‌ترین راه برای تعریف کردن یک کامپوننت، نوشتن یک تابع جاوااسکریپت است:
 
 
 ```js
@@ -32,7 +32,7 @@ function Welcome(props) {
 }
 ```
 این تابع یک کامپوننت قابل قبول ری‌اکت است زیرا یک قطعه ورودی قابل پردازش (props, کوچک شده properties به معنی متعلقات) همراه با اطلاعات دریافت می‌کند و یک المنت ری‌اکت تولید می‌کند.
-به این نوع کامپوننت‌ها، «کامپوننت‌‌های تابع‌» گفته می‌شود زیرا آنها در واقعیت تابع‌هایی از جاوا اسکریپت هستند.
+به این نوع کامپوننت‌ها، «کامپوننت‌‌های تابع‌» گفته می‌شود زیرا آنها در واقعیت تابع‌هایی از جاوااسکریپت هستند.
 
 
 
@@ -95,7 +95,7 @@ ReactDOM.render(
 
 >**نکته:** همیشه نام کامپوننت‌ها را با یک حرف بزرگ شروع کنید.
 >
->ری‌اکت با کامپوننت‌هایی که با حروف کوچک شروع شده باشند همانند تگ‌های DOM برخورد می‌کند. برای مثال تگ `<div />` بیانگر یک تگ HTML است , اما `<Welcome />` بیانگر یک کامپوننت است و بنابرین لازم است `Welcome` در scope تابع کامپوننت ما باشد.
+>ری‌اکت با کامپوننت‌هایی که با حروف کوچک شروع شده باشند همانند تگ‌های DOM برخورد می‌کند. برای مثال تگ `<div />` بیانگر یک تگ HTML است , اما `<Welcome />` بیانگر یک کامپوننت است و بنابرین لازم است `Welcome` در scope باشد.
 >
 >برای یادگیری دلیل این قرارداد، لطفا  [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) را مطالعه فرمایید.
 
@@ -164,9 +164,9 @@ function Comment(props) {
 
 [روی CodePen امتحان کنید](codepen://components-and-props/extracting-components)
 
-این کامپوننت `author` (یک object جاوا اسکریپت)، `text` (یک string)، و `date` (یک تاریخ) را به عنوان props دریافت می‌کند و یک کامنت (نظر) در یک شبکه اجتماعی توصیف می‌کند.
+این کامپوننت author (یک شیء)، text (یک string)، و date (یک تاریخ) را به عنوان props دریافت و یک دیدگاه را در یک شبکه اجتماعی توصیف می‌کند.
 
-به علت آشیانه‌ای و تودرتو بودن این کامپوننت ، تغییر دادن آن می‌تواند دشوار باشد، و همچنین استفاده مجدد از اجزای مستقل آن آسان نیست. بیایید چند کامپوننت را از آن استخراج کنیم تا این دشواری‌ها را رفع کنیم.
+به علت تودرتو بودن این کامپوننت ، تغییر آن می‌تواند دشوار باشد، و همچنین استفاده مجدد از اجزای مستقل آن آسان نیست. بیایید چند کامپوننت را از آن استخراج کنیم تا این دشواری‌ها را رفع کنیم.
 
 در ابتدا `Avatar` را استخراج می‌نماییم:
 
@@ -183,9 +183,9 @@ function Avatar(props) {
 
 کامپوننت `Avatar` نیازی به دانستن اینکه قرار است در داخل یک `Comment` رندر شود ندارد. برای همین به prop آن بجای `author` اسمی عام نظیر `user` داده‌ایم.
 
-ما پیشنهاد می‌کنیم که prop ها بدون درنظر گرفتن بستری که کامپوننت‌ها قرار است در آن استفاده شوند و از نگاه خود کامپوننت نام‌گذاری کنید.
+ما پیشنهاد می‌کنیم که propsها از دیدگاه خود کامپوننت نام‌گذاری شوند، نه بستری که قرار است در آن به‌کار گرفته شوند.
 
-حال می‌توانیم کامپوننت `Comment` را کمی ساده کنیم:
+حال می‌توانیم `Comment` را کمی ساده کنیم:
 
 ```js{5}
 function Comment(props) {
@@ -208,7 +208,7 @@ function Comment(props) {
 }
 ```
 
-سپس ما کامپوننت `UserInfo` را استخراج می‌کنیم که کامپوننت `Avatar` را در کنار اسم کاربر رندر می‌کند:
+سپس ما کامپوننت `UserInfo` را استخراج می‌کنیم که `Avatar` را در کنار اسم کاربر رندر می‌کند:
 
 ```js{3-8}
 function UserInfo(props) {
@@ -223,7 +223,7 @@ function UserInfo(props) {
 }
 ```
 
-این به ما کمک می‌کند تا کامپوننت `Comment` را حتی بیشتر از این ساده کنیم:
+این به ما کمک می‌کند تا `Comment` را حتی بیشتر از این ساده کنیم:
 
 ```js{4}
 function Comment(props) {
@@ -243,7 +243,7 @@ function Comment(props) {
 
 [روی CodePen امتحان کنید](codepen://components-and-props/extracting-components-continued)
 
-استخراج کامپوننت‌ها شاید در ابتدا به نظر کار سختی بیاید، اما داشتن یک پالت از کامپوننت‌های قابل استفاده مجدد در اپ‌های بزرگتر بسیار به کار می‌آید. به عنوان یک قانون کلی در نظر داشته باشید که اگر قسمتی از رابط کاربری شما بارها استفاده شده است (نظیر `Button`, `Panel` , `Avatar`) و یا اینکه قسمتی از رابط کاربری پیچیدگی منحصر به فرد خود را دارد (نظیر `App`, `FeedStory`, `Comment`) آن قسمت کاندیدای مناسبی برای تبدیل شدن به یک کامپوننت قابل استفاده مجدد است.
+استخراج کامپوننت‌ها شاید در ابتدا به نظر کار سختی بیاید، اما داشتن یک پالت از کامپوننت‌هایی با قابلیت استفاده مجدد در اپ‌های بزرگتر، هزینه آن را باز می‌گرداند. به عنوان یک قانون کلی در نظر داشته باشید که اگر قسمتی از رابط کاربری شما بارها استفاده شده است (نظیر `Button`, `Panel` , `Avatar`) و یا اینکه قسمتی از رابط کاربری پیچیدگی منحصر به فرد خود را دارد (نظیر `App`, `FeedStory`, `Comment`) آن قسمت کاندیدای مناسبی برای تبدیل شدن به یک کامپوننت قابل استفاده مجدد است.
 
 ## propها فقط قابل خواندن هستند {#props-are-read-only}
 

From d2b0d45b3fb688f31bc436c26262c381cba5e748 Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Wed, 17 Apr 2019 15:10:07 +0430
Subject: [PATCH 24/31] revisions

---
 content/docs/components-and-props.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index b145a3363..75cd571f7 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,7 +16,7 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تبدیل کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید مرجع API کامپوننت‌ با جزئیات بیشتر را [اینجا](/docs/react-component.html) پیدا کنید.
+کامپوننت‌ها به شما اجازه می‌دهند رابط کاربری را به بخش‌های مستقل قابل استفاده مجدد تقسیم کنید و این بخش‌ها را به صورت مجزا در نظر بگیرید. این صفحه مقدمه‌ای برای مفهوم کامپوننت به شما ارائه می‌دهد. شما می‌توانید مرجع API کامپوننت‌ با جزئیات بیشتر را [اینجا](/docs/react-component.html) پیدا کنید.
 
 از لحاظ مفهومی کامپوننت‌ها همانند توابع جاوااسکریپت هستند. آنها ورودی‌های دلخواه خود (props) را دریافت می‌کنند و المنت‌هایی از ری‌اکت را باز می‌گردانند که توصیف کننده آنچه باید روی صفحه نمایان شود است.  
 
@@ -31,7 +31,7 @@ function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
 ```
-این تابع یک کامپوننت قابل قبول ری‌اکت است زیرا یک قطعه ورودی قابل پردازش (props, کوچک شده properties به معنی متعلقات) همراه با اطلاعات دریافت می‌کند و یک المنت ری‌اکت تولید می‌کند.
+این تابع یک کامپوننت ری‌اکت قابل‌قبول است، زیرا یک "props" (که کوچک شده properties است) که آرگومانی از جنس شی همراه با داده است را دریافت و یک المنت ری‌اکت را باز می‌گرداند.
 به این نوع کامپوننت‌ها، «کامپوننت‌‌های تابع‌» گفته می‌شود زیرا آنها در واقعیت تابع‌هایی از جاوااسکریپت هستند.
 
 
@@ -57,17 +57,17 @@ class Welcome extends React.Component {
 ```js
 const element = <div />;
 ```
-اما المنت‌ها می‌توانند بیانگر کامپوننت‌‌هایی که از توسط کاربر تعریف شده نیز باشند:
+اما المنت‌ها می‌توانند بیانگر کامپوننت‌‌هایی که توسط کاربر تعریف شده نیز باشند:
 
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-زمانی که ری‌اکت با المنتی مواجه می‌شود که بیانگر یک کامپوننت تعریف شده توسط کاربر باشد، یک ورودی JSX واحد (object) را به عنوان ورودی دریافت می‌کند. ما این object را "props" می‌نامیم. 
+مانی که ری‌اکت با المنتی مواجه می‌شود که بیانگر یک کامپوننت تعریف شده توسط کاربر باشد، ویژگی‌های JSX را در قالب یک شی واحد به کامپوننت منتقل می‌کند. ما این object را “props” می‌نامیم.
 
 
-برای مثال کد زیر "Hello, Sara" را بر روی صفحه رندر می‌کند:
+برای مثال کد زیر "Hello, Sara" را روی صفحه رندر می‌کند:
 
 ```js{1,5}
 function Welcome(props) {
@@ -83,11 +83,11 @@ ReactDOM.render(
 
 [روی CodePen امتحان کنید](codepen://components-and-props/rendering-a-component)
 
-بیایید مرور کنیم که در این مثال چه اتفاقی می‌افتد:
+بیایید جمع‌بندی کنیم که در این مثال چه اتفاقی می‌افتد:
 
 ۱. ما تابع `ReactDOM.render()` را با المنت `<Welcome name="Sara" />` فرا می‌خوانیم.
 
-۲. ری‌اکت کامپوننت `Welcome` را به همراه `{name: 'Sara'}` که در ورودی تابع به عنوان `props` تعریف شده است را پردازش می‌کند.
+۲. ری‌اکت کامپوننت `Welcome` را به همراه `{name: 'Sara'}` که در ورودی تابع به عنوان `props` تعریف شده است، فرا می‌خواند.
 
 ۳. کامپوننت `Welcome` ما یک المنت `<h1>Hello, Sara</h1>` را به عنوان نتیجه باز می‌گرداند.
 

From fa3368552fb80e3e05894081ebe109f8a8c9fe0d Mon Sep 17 00:00:00 2001
From: Mohsen <mohsenkhanpour@gmail.com>
Date: Wed, 17 Apr 2019 23:34:54 +0430
Subject: [PATCH 25/31] typo fix

---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 75cd571f7..c853e2952 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -64,7 +64,7 @@ const element = <div />;
 const element = <Welcome name="Sara" />;
 ```
 
-مانی که ری‌اکت با المنتی مواجه می‌شود که بیانگر یک کامپوننت تعریف شده توسط کاربر باشد، ویژگی‌های JSX را در قالب یک شی واحد به کامپوننت منتقل می‌کند. ما این object را “props” می‌نامیم.
+زمانی که ری‌اکت با المنتی مواجه می‌شود که بیانگر یک کامپوننت تعریف شده توسط کاربر باشد، ویژگی‌های JSX را در قالب یک شی واحد به کامپوننت منتقل می‌کند. ما این object را “props” می‌نامیم.
 
 
 برای مثال کد زیر "Hello, Sara" را روی صفحه رندر می‌کند:

From f7edf5d1802eb13b40c4f791b0c5bba97f34089b Mon Sep 17 00:00:00 2001
From: Zahra <zahrajoulaei@gmail.com>
Date: Wed, 17 Apr 2019 21:08:29 +0200
Subject: [PATCH 26/31] :memo: add an enter for paragraph!

---
 content/docs/lists-and-keys.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 89e439a5f..7a88bbb18 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -7,6 +7,7 @@ next: forms.html
 ---
 
 ابتدا اجازه دهید به بررسی نحوه تبدیل لیست‌ها در جاوا‌اسکریپت بپردازیم.
+
 با توجه به کد زیر، ما از تابع[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) استفاده می‌کنیم  تا آرایه‌‌ای از اعداد با نام  `numbers` را گرفته و مقادیرش را دو برابر کند. آرایه‌ی جدیدی که توسط `map()` برگشته را به متغیر `doubled`اختصاص می‌دهیم و آن را چاپ می‌کنیم.
 
 

From 348c14c3d5e42b3a3414994e3741493c434e7601 Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Sat, 20 Apr 2019 21:52:16 +0400
Subject: [PATCH 27/31] Hooks API updated

---
 content/docs/hooks-reference.md | 262 ++++++++++++++++++--------------
 1 file changed, 147 insertions(+), 115 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 24145eac2..2834d3e04 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -1,22 +1,23 @@
 ---
 id: hooks-reference
-title: Hooks API Reference
+title: مرجع API هوک‌ها
 permalink: docs/hooks-reference.html
 prev: hooks-custom.html
 next: hooks-faq.html
 ---
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*هوک‌ها* در نسخه‌ی 16.8 به ری‌اکت افزوده شدند. با استفاده از آنها شما می‌توانید از state و سایر ویژگی‌های ری‌اکت بدون نیاز به نوشتن کلاس استفاده کنید.
 
-This page describes the APIs for the built-in Hooks in React.
+در این صفحه شما تمام رابط‌های کاربری (API)  برای هوک‌هایی که پیش-ساخته اند را خواهید یافت.
 
-If you're new to Hooks, you might want to check out [the overview](/docs/hooks-overview.html) first. You may also find useful information in the [frequently asked questions](/docs/hooks-faq.html) section.
+اگر تازه با هوک‌ها آشنا شده اید، شاید بهتر باشد اول از همه  [مرور کلی](/docs/hooks-overview.html) آنها را بخوانید. همچنین در بخش   [پاسخ به سوالات متداول](/docs/hooks-faq.html) هم اطلاعات مفیدی خواهید یافت.
 
-- [Basic Hooks](#basic-hooks)
+
+- [هوک‌های اولیه](#basic-hooks)
   - [`useState`](#usestate)
   - [`useEffect`](#useeffect)
   - [`useContext`](#usecontext)
-- [Additional Hooks](#additional-hooks)
+- [هوک‌های دیگر](#additional-hooks)
   - [`useReducer`](#usereducer)
   - [`useCallback`](#usecallback)
   - [`useMemo`](#usememo)
@@ -25,7 +26,7 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o
   - [`useLayoutEffect`](#uselayouteffect)
   - [`useDebugValue`](#usedebugvalue)
 
-## Basic Hooks {#basic-hooks}
+## هوک‌های اولیه {#basic-hooks}
 
 ### `useState` {#usestate}
 
@@ -33,25 +34,27 @@ If you're new to Hooks, you might want to check out [the overview](/docs/hooks-o
 const [state, setState] = useState(initialState);
 ```
 
-Returns a stateful value, and a function to update it.
+این هوک، دو چیز را از خود باز می‌گرداند: یک متغیر برای  state و یک تابع برای بروز رسانی همان متغیر.
 
-During the initial render, the returned state (`state`) is the same as the value passed as the first argument (`initialState`).
+اولین آرگومانی که برای یک هوک تعریف می‌کنید (`initialState`)، همان متغیری خواهد بود که در رندر اولیه،  (`state`) شما خواهد شد. 
 
-The `setState` function is used to update the state. It accepts a new state value and enqueues a re-render of the component.
+تابع `setState`  برای به‌روز‌ رسانی آن متغیر استفاده می‌شود. می‌توان به آن متغیر جدیدی داد که باعث تغییر state شده و در نتیجه رندر مجدد آن کامپوننت را در صف اجرا قرار می‌دهد.
 
 ```js
 setState(newState);
 ```
+در رندر‌های بعدی، اولین متغیر بازگردانده شده از `useState` ، جدیدترین state آن کامپوننت بعد از به‌روز‌ رسانی خواهد بود.
 
-During subsequent re-renders, the first value returned by `useState` will always be the most recent state after applying updates.
 
->Note
+>توجه
 >
->React guarantees that `setState` function identity is stable and won't change on re-renders. This is why it's safe to omit from the `useEffect` or `useCallback` dependency list.
+>ری‌اکت تضمی‌ن می‌کند که تابع `setState`  ماهیت خودش را در زمان رندرهای بعدی حفظ کند. از همی‌ن رو، با اطمی‌نان کامل می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  خارج کرد.
+
 
-#### Functional updates {#functional-updates}
+#### به‌روز‌ رسانی از طریق تابع {#functional-updates}
+
+اگر state جدید با استفاده از `setState`  قبلی محاسبه می‌شود، در آن صورت می‌توانید یک تابع را به عنوان آرگومان در setState وارد کنید. این تابع، متغیر پیشین برای state را دریافت خواهد کرد و متغیر به روز شده را خروجی خواهد داد. در مثال زیر، شما کامپوننتی را می‌بینید که کارش شمارش است و هر دو شکل تابع `setState` در آن استفاده شده است.
 
-If the new state is computed using the previous state, you can pass a function to `setState`. The function will receive the previous value, and return an updated value. Here's an example of a counter component that uses both forms of `setState`:
 
 ```js
 function Counter({initialCount}) {
@@ -67,24 +70,26 @@ function Counter({initialCount}) {
 }
 ```
 
-The "+" and "-" buttons use the functional form, because the updated value is based on the previous value. But the "Reset" button uses the normal form, because it always sets the count back to the initial value.
+دکمه‌های “+”  و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state  باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همی‌شه متغیر را به آن مقداری که در ابتدا برایش تعریف شده بود باز می‌گرداند.
+
 
 > Note
 >
-> Unlike the `setState` method found in class components, `useState` does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:
+> هنگامی‌که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
 >
 > ```js
 > setState(prevState => {
->   // Object.assign would also work
+>   // همچنین می‌توان استفاده کرد از Object.assign
 >   return {...prevState, ...updatedValues};
 > });
 > ```
 >
-> Another option is `useReducer`, which is more suited for managing state objects that contain multiple sub-values.
+>یک راه دیگر برای محقق کردن این هدف، استفاده از `useReducer` است اما این روش برای به‌روز‌ رسانی آبجکت‌هایی مفید است که متغیرهای چند لایه و عمیق‌تری دارند.
 
-#### Lazy initial state {#lazy-initial-state}
+#### تعریف اولیه state از نوع کُند (Lazy initial state) {#lazy-initial-state}
+
+آرگومان `initialState`  همان state است که در رندر اولیه استفاده می‌شود. اما در رندر‌های بعدی، ندیده گرفته می‌شود. اگر برای تولید متغیر state اولیه، نیاز به محاسبات سنگین دارید، می‌توانید آن را در یک تابع قرار دهید. این تابع فقط در رندر اولیه کامپوننت اجرا خواهد شد.
 
-The `initialState` argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:
 
 ```js
 const [state, setState] = useState(() => {
@@ -93,11 +98,12 @@ const [state, setState] = useState(() => {
 });
 ```
 
-#### Bailing out of a state update {#bailing-out-of-a-state-update}
+#### انصراف دادن از به‌روز‌ رسانی state {#bailing-out-of-a-state-update}
+
+اگر متغیر استفاده شده در هوک state، پس از به‌روز‌ رسانی، هنچنان برابر با متغیر فعلی از آب در بیاید (یعنی تغییری نکرده باشد)، ری‌اکت از رندر مجدد فرزندان آن کامپوننت و اجرا کردن افکت‌ها (effects) اجتناب خواهد کرد. (ری‌اکت  برای مقایسه از الگوریتم [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) استفاده می‌کند.)
 
-If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
+دقت کنید که ممکن است ری‌اکت نیاز داشته باشد تا آن کامپوننت خاص را پیش از انصراف دادن، دوباره رندر کند. این مسئله جای نگرانی ندارد چون در آن صورت، بی دلیل وارد المنت‌هایی در لایه‌های عمیق‌تر نخواهد شد. اگر در حین رندر کردن محاسبات سنگین انجام می‌دهید، می‌توانید با استفاده از  `useMemo` آنها را بهینه کنید.
 
-Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`.
 
 ### `useEffect` {#useeffect}
 
@@ -105,45 +111,50 @@ Note that React may still need to render that specific component again before ba
 useEffect(didUpdate);
 ```
 
-Accepts a function that contains imperative, possibly effectful code.
+یک تابع دریافت می‌کند. کدی که در تابع هست حالت دستوری داشته و احتمالا افکت ایجاد خواهد کرد.
+
+به فرآیندهایی نظیر تغییر داده‌ها، اشتراک داده‌ها (subscriptions)، تایمر‌ها، رخدادنگاری (logging) و از این قبیل، "اثرات جانبی" می‌گوییم. ری‌اکت کدی نوشته شده در بدنه ی یک کامپوننت از نوع تابعی را _فاز رندر_ می‌نامد. در این فاز، شما اجازه ندارید که اثرات جانبی داشته باشید. اگر اجازه ی این کار را داشتید باعث می‌شد که خطاهای سردرگم کننده ای بوجودآید و در نمایش رابط کاربری ناهماهنگی دیده شود.
+
+به جای آن، از  `useEffect` استفاده کنید. تابعی که شما به `useEffect` می‌دهید زمانی اجرا می‌شود که رندر به صفحه ی نمایش ارسال شده باشد. می‌توانید اینگونه فرض کنید که استفاده از این افکت، به شما راه فراری می‌دهد تا از دنیای تابع گرایانه ی ری‌اکت خارج شوید و وارد دنیای برنامه نویسی دستوری شوید.
 
-Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React's _render phase_). Doing so will lead to confusing bugs and inconsistencies in the UI.
+به طور پیش فرض، افکت‌ها بعد از هر رندر فراخوانی می‌شوند، اما می‌توانید آنها را طوری تعریف کنید که فقط [در صورت تغییر بعضی از متغیر‌ها اجرا شوند](#conditionally-firing-an-effect).
 
-Instead, use `useEffect`. The function passed to `useEffect` will run after the render is committed to the screen. Think of effects as an escape hatch from React's purely functional world into the imperative world.
 
-By default, effects run after every completed render, but you can choose to fire it [only when certain values have changed](#conditionally-firing-an-effect).
+#### پاکسازی یک افکت {#cleaning-up-an-effect}
 
-#### Cleaning up an effect {#cleaning-up-an-effect}
+غالبا افکت‌ها، منابعی از داده‌ها را ایجاد می‌کنند، اما پیش از آنکه کامپوننت ما از صفحه حذف شود، لازم است که این منابع را پاکسازی کنیم. به طور مثال اشتراک (subscription) و یا شناسه ی یک تایمر. برای پاکسازی آنها، می‌توانیم یک تابع را به عنوان خروجی `useEffect`  استفاده کنیم که کار پاکسازی را برایمان انجام دهد. مثلا برای ایجاد یک اشتراک:
 
-Often, effects create resources that need to be cleaned up before the component leaves the screen, such as a subscription or timer ID. To do this, the function passed to `useEffect` may return a clean-up function. For example, to create a subscription:
 
 ```js
 useEffect(() => {
   const subscription = props.source.subscribe();
   return () => {
-    // Clean up the subscription
+    // اشتراک را پاک کن
     subscription.unsubscribe();
   };
 });
 ```
 
-The clean-up function runs before the component is removed from the UI to prevent memory leaks. Additionally, if a component renders multiple times (as they typically do), the **previous effect is cleaned up before executing the next effect**. In our example, this means a new subscription is created on every update. To avoid firing an effect on every update, refer to the next section.
+برای آنکه دچار نشت در حافظه نشویم، تابعی که کار پاکسازی را انجام می‌دهد، پیش از آنکه کامپوننت ما از صفحه ی کاربر حذف شود اجرا خواهد شد. از طرف دیگر، اگر یک افکت چند بار فراخوانده شود (که معمولا این طور است)، **پیش از اجرای افکت بعدی، افکت پیشین پاکسازی خواهد شد.**این بدین معناست که در همی‌ن مثال قبلی ما، در هر به‌روز‌ رسانی یک اشتراک جدید خلق خواهد شد. برای جلوگیری از اجرای مکرر یک افکت در موقع به‌روز‌ رسانی، به قسمت بعدی مراجعه کنید.
 
-#### Timing of effects {#timing-of-effects}
 
-Unlike `componentDidMount` and `componentDidUpdate`, the function passed to `useEffect` fires **after** layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn't block the browser from updating the screen.
+#### زمان بندی افکت‌ها {#timing-of-effects}
 
-However, not all effects can be deferred. For example, a DOM mutation that is visible to the user must fire synchronously before the next paint so that the user does not perceive a visual inconsistency. (The distinction is conceptually similar to passive versus active event listeners.) For these types of effects, React provides one additional Hook called [`useLayoutEffect`](#uselayouteffect). It has the same signature as `useEffect`, and only differs in when it is fired.
+برخلاف `componentDidMount`  و `componentDidUpdate`، تابعی که به `useEffect`  می‌دهید، **پس از** صفحه آرایی (layout) و ترسیم (paint)، طی یک رویداد به تعویق افتاده (deferred event) اجرا می‌شود. از همی‌ن رو، useEffect  مکان مناسبی برای اجرای بیشتر اثرات جانبی متدول است. مثل ایجاد اشتراک‌ها (subscriptions) و کنترل کننده ی رویداد‌ها (event handlers). دلیلش این است که بیشتر این کارها، نباید مانعی بر سر راه مرورگر در حین به‌روز‌ رسانی صفحه باشند.  
 
-Although `useEffect` is deferred until after the browser has painted, it's guaranteed to fire before any new renders. React will always flush a previous render's effects before starting a new update.
+با این حال، نمی‌توان تمام افکت‌ها را با تعویق انجام داد. به طور مثال اگر تغییری که در DOM می‌دهیم در معرض دید کاربر باشد، باید آن را به طور همزمان (synchronously) و پیش از ترسیم صفحه انجام دهیم تا باعث بروز ناهماهنگی در صفحه ی نمایش نشود. (این از نظر مفهومی‌مانند تفاوت  event listener‌های فعال و غیرفعال است.) برای اعمال چنین افکت‌هایی، ری‌اکت هوک دیگری را در اختیار شما قرار می‌دهد: [`useLayoutEffect`](#uselayouteffect). این افکت کارکردی شبیه `useEffect` دارد و تنها تفاوتش زمان اجرای آن است. 
 
-#### Conditionally firing an effect {#conditionally-firing-an-effect}
+برخلاف آنکه اجرای `useEffect` تا پس از ترسیم صفحه به تعویق می‌افتد، اما قطعا پیش از رندر‌های جدید اجرا خواهد شد. ری‌اکت همی‌شه افکت‌های متعلق به رندر پیشین را قبل از به‌روز‌ رسانی جدید، اعمال کرده و تمام می‌کند.
 
-The default behavior for effects is to fire the effect after every completed render. That way an effect is always recreated if one of its dependencies changes.
 
-However, this may be overkill in some cases, like the subscription example from the previous section. We don't need to create a new subscription on every update, only if the `source` props has changed.
+#### اجرای مشروط یک افکت  {#conditionally-firing-an-effect}
+
+رفتار پیش فرض افکت‌ها بدین شکل است که پس از اتمام هر رندر، فراخوانی و اجرا شوند. در این حالت، اگر یکی از وابستگی‌های افکت ما تغییر کند، افکت دوباره اجرا می‌شود.
+
+اما این در بعضی از موارد ممکن است باعث افراط بی مورد شود. مثال قبلی که در مورد ایجاد اشتراک (subscription) بود را به خاطر بیاورید. ما نیاز نداریم که در هر به‌روز‌ رسانی، یک اشتراک جدید بسازیم. مگر آنکه props‌هایی که دریافت می‌کنیم تغییر کرده باشند.
+
+بدین منظور، آرگومان دومی‌را به `useEffect`  بدهید. این آرگومان یک آرایه (array) خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
 
-To implement this, pass a second argument to `useEffect` that is the array of values that the effect depends on. Our updated example now looks like this:
 
 ```js
 useEffect(
@@ -157,20 +168,18 @@ useEffect(
 );
 ```
 
-Now the subscription will only be recreated when `props.source` changes.
-
->Note
+>توجه
 >
->If you use this optimization, make sure the array includes **all values from the component scope (such as props and state) that change over time and that are used by the effect**. Otherwise, your code will reference stale values from previous renders. Learn more about [how to deal with functions](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) and what to do when the [array values change too often](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often).
+>اگر خواستید این بهینه سازی را انجام دهید، اول اطمی‌نان حاصل کنید که **تمام متغیر‌هایی که در حوزه ی کامپوننت هستند (از قبیل state و  props‌ها) که در طول زمان عوض می‌شوند و افکت از آنها استفاده می‌کند**، در آرایه اضافه کرده اید. در غیر این صورت، کد شما از متغیرهای مرده ای که از رندر‌های پیشین به جای مانده اند استفاده خواهد کرد. یاد بگیرید که [چگونه با توابع کار کنید](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) و زمانی که [آرایه متغیرها مکررا تغییر می‌کند](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)، چه کنید.
 >
->If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
+>اگر شما می‌خواهید که یک افکت فقط یک بار اجرا و پاکسازی شود (در mount و unmount)، می‌توانید به عنوان آرگومان دوم یک آرایه ی خالی (`[]`) وارد کنید. با این کار به ری‌اکت می‌گویید که افکت شما هیچ وابستگی به متغیرهای state یا props ندارد. پس لازم نیست که مجددا اجرا شود. البته این یک حالت ویژه نیست – آرایه ی وابستگی‌ها همی‌شه اینطور کار می‌کنند. 
 >
->If you pass an empty array (`[]`), the props and state as inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
+>وقتی که یک آرایه ی خالی (`[]`) به آن می‌دهید، state و props شما، در درون افکت، همی‌شه معادل اولین ارزشی خواهند بود که برایشان تعریف کرده بودید. دادن `[]` به عنوان آرگومان دوم یک افکت، شاید نزدیک‌ترین چیز به مدل `componentDidMount`  و `componentWillUnmount`  باشد، اما معمولا [راه‌های ](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [بهتری](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) هست که با استفاده از آنها بتوان مانع از رندر شدن مکرر شد. از سوی دیگر فراموش نکنید که ری‌اکت اجرای useEffect  را تا زمانی که مرورگر ترسیم صفحه را تمام نکرده باشد به تعویق می‌اندازد، در نتیجه انجام این کارهای اضافی، مشکلات کمتری درست می‌کند. 
 >
->
->We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
+>توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
+
+آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان یک آرگومان در خود تابع افکت‌ها وارد نمی‌شود. اما به طور منطقی، کارش همی‌ن است: هر متغیری که داخل تابع افکت از آن استفاده شده، باید در آرایه ی وابستگی‌های آن افکت هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 
-The array of dependencies is not passed as arguments to the effect function. Conceptually, though, that's what they represent: every value referenced inside the effect function should also appear in the dependencies array. In the future, a sufficiently advanced compiler could create this array automatically.
 
 ### `useContext` {#usecontext}
 
@@ -178,27 +187,28 @@ The array of dependencies is not passed as arguments to the effect function. Con
 const value = useContext(MyContext);
 ```
 
-Accepts a context object (the value returned from `React.createContext`) and returns the current context value for that context. The current context value is determined by the `value` prop of the nearest `<MyContext.Provider>` above the calling component in the tree.
+این هوک، آبجکت context را دریافت می‌کند (همان متغیری که از `React.createContext` بازگردانده می‌شود) و بعد value مرتبط با context فعلی را به ما می‌دهد. اما محتویات داخل  context  فعلی ما از کجا می‌آیند؟ از نزدیک‌ترین`<MyContext.Provider>` به ما، (فوق همی‌ن کامپوننت)، که در خودش یک prop  با عنوان `value`  داشته باشد. 
 
-When the nearest `<MyContext.Provider>` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider.
+وقتی که نزدیک‌ترین `<MyContext.Provider>` ، بالای یک کامپوننت به روز رسانی می‌شود، این هوک فرایند رندر کردن مجدد کامپوننت را کلید می‌زند و برای این کار از جدیدترین `value` که به `<MyContext.Provider>` داده شده است استفاده می‌کند. 
 
-Don't forget that the argument to `useContext` must be the *context object itself*:
+فراموش نکنید آرگومانی که به `useContext`  می‌دهید باید *خود آبجکت context* باشد.
 
- * **Correct:** `useContext(MyContext)`
- * **Incorrect:** `useContext(MyContext.Consumer)`
- * **Incorrect:** `useContext(MyContext.Provider)`
+ * **صحیح:** `useContext(MyContext)`
+ * **نادرست:** `useContext(MyContext.Consumer)`
+ * **نادرست:** `useContext(MyContext.Provider)`
 
-A component calling `useContext` will always re-render when the context value changes. If re-rendering the component is expensive, you can [optimize it by using memoization](https://github.com/facebook/react/issues/15156#issuecomment-474590693).
+اگر متغیرهای context عوض شوند، کامپوننتی که هوک `useContext`  را فراخوانی کرده، مجددا رندر خواهدشد. اگر رندر مجدد یک کامپوننت پرهزینه است، [با استفاده از memoization آن را بهینه کنید.](https://github.com/facebook/react/issues/15156#issuecomment-474590693)
 
->Tip
+>نکته
 >
->If you're familiar with the context API before Hooks, `useContext(MyContext)` is equivalent to `static contextType = MyContext` in a class, or to `<MyContext.Consumer>`.
+>اگر شما پیشتر با context API که پیش از معرفی هوک‌ها بوده کار کرده باشید، کاری که هوک `useContext(MyContext)` می‌کند دقیقا معادل `static contextType = MyContext`  است که در کلاس انجام می‌دادیم و یا `<MyContext.Consumer>`.
 >
->`useContext(MyContext)` only lets you *read* the context and subscribe to its changes. You still need a `<MyContext.Provider>` above in the tree to *provide* the value for this context.
+>`useContext(MyContext)`فقط این امکان را به شما می‌دهد که context را *بخوانید* و مشترک تغییراتش شوید. شما همچنان نیازمند یک `<MyContext.Provider>`  در شاخه‌های بالایی هستید که value لازم برای context را تولید کند.
 
-## Additional Hooks {#additional-hooks}
 
-The following Hooks are either variants of the basic ones from the previous section, or only needed for specific edge cases. Don't stress about learning them up front.
+## هوک‌های دیگر {#additional-hooks}
+
+هوک‌هایی که در ادامه می‌آیند، گونه ی دیگری از هوک‌های اولیه هستند که در بخش قبل توضیح دادیم، و یا در موارد خاص کاربرد پیدا می‌کنند. تا زمانی که ضرورتش پیش نیامده، خودتان را درگیر یادگیری آنها نکنید.
 
 ### `useReducer` {#usereducer}
 
@@ -206,11 +216,11 @@ The following Hooks are either variants of the basic ones from the previous sect
 const [state, dispatch] = useReducer(reducer, initialArg, init);
 ```
 
-An alternative to [`useState`](#usestate). Accepts a reducer of type `(state, action) => newState`, and returns the current state paired with a `dispatch` method. (If you're familiar with Redux, you already know how this works.)
+این جایگزینی برای [`useState`](#usestate) می‌تواند باشد. یک reducer از نوع `(state, action) => newState` می‌گیرد و خروجی که به شما می‌دهد state فعلی است به همراه متد `dispatch` . (اگر با ریداکس  Redux آشنا باشید می‌دانید که شیوه ی کارش چیست.)
 
-`useReducer` is usually preferable to `useState` when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. `useReducer` also lets you optimize performance for components that trigger deep updates because [you can pass `dispatch` down instead of callbacks](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down).
+اما چه زمانی بهتر است به جای `useState`  از `useReducer`  استفاده کنید؟ زمانی که state شما ساختار منطقی پیچیده ای دارد و شامل زیر مجموعه‌هایی با عضو‌های متعدد است، یا زمانی که state بعدی شما وابسته به state پیشین شما است. بعلاوه اگر کامپوننت‌هایی دارید که به‌روز‌ رسانی در لایه‌های عمیق‌تری انجام می‌دهند، `useReducer`  به شما این امکان را می‌دهد تا این فرایند را بهینه کنید [چون قادر خواهید بود که به جای کال بک‌ها (callbacks)، از `dispatch`  استفاده کنید.](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)
 
-Here's the counter example from the [`useState`](#usestate) section, rewritten to use a reducer:
+در ادامه، مثال شمارشگر قبلی را که پیشتر با  [`useState`](#usestate) نوشته بودیم را با reducer بازنویسی می‌کنیم:
 
 ```js
 const initialState = {count: 0};
@@ -238,13 +248,14 @@ function Counter({initialState}) {
 }
 ```
 
->Note
+>توجه
 >
->React guarantees that `dispatch` function identity is stable and won't change on re-renders. This is why it's safe to omit from the `useEffect` or `useCallback` dependency list.
+>ری‌اکت این اطمی‌نان را می‌دهند که  ماهیت تابع `dispatch`  ثابت بماند و در رندر‌های بعدی عوض نشود. در نتیجه، با خیال راحت می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  حذف کرد.
+
 
-#### Specifying the initial state {#specifying-the-initial-state}
+#### تعریف کردن state اولیه {#specifying-the-initial-state}
 
-There’s two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument:
+به 2 طریق متفاوت می‌توان state اولیه در `useReducer`  را تعریف کرد. بسته به شرایط از هر کدام که خواستید می‌توانید استفاده کنید. ساده‌ترین راه، دادن آن به عنوان آرگومان دوم است:
 
 ```js{3}
   const [state, dispatch] = useReducer(
@@ -253,15 +264,15 @@ There’s two different ways to initialize `useReducer` state. You may choose ei
   );
 ```
 
->Note
+>توجه
 >
->React doesn’t use the `state = initialState` argument convention popularized by Redux. The initial value sometimes needs to depend on props and so is specified from the Hook call instead. If you feel strongly about this, you can call `useReducer(reducer, undefined, reducer)` to emulate the Redux behavior, but it's not encouraged.
+>شیوه ای که توسط ریداکس برای دادن آرگومان باب شده، `state = initialState`  می‌باشد، اما ری‌اکت از این شیوه استفاده نمی‌کند. چون متغیر اولیه ما بعضی از اوقات وابسته به props است و از هوک فراخوانی می‌شود. اگر همچنان نظر متفاوتی دارید می‌توانید آرگومان‌های خود را به شکل زیر وارد کنید تا عملکردی مانند ریداکس داشته باشد: `useReducer(reducer, undefined, reducer)` 
 
-#### Lazy initialization {#lazy-initialization}
+#### تعریف اولیه از نوع کُند (Lazy initialization) {#lazy-initialization}
 
-You can also create the initial state lazily. To do this, you can pass an `init` function as the third argument. The initial state will be set to `init(initialArg)`.
+شما می‌توانید state اولیه را کندتر تعریف کنید. برای این کار، کافی است تابع `init`  را به عنوان آرگومان سوم به useReducer بدهید. در این حالت، state اولیه ی ما برابر `init(initialArg)` خواهد بود.
 
-It lets you extract the logic for calculating the initial state outside the reducer. This is also handy for resetting the state later in response to an action:
+با این کار، شما کدی که برای محاسبه ی state اولیه وجود دارد را از توی reducer در می‌آورید. بعدها، وقتی که بخواهید  state را در پاسخ به یک رویداد ریست کنید، این به درد خواهد خورد.
 
 ```js{1-3,11-12,19,24}
 function init(initialCount) {
@@ -297,11 +308,11 @@ function Counter({initialCount}) {
 }
 ```
 
-#### Bailing out of a dispatch {#bailing-out-of-a-dispatch}
+#### انصراف دادن از dispatch {#bailing-out-of-a-dispatch}
 
-If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).)
+اگر متغیر خروجی شما از هوک Reducer همچنان برابر با state فعلی از آب در بیاید(یعنی تغییری نکرده باشد)، ری‌اکت از رندر مجدد فرزندان آن کامپوننت و اجرا کردن افکت‌ها (effects) اجتناب خواهد کرد. (ری‌اکت برای مقایسه از الگوریتم [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description)  استفاده می‌کند.)
 
-Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`.
+دقت کنید که ممکن است ری‌اکت نیاز داشته باشد تا آن کامپوننت خاص را پیش از انصراف دادن، دوباره رندر کند. این نباید موجب نگرانی باشد چون در آن صورت، بدون دلیل وارد المنت‌ها در لایه‌های عمیق‌تر نخواهد شد. اگر در حین رندر کردن محاسبات سنگین انجام می‌شود، می‌توانید با استفاده از  `useMemo` آنها را بهینه کنید.
 
 ### `useCallback` {#usecallback}
 
@@ -314,17 +325,23 @@ const memoizedCallback = useCallback(
 );
 ```
 
-Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) callback.
+یک کال بک مموایز شده ([memoized](https://en.wikipedia.org/wiki/Memoization) callback) را باز می‌گرداند. 
 
-Pass an inline callback and an array of dependencies. `useCallback` will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. `shouldComponentUpdate`).
+یک کال بک اینلاین و آرایه ای از وابستگی‌ها را به آن بدهید. `useCallback`  نسخه ی مموایز شده ای از کال بک را به شما باز خواهد گرداند. این نسخه فقط زمانی تغییر خواهد کرد که یکی از وابستگی‌هایش تغییر کند. این در چه مواقعی به درد می‌خورد؟ زمانی که می‌خواهیم کال بک‌ها را به کامپوننت‌های سطح پایینی بدهیم که بهینه شده اند. این کامپوننت‌ها با تکیه بر "برابری و تطبیق متغیر با مرجعش" از رندر‌های بی مورد جلوگیری می‌کنند (به طور مثال:  `shouldComponentUpdate`).
 
-`useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`.
+هر دو کدی که در زیر می‌بینید، کار یکسانی را انجام می‌دهند:
 
-> Note
+`useCallback(آرایه ی وابستگیها، تابع)` 
+
+`useMemo(() => آرایه ی وابستگیها، تابع)`
+
+
+> توجه
 >
-> The array of dependencies is not passed as arguments to the callback. Conceptually, though, that's what they represent: every value referenced inside the callback should also appear in the dependencies array. In the future, a sufficiently advanced compiler could create this array automatically.
+>آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود کال بک‌ها داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل کال بک ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
-> We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
+>توصیه می‌کنیم که از قانون  [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
+
 
 ### `useMemo` {#usememo}
 
@@ -332,21 +349,22 @@ Pass an inline callback and an array of dependencies. `useCallback` will return
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-Returns a [memoized](https://en.wikipedia.org/wiki/Memoization) value.
+یک متغیر [مموایز ](https://en.wikipedia.org/wiki/Memoization)شده را باز می‌گرداند.
 
-Pass a "create" function and an array of dependencies. `useMemo` will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.
+به آن یک تابع می‌دهید که نقش تولید کننده را دارد و آرگومان بعدیش، آرایه ای متشکل از وابستگی‌هاست. فقط زمانی `useMemo`  محاسبه مجدد را شروع می‌کند که یکی از وابستگی‌هایش تغییر کرده باشد. با این بهینه سازی، جلوی محاسبات سنگینی که در هر رندر می‌تواند روی دهد را می‌گیریم.
 
-Remember that the function passed to `useMemo` runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in `useEffect`, not `useMemo`.
+فراموش نکنید تابعی که به `useMemo`  داده می‌شود، در زمان رندر، اجرا خواهد شد. در آن تابع نباید کاری انجام دهید که به طور معمول در حین رندر انجام نمی‌شود. به طور مثال، "اثرات جانبی"  جایشان در `useEffect` است و نه در `useMemo`.
 
-If no array is provided, a new value will be computed on every render.
+اگر آرایه ای به آن نداده باشید، ارزش آن متغیر در هر رندر مجددا محاسبه خواهد شد.
 
-**You may rely on `useMemo` as a performance optimization, not as a semantic guarantee.** In the future, React may choose to "forget" some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance.
+**شما می‌توانید به `useMemo`  برای بهینه سازی اجرا و نمایش کامپوننت تکیه کنید، اما نه به عنوان چیزی که همی‌شه به یک شکل کار کند.** مثلا در آینده ممکن است ری‌اکت برای کامپوننت‌هایی که هنوز نمایش داده نشده اند، نیاز به آزاد کردن فضا در حافظه داشته باشد و بخاطر همی‌ن، ممکن است متغیر مموایز شده ی پیشین را فراموش کند و در رندر بعدی دوباره آن را محاسبه کند. کدتان را جوری بنویسید که بدون `useMemo`  هم درست کار کند و از آن صرفا برای بهینه سازی اجرای کد استفاده کنید.
 
-> Note
+
+> توجه
 >
-> The array of dependencies is not passed as arguments to the function. Conceptually, though, that's what they represent: every value referenced inside the function should also appear in the dependencies array. In the future, a sufficiently advanced compiler could create this array automatically.
+> آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود تابع داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل تابع ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
-> We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
+> توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
 ### `useRef` {#useref}
 
@@ -354,9 +372,9 @@ If no array is provided, a new value will be computed on every render.
 const refContainer = useRef(initialValue);
 ```
 
-`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component.
+`useRef`  یک آبجکت قابل رجوع (ref object) به شما می‌دهد که اولا متغیرهایش می‌توانند تغییر کنند و ثانیا پراپرتی .`.current`  آن برابر با آرگومان (`initialValue`) خواهد بود. آبجکتی که به شما باز می‌گرداند، تا پایان طول عمر کامپوننت دوام خواهد داشت.
 
-A common use case is to access a child imperatively:
+یک استفاده ی متداول آن، برای دسترسی به المنت‌های زیرین، به شکل دستوری است:
 
 ```js
 function TextInputWithFocusButton() {
@@ -374,15 +392,18 @@ function TextInputWithFocusButton() {
 }
 ```
 
-Essentially, `useRef` is like a "box" that can hold a mutable value in its `.current` property.
+به عبارت دیگر، `useRef`  مانند ظرفی است که قادر است یک متغیر قابل تغییر را داخل پراپرتی `.current` خودش نگه دارد.
+
+ممکن است آشنایی شما با refs بیشتر در حوزه ی [دسترسی به DOM   ](/docs/refs-and-the-dom.html)بوده باشد. اگر شما به شکل زیر یک آبجکت قابل ارجاع به ری‌اکت بدهید:
+`<div ref={myRef} />`
+آن وقت هر زمانی که نود مربوط به آن در DOM تغییر کند، ری‌اکت پراپرتی `.current`  آن را برابر همان خواهد ساخت. 
 
-You might be familiar with refs primarily as a way to [access the DOM](/docs/refs-and-the-dom.html). If you pass a ref object to React with `<div ref={myRef} />`, React will set its `.current` property to the corresponding DOM node whenever that node changes.
+با این همه، کاربرد `useRef()` بیشتر از صفت ref  آن است. چون وقتی بخواهید [متغیری را که ارزشش ممکن است عوض شود را دم دست نگه دارید](/docs/hooks-faq.html#is-there-something-like-instance-variables)، به راحتی به کارتان خواهد آمد. همانند زمانی که از instance fields در کلاس‌ها استفاده می‌کردید. 
 
-However, `useRef()` is useful for more than the `ref` attribute. It's [handy for keeping any mutable value around](/docs/hooks-faq.html#is-there-something-like-instance-variables) similar to how you'd use instance fields in classes.
 
-This works because `useRef()` creates a plain JavaScript object. The only difference between `useRef()` and creating a `{current: ...}` object yourself is that `useRef` will give you the same ref object on every render.
+این امکان به این دلیل بوجود می‌آید که `useRef()` یک آبجکت معمولی جاوااسکریپت می‌سازد. شاید  بپرسید اگر خودتان یک آبجکت به شکل `{current: ...}` بسازید، این چه فرقی با `useRef()`  خواهد داشت؟ تفاوتش این است که `useRef`  در هر رندر، همان آبجکت ref شده را به شما خواهد داد.
 
-Keep in mind that `useRef` *doesn't* notify you when its content changes. Mutating the `.current` property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a [callback ref](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) instead.
+دقت کنید زمانی که  محتویات `useRef`  عوض شود، او به شما *خبر نخواهد داد*. عوض کردن پراپرتی .`.current`  آن، موجب رندر مجدد نمی‌شود. اگر مایلید که هنگام وصل کردن یا جدا کردن یک ref به نودی در DOM، کدی را ری‌اکت اجرا کند، بهتر است از [callback ref](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) به جای این استفاده کنید.
 
 
 ### `useImperativeHandle` {#useimperativehandle}
@@ -391,7 +412,8 @@ Keep in mind that `useRef` *doesn't* notify you when its content changes. Mutati
 useImperativeHandle(ref, createHandle, [deps])
 ```
 
-`useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`. As always, imperative code using refs should be avoided in most cases. `useImperativeHandle` should be used with `forwardRef`:
+وقتی که از `ref` در کامپوننتی استفاده می‌کنید، `useImperativeHandle`  به شما اجازه می‌دهد تا متغیر آن را از طریق کامپوننت والدش دستکاری کنید. مثل همی‌شه اکثرا باید از کد کردن دستوری، که از refs استفاده می‌کند،  اجتناب کرد. `useImperativeHandle`  باید با  `forwardRef` استفاده شود:
+
 
 ```js
 function FancyInput(props, ref) {
@@ -406,21 +428,30 @@ function FancyInput(props, ref) {
 FancyInput = forwardRef(FancyInput);
 ```
 
-In this example, a parent component that renders `<FancyInput ref={fancyInputRef} />` would be able to call `fancyInputRef.current.focus()`.
+در این مثال، کامپوننت والدی که `<FancyInput ref={fancyInputRef} />` را رندر می‌کند، قادر خواهد بود که `fancyInputRef.current.focus()` را فراخوانی کند.
+
 
 ### `useLayoutEffect` {#uselayouteffect}
 
-The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
+این مشابه `useEffect` است، با این تفاوت که به طور همزمان (synchronously) پس از اعمال تمام تغییرات در DOM اجرا می‌شود. با استفاده از آن قادر خواهید بود که آرایش صفحه را از DOM بخوانید و به طور همزمان رندر مجدد کنید. به‌روز‌ رسانی‌هایی که درون `useLayoutEffect`  نوشته شده باشند، به طور همزمان اجرا و تمام خواهند شد، پیش از آنکه مرورگر، ترسیم صفحه را شروع کرده باشد. 
 
-Prefer the standard `useEffect` when possible to avoid blocking visual updates.
+ترجیحا تا حد امکان از `useEffect`   استفاده کنید تا در راه به‌روز‌ رسانی بصری مانع ایجاد نکنید.
 
-> Tip
+
+> نکته
+>
+>اگر در حال تبدیل کامپوننت‌های کلاس خود هستید، توجه کنید که `useLayoutEffect`  در همان فازی کلید می‌خورد که `componentDidMount`  و `componentDidUpdate` کلید می‌خورند.  با این حال **توصیه ما این است که اول از همه با `useEffect`  شروع کنید** و بعد اگر با مشکل روبرو شدید، `useLayoutEffect`  را استفاده کنید.
 >
-> If you're migrating code from a class component, note `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`. However, **we recommend starting with `useEffect` first** and only trying `useLayoutEffect` if that causes a problem.
+>اگر رندر شما در سرور انجام می‌شود، به خاطر داشته باشید که `useLayoutEffect`  یا `useEffect`  تا زمانی که تمام کد جاوااسکریپت دانلود نشده باشد اجرا نخواهد شد. به همی‌ن دلیل است که ری‌اکت زمانی که کامپوننتی در سرور رندر می‌شود و حاوی `useLayoutEffect` است به شما هشدار می‌دهد. برای حل این مشکل، دو راه دارید: یک راه این است که اگر کد شما در اولین رندر دخالتی ندارد، آن را به درون `useEffect`  انتقال دهید. اما اگر بدون اجرای `useLayoutEffect` ، HTML شما خراب به نظر می‌رسد، نمایش آن کامپوننت را تا زمانی که صفحه ی کاربر رندر نشده باشد به تاخیر بیندازید.
 >
->If you use server rendering, keep in mind that *neither* `useLayoutEffect` nor `useEffect` can run until the JavaScript is downloaded. This is why React warns when a server-rendered component contains `useLayoutEffect`. To fix this, either move that logic to `useEffect` (if it isn't necessary for the first render), or delay showing that component until after the client renders (if the HTML looks broken until `useLayoutEffect` runs).
+>برای جدا کردن کامپوننتی که به افکت‌های صفحه آرایی نیاز دارد و از سرور رندر می‌شود، آن را به طور مشروط رندر کنید:
+>`showChild && <Child />`
 >
->To exclude a component that needs layout effects from the server-rendered HTML, render it conditionally with `showChild && <Child />` and defer showing it with `useEffect(() => { setShowChild(true); }, [])`. This way, the UI doesn't appear broken before hydration.
+>و بعد به شکل زیر، نمایش آن را به تعویق بیندازید:
+>`useEffect(() => { setShowChild(true); }, [])`
+>
+>با این کار، صفحه ی رابط کاربری شما دچار اختلال در نمایش نخواهد شد.
+
 
 ### `useDebugValue` {#usedebugvalue}
 
@@ -428,9 +459,9 @@ Prefer the standard `useEffect` when possible to avoid blocking visual updates.
 useDebugValue(value)
 ```
 
-`useDebugValue` can be used to display a label for custom hooks in React DevTools.
+`useDebugValue`  برای این استفاده می‌شود که برای هوک‌های سفارشی (custom hooks) برچسبی درست کنید تا در React DevTools نمایش داده شود.
 
-For example, consider the `useFriendStatus` custom Hook described in ["Building Your Own Hooks"](/docs/hooks-custom.html):
+به طور مثال `useFriendStatus`  یک هوک سفارشی بود که در ["ساختن هوک‌های خودتان"](/docs/hooks-custom.html) ساخته بودیم:
 
 ```js{6-8}
 function useFriendStatus(friendID) {
@@ -438,25 +469,26 @@ function useFriendStatus(friendID) {
 
   // ...
 
-  // Show a label in DevTools next to this Hook
-  // e.g. "FriendStatus: Online"
+  // کنار این هوک، برچسبی را نمایش بده در DevTools
+  // مثلا: "FriendStatus: Online"
   useDebugValue(isOnline ? 'Online' : 'Offline');
 
   return isOnline;
 }
 ```
 
-> Tip
+> نکته
 >
-> We don't recommend adding debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries.
+> ما توصیه نمی‌کنیم که برای تمام هوک‌های سفارشی متغیرهایی برای خطایابی اضافه کنید.  این قابلیت بیش از همه برای آن هوک‌های سفارشی مفید است که بخشی از کتابخانه‌های به اشتراک گذاشته شده باشند.
+
+#### فرمت کردن متغیر خطایابی را به تاخیر بیندازید {#defer-formatting-debug-values}
 
-#### Defer formatting debug values {#defer-formatting-debug-values}
+در بعضی مواقع، فرمت کردن یک متغیر برای مشاهده ی بهترش، می‌تواند عملیات پرهزینه ای باشد. 
 
-In some cases formatting a value for display might be an expensive operation. It's also unnecessary unless a Hook is actually inspected.
+از همی‌ن روی، `useDebugValue`  یک تابع برای فرمت کردن را به عنوان آرگومان اختیاری دوم می‌تواند بپذیرد. این تابع فقط زمانی فراخوانده می‌شود که هوک مورد نظر تحت بررسی قرار گیرد. این تابع، متغیر خطایابی را (به عنوان آرگومانش) دریافت می‌کند و شکل فرمت شده ی آن را باز می‌گرداند. 
 
-For this reason `useDebugValue` accepts a formatting function as an optional second parameter. This function is only called if the Hooks are inspected. It receives the debug value as a parameter and should return a formatted display value.
+فرض کنیم که در یک هوک سفارشی، متغیری از جنس زمان (`Date`)  بازگردانده می‌شود. برای اینکه بی مورد از تابع `toDateString` استفاده نشود، می‌توانید آن را به عنوان تابع فرمت کننده به `useDebugValue`  بدهید:
 
-For example a custom Hook that returned a `Date` value could avoid calling the `toDateString` function unnecessarily by passing the following formatter:
 
 ```js
 useDebugValue(date, date => date.toDateString());

From f4b0085c63033110078fb256c4d052d301e465ec Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Tue, 23 Apr 2019 01:27:20 +0400
Subject: [PATCH 28/31] Hooks API translated and edited

---
 content/docs/hooks-reference.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 2834d3e04..a5b3b5381 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -41,7 +41,7 @@ const [state, setState] = useState(initialState);
 تابع `setState`  برای به‌روز‌ رسانی آن متغیر استفاده می‌شود. می‌توان به آن متغیر جدیدی داد که باعث تغییر state شده و در نتیجه رندر مجدد آن کامپوننت را در صف اجرا قرار می‌دهد.
 
 ```js
-setState(newState);
+setState(newState); 
 ```
 در رندر‌های بعدی، اولین متغیر بازگردانده شده از `useState` ، جدیدترین state آن کامپوننت بعد از به‌روز‌ رسانی خواهد بود.
 

From bf20c4624f410de530ef172dfa6dd3d6111facb1 Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Tue, 23 Apr 2019 02:06:57 +0400
Subject: [PATCH 29/31] minor changes

---
 content/docs/hooks-reference.md | 34 ++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index a5b3b5381..e71e16514 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -48,7 +48,7 @@ setState(newState);
 
 >توجه
 >
->ری‌اکت تضمی‌ن می‌کند که تابع `setState`  ماهیت خودش را در زمان رندرهای بعدی حفظ کند. از همی‌ن رو، با اطمی‌نان کامل می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  خارج کرد.
+>ری‌اکت تضمین می‌کند که تابع `setState`  ماهیت خودش را در زمان رندرهای بعدی حفظ کند. از همین رو، با اطمینان کامل می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  خارج کرد.
 
 
 #### به‌روز‌ رسانی از طریق تابع {#functional-updates}
@@ -70,12 +70,12 @@ function Counter({initialCount}) {
 }
 ```
 
-دکمه‌های “+”  و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state  باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همی‌شه متغیر را به آن مقداری که در ابتدا برایش تعریف شده بود باز می‌گرداند.
+دکمه‌های “+”  و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state  باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همیشه متغیر را به آن مقداری که در ابتدا برایش تعریف شده بود باز می‌گرداند.
 
 
 > Note
 >
-> هنگامی‌که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
+> هنگامی که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
 >
 > ```js
 > setState(prevState => {
@@ -135,14 +135,14 @@ useEffect(() => {
 });
 ```
 
-برای آنکه دچار نشت در حافظه نشویم، تابعی که کار پاکسازی را انجام می‌دهد، پیش از آنکه کامپوننت ما از صفحه ی کاربر حذف شود اجرا خواهد شد. از طرف دیگر، اگر یک افکت چند بار فراخوانده شود (که معمولا این طور است)، **پیش از اجرای افکت بعدی، افکت پیشین پاکسازی خواهد شد.**این بدین معناست که در همی‌ن مثال قبلی ما، در هر به‌روز‌ رسانی یک اشتراک جدید خلق خواهد شد. برای جلوگیری از اجرای مکرر یک افکت در موقع به‌روز‌ رسانی، به قسمت بعدی مراجعه کنید.
+برای آنکه دچار نشت در حافظه نشویم، تابعی که کار پاکسازی را انجام می‌دهد، پیش از آنکه کامپوننت ما از صفحه ی کاربر حذف شود اجرا خواهد شد. از طرف دیگر، اگر یک افکت چند بار فراخوانده شود (که معمولا این طور است)، **پیش از اجرای افکت بعدی، افکت پیشین پاکسازی خواهد شد.**این بدین معناست که در همین مثال قبلی ما، در هر به‌روز‌ رسانی یک اشتراک جدید خلق خواهد شد. برای جلوگیری از اجرای مکرر یک افکت در موقع به‌روز‌ رسانی، به قسمت بعدی مراجعه کنید.
 
 
 #### زمان بندی افکت‌ها {#timing-of-effects}
 
-برخلاف `componentDidMount`  و `componentDidUpdate`، تابعی که به `useEffect`  می‌دهید، **پس از** صفحه آرایی (layout) و ترسیم (paint)، طی یک رویداد به تعویق افتاده (deferred event) اجرا می‌شود. از همی‌ن رو، useEffect  مکان مناسبی برای اجرای بیشتر اثرات جانبی متدول است. مثل ایجاد اشتراک‌ها (subscriptions) و کنترل کننده ی رویداد‌ها (event handlers). دلیلش این است که بیشتر این کارها، نباید مانعی بر سر راه مرورگر در حین به‌روز‌ رسانی صفحه باشند.  
+برخلاف `componentDidMount`  و `componentDidUpdate`، تابعی که به `useEffect`  می‌دهید، **پس از** صفحه آرایی (layout) و ترسیم (paint)، طی یک رویداد به تعویق افتاده (deferred event) اجرا می‌شود. از همین رو، useEffect  مکان مناسبی برای اجرای بیشتر اثرات جانبی متدول است. مثل ایجاد اشتراک‌ها (subscriptions) و کنترل کننده ی رویداد‌ها (event handlers). دلیلش این است که بیشتر این کارها، نباید مانعی بر سر راه مرورگر در حین به‌روز‌ رسانی صفحه باشند.  
 
-با این حال، نمی‌توان تمام افکت‌ها را با تعویق انجام داد. به طور مثال اگر تغییری که در DOM می‌دهیم در معرض دید کاربر باشد، باید آن را به طور همزمان (synchronously) و پیش از ترسیم صفحه انجام دهیم تا باعث بروز ناهماهنگی در صفحه ی نمایش نشود. (این از نظر مفهومی‌مانند تفاوت  event listener‌های فعال و غیرفعال است.) برای اعمال چنین افکت‌هایی، ری‌اکت هوک دیگری را در اختیار شما قرار می‌دهد: [`useLayoutEffect`](#uselayouteffect). این افکت کارکردی شبیه `useEffect` دارد و تنها تفاوتش زمان اجرای آن است. 
+با این حال، نمی‌توان تمام افکت‌ها را با تعویق انجام داد. به طور مثال اگر تغییری که در DOM می‌دهیم در معرض دید کاربر باشد، باید آن را به طور همزمان (synchronously) و پیش از ترسیم صفحه انجام دهیم تا باعث بروز ناهماهنگی در صفحه ی نمایش نشود. (این از نظر مفهومی مانند تفاوت  event listener‌های فعال و غیرفعال است.) برای اعمال چنین افکت‌هایی، ری‌اکت هوک دیگری را در اختیار شما قرار می‌دهد: [`useLayoutEffect`](#uselayouteffect). این افکت کارکردی شبیه `useEffect` دارد و تنها تفاوتش زمان اجرای آن است. 
 
 برخلاف آنکه اجرای `useEffect` تا پس از ترسیم صفحه به تعویق می‌افتد، اما قطعا پیش از رندر‌های جدید اجرا خواهد شد. ری‌اکت همی‌شه افکت‌های متعلق به رندر پیشین را قبل از به‌روز‌ رسانی جدید، اعمال کرده و تمام می‌کند.
 
@@ -170,15 +170,15 @@ useEffect(
 
 >توجه
 >
->اگر خواستید این بهینه سازی را انجام دهید، اول اطمی‌نان حاصل کنید که **تمام متغیر‌هایی که در حوزه ی کامپوننت هستند (از قبیل state و  props‌ها) که در طول زمان عوض می‌شوند و افکت از آنها استفاده می‌کند**، در آرایه اضافه کرده اید. در غیر این صورت، کد شما از متغیرهای مرده ای که از رندر‌های پیشین به جای مانده اند استفاده خواهد کرد. یاد بگیرید که [چگونه با توابع کار کنید](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) و زمانی که [آرایه متغیرها مکررا تغییر می‌کند](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)، چه کنید.
+>اگر خواستید این بهینه سازی را انجام دهید، اول اطمینان حاصل کنید که **تمام متغیر‌هایی که در حوزه ی کامپوننت هستند (از قبیل state و  props‌ها) که در طول زمان عوض می‌شوند و افکت از آنها استفاده می‌کند**، در آرایه اضافه کرده اید. در غیر این صورت، کد شما از متغیرهای مرده ای که از رندر‌های پیشین به جای مانده اند استفاده خواهد کرد. یاد بگیرید که [چگونه با توابع کار کنید](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) و زمانی که [آرایه متغیرها مکررا تغییر می‌کند](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)، چه کنید.
 >
->اگر شما می‌خواهید که یک افکت فقط یک بار اجرا و پاکسازی شود (در mount و unmount)، می‌توانید به عنوان آرگومان دوم یک آرایه ی خالی (`[]`) وارد کنید. با این کار به ری‌اکت می‌گویید که افکت شما هیچ وابستگی به متغیرهای state یا props ندارد. پس لازم نیست که مجددا اجرا شود. البته این یک حالت ویژه نیست – آرایه ی وابستگی‌ها همی‌شه اینطور کار می‌کنند. 
+>اگر شما می‌خواهید که یک افکت فقط یک بار اجرا و پاکسازی شود (در mount و unmount)، می‌توانید به عنوان آرگومان دوم یک آرایه ی خالی (`[]`) وارد کنید. با این کار به ری‌اکت می‌گویید که افکت شما هیچ وابستگی به متغیرهای state یا props ندارد. پس لازم نیست که مجددا اجرا شود. البته این یک حالت ویژه نیست – آرایه ی وابستگی‌ها همیشه اینطور کار می‌کنند. 
 >
->وقتی که یک آرایه ی خالی (`[]`) به آن می‌دهید، state و props شما، در درون افکت، همی‌شه معادل اولین ارزشی خواهند بود که برایشان تعریف کرده بودید. دادن `[]` به عنوان آرگومان دوم یک افکت، شاید نزدیک‌ترین چیز به مدل `componentDidMount`  و `componentWillUnmount`  باشد، اما معمولا [راه‌های ](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [بهتری](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) هست که با استفاده از آنها بتوان مانع از رندر شدن مکرر شد. از سوی دیگر فراموش نکنید که ری‌اکت اجرای useEffect  را تا زمانی که مرورگر ترسیم صفحه را تمام نکرده باشد به تعویق می‌اندازد، در نتیجه انجام این کارهای اضافی، مشکلات کمتری درست می‌کند. 
+>وقتی که یک آرایه ی خالی (`[]`) به آن می‌دهید، state و props شما، در درون افکت، همیشه معادل اولین ارزشی خواهند بود که برایشان تعریف کرده بودید. دادن `[]` به عنوان آرگومان دوم یک افکت، شاید نزدیک‌ترین چیز به مدل `componentDidMount`  و `componentWillUnmount`  باشد، اما معمولا [راه‌های ](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [بهتری](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) هست که با استفاده از آنها بتوان مانع از رندر شدن مکرر شد. از سوی دیگر فراموش نکنید که ری‌اکت اجرای useEffect  را تا زمانی که مرورگر ترسیم صفحه را تمام نکرده باشد به تعویق می‌اندازد، در نتیجه انجام این کارهای اضافی، مشکلات کمتری درست می‌کند. 
 >
 >توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
-آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان یک آرگومان در خود تابع افکت‌ها وارد نمی‌شود. اما به طور منطقی، کارش همی‌ن است: هر متغیری که داخل تابع افکت از آن استفاده شده، باید در آرایه ی وابستگی‌های آن افکت هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان یک آرگومان در خود تابع افکت‌ها وارد نمی‌شود. اما به طور منطقی، کارش همین است: هر متغیری که داخل تابع افکت از آن استفاده شده، باید در آرایه ی وابستگی‌های آن افکت هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 
 
 ### `useContext` {#usecontext}
@@ -187,7 +187,7 @@ useEffect(
 const value = useContext(MyContext);
 ```
 
-این هوک، آبجکت context را دریافت می‌کند (همان متغیری که از `React.createContext` بازگردانده می‌شود) و بعد value مرتبط با context فعلی را به ما می‌دهد. اما محتویات داخل  context  فعلی ما از کجا می‌آیند؟ از نزدیک‌ترین`<MyContext.Provider>` به ما، (فوق همی‌ن کامپوننت)، که در خودش یک prop  با عنوان `value`  داشته باشد. 
+این هوک، آبجکت context را دریافت می‌کند (همان متغیری که از `React.createContext` بازگردانده می‌شود) و بعد value مرتبط با context فعلی را به ما می‌دهد. اما محتویات داخل  context  فعلی ما از کجا می‌آیند؟ از نزدیک‌ترین`<MyContext.Provider>` به ما، (فوق همین کامپوننت)، که در خودش یک prop  با عنوان `value`  داشته باشد. 
 
 وقتی که نزدیک‌ترین `<MyContext.Provider>` ، بالای یک کامپوننت به روز رسانی می‌شود، این هوک فرایند رندر کردن مجدد کامپوننت را کلید می‌زند و برای این کار از جدیدترین `value` که به `<MyContext.Provider>` داده شده است استفاده می‌کند. 
 
@@ -250,7 +250,7 @@ function Counter({initialState}) {
 
 >توجه
 >
->ری‌اکت این اطمی‌نان را می‌دهند که  ماهیت تابع `dispatch`  ثابت بماند و در رندر‌های بعدی عوض نشود. در نتیجه، با خیال راحت می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  حذف کرد.
+>ری‌اکت این اطمینان را می‌دهند که  ماهیت تابع `dispatch`  ثابت بماند و در رندر‌های بعدی عوض نشود. در نتیجه، با خیال راحت می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  حذف کرد.
 
 
 #### تعریف کردن state اولیه {#specifying-the-initial-state}
@@ -338,7 +338,7 @@ const memoizedCallback = useCallback(
 
 > توجه
 >
->آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود کال بک‌ها داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل کال بک ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+>آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود کال بک‌ها داده نمی‌شود. اما به طور منطقی، کارشان همین است: هر متغیری که داخل کال بک ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
 >توصیه می‌کنیم که از قانون  [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
@@ -357,12 +357,12 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 
 اگر آرایه ای به آن نداده باشید، ارزش آن متغیر در هر رندر مجددا محاسبه خواهد شد.
 
-**شما می‌توانید به `useMemo`  برای بهینه سازی اجرا و نمایش کامپوننت تکیه کنید، اما نه به عنوان چیزی که همی‌شه به یک شکل کار کند.** مثلا در آینده ممکن است ری‌اکت برای کامپوننت‌هایی که هنوز نمایش داده نشده اند، نیاز به آزاد کردن فضا در حافظه داشته باشد و بخاطر همی‌ن، ممکن است متغیر مموایز شده ی پیشین را فراموش کند و در رندر بعدی دوباره آن را محاسبه کند. کدتان را جوری بنویسید که بدون `useMemo`  هم درست کار کند و از آن صرفا برای بهینه سازی اجرای کد استفاده کنید.
+**شما می‌توانید به `useMemo`  برای بهینه سازی اجرا و نمایش کامپوننت تکیه کنید، اما نه به عنوان چیزی که همیشه به یک شکل کار کند.** مثلا در آینده ممکن است ری‌اکت برای کامپوننت‌هایی که هنوز نمایش داده نشده اند، نیاز به آزاد کردن فضا در حافظه داشته باشد و بخاطر همین، ممکن است متغیر مموایز شده ی پیشین را فراموش کند و در رندر بعدی دوباره آن را محاسبه کند. کدتان را جوری بنویسید که بدون `useMemo`  هم درست کار کند و از آن صرفا برای بهینه سازی اجرای کد استفاده کنید.
 
 
 > توجه
 >
-> آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود تابع داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل تابع ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+> آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود تابع داده نمی‌شود. اما به طور منطقی، کارشان همین است: هر متغیری که داخل تابع ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
 > توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
@@ -442,7 +442,7 @@ FancyInput = forwardRef(FancyInput);
 >
 >اگر در حال تبدیل کامپوننت‌های کلاس خود هستید، توجه کنید که `useLayoutEffect`  در همان فازی کلید می‌خورد که `componentDidMount`  و `componentDidUpdate` کلید می‌خورند.  با این حال **توصیه ما این است که اول از همه با `useEffect`  شروع کنید** و بعد اگر با مشکل روبرو شدید، `useLayoutEffect`  را استفاده کنید.
 >
->اگر رندر شما در سرور انجام می‌شود، به خاطر داشته باشید که `useLayoutEffect`  یا `useEffect`  تا زمانی که تمام کد جاوااسکریپت دانلود نشده باشد اجرا نخواهد شد. به همی‌ن دلیل است که ری‌اکت زمانی که کامپوننتی در سرور رندر می‌شود و حاوی `useLayoutEffect` است به شما هشدار می‌دهد. برای حل این مشکل، دو راه دارید: یک راه این است که اگر کد شما در اولین رندر دخالتی ندارد، آن را به درون `useEffect`  انتقال دهید. اما اگر بدون اجرای `useLayoutEffect` ، HTML شما خراب به نظر می‌رسد، نمایش آن کامپوننت را تا زمانی که صفحه ی کاربر رندر نشده باشد به تاخیر بیندازید.
+>اگر رندر شما در سرور انجام می‌شود، به خاطر داشته باشید که `useLayoutEffect`  یا `useEffect`  تا زمانی که تمام کد جاوااسکریپت دانلود نشده باشد اجرا نخواهد شد. به همین دلیل است که ری‌اکت زمانی که کامپوننتی در سرور رندر می‌شود و حاوی `useLayoutEffect` است به شما هشدار می‌دهد. برای حل این مشکل، دو راه دارید: یک راه این است که اگر کد شما در اولین رندر دخالتی ندارد، آن را به درون `useEffect`  انتقال دهید. اما اگر بدون اجرای `useLayoutEffect` ، HTML شما خراب به نظر می‌رسد، نمایش آن کامپوننت را تا زمانی که صفحه ی کاربر رندر نشده باشد به تاخیر بیندازید.
 >
 >برای جدا کردن کامپوننتی که به افکت‌های صفحه آرایی نیاز دارد و از سرور رندر می‌شود، آن را به طور مشروط رندر کنید:
 >`showChild && <Child />`
@@ -485,7 +485,7 @@ function useFriendStatus(friendID) {
 
 در بعضی مواقع، فرمت کردن یک متغیر برای مشاهده ی بهترش، می‌تواند عملیات پرهزینه ای باشد. 
 
-از همی‌ن روی، `useDebugValue`  یک تابع برای فرمت کردن را به عنوان آرگومان اختیاری دوم می‌تواند بپذیرد. این تابع فقط زمانی فراخوانده می‌شود که هوک مورد نظر تحت بررسی قرار گیرد. این تابع، متغیر خطایابی را (به عنوان آرگومانش) دریافت می‌کند و شکل فرمت شده ی آن را باز می‌گرداند. 
+از همین روی، `useDebugValue`  یک تابع برای فرمت کردن را به عنوان آرگومان اختیاری دوم می‌تواند بپذیرد. این تابع فقط زمانی فراخوانده می‌شود که هوک مورد نظر تحت بررسی قرار گیرد. این تابع، متغیر خطایابی را (به عنوان آرگومانش) دریافت می‌کند و شکل فرمت شده ی آن را باز می‌گرداند. 
 
 فرض کنیم که در یک هوک سفارشی، متغیری از جنس زمان (`Date`)  بازگردانده می‌شود. برای اینکه بی مورد از تابع `toDateString` استفاده نشود، می‌توانید آن را به عنوان تابع فرمت کننده به `useDebugValue`  بدهید:
 

From 906ff3b5606b91015013be3d343a8d02d37cf799 Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Mon, 29 Apr 2019 03:05:35 +0400
Subject: [PATCH 30/31] major changes done

---
 content/docs/hooks-reference.md | 66 ++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index e71e16514..f030c3dea 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -8,12 +8,12 @@ next: hooks-faq.html
 
 *هوک‌ها* در نسخه‌ی 16.8 به ری‌اکت افزوده شدند. با استفاده از آنها شما می‌توانید از state و سایر ویژگی‌های ری‌اکت بدون نیاز به نوشتن کلاس استفاده کنید.
 
-در این صفحه شما تمام رابط‌های کاربری (API)  برای هوک‌هایی که پیش-ساخته اند را خواهید یافت.
+این صفحه API های مربوط به هوک‌های پیش‌ساخته در ری‌اکت را شرح می‌دهد.
 
-اگر تازه با هوک‌ها آشنا شده اید، شاید بهتر باشد اول از همه  [مرور کلی](/docs/hooks-overview.html) آنها را بخوانید. همچنین در بخش   [پاسخ به سوالات متداول](/docs/hooks-faq.html) هم اطلاعات مفیدی خواهید یافت.
+اگر تازه با هوک‌ها آشنا شده اید، شاید بهتر باشد اول از همه  [مرور کلی](/docs/hooks-overview.html) آن‌ها را بخوانید. همچنین در بخش   [پاسخ به سوالات متداول](/docs/hooks-faq.html) هم اطلاعات مفیدی خواهید یافت.
 
 
-- [هوک‌های اولیه](#basic-hooks)
+- [هوک‌های پایه‌ای](#basic-hooks)
   - [`useState`](#usestate)
   - [`useEffect`](#useeffect)
   - [`useContext`](#usecontext)
@@ -41,14 +41,14 @@ const [state, setState] = useState(initialState);
 تابع `setState`  برای به‌روز‌ رسانی آن متغیر استفاده می‌شود. می‌توان به آن متغیر جدیدی داد که باعث تغییر state شده و در نتیجه رندر مجدد آن کامپوننت را در صف اجرا قرار می‌دهد.
 
 ```js
-setState(newState); 
+setState(newState);
 ```
 در رندر‌های بعدی، اولین متغیر بازگردانده شده از `useState` ، جدیدترین state آن کامپوننت بعد از به‌روز‌ رسانی خواهد بود.
 
 
 >توجه
 >
->ری‌اکت تضمین می‌کند که تابع `setState`  ماهیت خودش را در زمان رندرهای بعدی حفظ کند. از همین رو، با اطمینان کامل می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  خارج کرد.
+>ری‌اکت تضمین می‌کند که  هویت تابع `setState` ثابت باقی بماند و در رندر‌های مجدد تغییری نکنداز همین رو، با اطمینان کامل می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  خارج کرد.
 
 
 #### به‌روز‌ رسانی از طریق تابع {#functional-updates}
@@ -75,7 +75,7 @@ function Counter({initialCount}) {
 
 > Note
 >
-> هنگامی که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
+> هنگامی‌که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
 >
 > ```js
 > setState(prevState => {
@@ -100,7 +100,7 @@ const [state, setState] = useState(() => {
 
 #### انصراف دادن از به‌روز‌ رسانی state {#bailing-out-of-a-state-update}
 
-اگر متغیر استفاده شده در هوک state، پس از به‌روز‌ رسانی، هنچنان برابر با متغیر فعلی از آب در بیاید (یعنی تغییری نکرده باشد)، ری‌اکت از رندر مجدد فرزندان آن کامپوننت و اجرا کردن افکت‌ها (effects) اجتناب خواهد کرد. (ری‌اکت  برای مقایسه از الگوریتم [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) استفاده می‌کند.)
+اگر متغیر استفاده شده در هوک state، پس از به‌روز‌ رسانی، همچنان  برابر با متغیر فعلی از آب در بیاید (یعنی تغییری نکرده باشد)، ری‌اکت از رندر مجدد فرزندان آن کامپوننت و اجرا کردن افکت‌ها (effects) اجتناب خواهد کرد. (ری‌اکت  برای مقایسه از الگوریتم [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description) استفاده می‌کند.)
 
 دقت کنید که ممکن است ری‌اکت نیاز داشته باشد تا آن کامپوننت خاص را پیش از انصراف دادن، دوباره رندر کند. این مسئله جای نگرانی ندارد چون در آن صورت، بی دلیل وارد المنت‌هایی در لایه‌های عمیق‌تر نخواهد شد. اگر در حین رندر کردن محاسبات سنگین انجام می‌دهید، می‌توانید با استفاده از  `useMemo` آنها را بهینه کنید.
 
@@ -113,7 +113,7 @@ useEffect(didUpdate);
 
 یک تابع دریافت می‌کند. کدی که در تابع هست حالت دستوری داشته و احتمالا افکت ایجاد خواهد کرد.
 
-به فرآیندهایی نظیر تغییر داده‌ها، اشتراک داده‌ها (subscriptions)، تایمر‌ها، رخدادنگاری (logging) و از این قبیل، "اثرات جانبی" می‌گوییم. ری‌اکت کدی نوشته شده در بدنه ی یک کامپوننت از نوع تابعی را _فاز رندر_ می‌نامد. در این فاز، شما اجازه ندارید که اثرات جانبی داشته باشید. اگر اجازه ی این کار را داشتید باعث می‌شد که خطاهای سردرگم کننده ای بوجودآید و در نمایش رابط کاربری ناهماهنگی دیده شود.
+به فرآیندهایی نظیر تغییر داده‌ها (mutations)، اشتراک داده‌ها (subscriptions)، تایمر‌ها، رخدادنگاری (logging) و از این قبیل، "اثرات جانبی" می‌گوییم. ری‌اکت [کدهای نوشته شده در] بدنه اصلی یک کامپوننت از نوع تابعی را فاز رندر می‌نامد. در این فاز، شما اجازه ندارید که اثرات جانبی داشته باشید. اگر اجازه ی این کار را داشتید باعث می‌شد که خطاهای سردرگم کننده ای بوجودآید و در نمایش رابط کاربری ناهماهنگی دیده شود.
 
 به جای آن، از  `useEffect` استفاده کنید. تابعی که شما به `useEffect` می‌دهید زمانی اجرا می‌شود که رندر به صفحه ی نمایش ارسال شده باشد. می‌توانید اینگونه فرض کنید که استفاده از این افکت، به شما راه فراری می‌دهد تا از دنیای تابع گرایانه ی ری‌اکت خارج شوید و وارد دنیای برنامه نویسی دستوری شوید.
 
@@ -122,7 +122,7 @@ useEffect(didUpdate);
 
 #### پاکسازی یک افکت {#cleaning-up-an-effect}
 
-غالبا افکت‌ها، منابعی از داده‌ها را ایجاد می‌کنند، اما پیش از آنکه کامپوننت ما از صفحه حذف شود، لازم است که این منابع را پاکسازی کنیم. به طور مثال اشتراک (subscription) و یا شناسه ی یک تایمر. برای پاکسازی آنها، می‌توانیم یک تابع را به عنوان خروجی `useEffect`  استفاده کنیم که کار پاکسازی را برایمان انجام دهد. مثلا برای ایجاد یک اشتراک:
+غالبا افکت‌ها، منابعی از داده‌ها را ایجاد می‌کنند، اما پیش از آنکه کامپوننت ما از صفحه حذف شود، لازم است که این منابع را پاکسازی کنیم. به طور مثال اشتراک (subscription) و یا شناسه‌ی یک تایمر. برای پاکسازی آنها، می‌توانیم یک تابع را به عنوان خروجی `useEffect`  استفاده کنیم که کار پاکسازی را برایمان انجام دهد. مثلا برای ایجاد یک اشتراک:
 
 
 ```js
@@ -135,25 +135,25 @@ useEffect(() => {
 });
 ```
 
-برای آنکه دچار نشت در حافظه نشویم، تابعی که کار پاکسازی را انجام می‌دهد، پیش از آنکه کامپوننت ما از صفحه ی کاربر حذف شود اجرا خواهد شد. از طرف دیگر، اگر یک افکت چند بار فراخوانده شود (که معمولا این طور است)، **پیش از اجرای افکت بعدی، افکت پیشین پاکسازی خواهد شد.**این بدین معناست که در همین مثال قبلی ما، در هر به‌روز‌ رسانی یک اشتراک جدید خلق خواهد شد. برای جلوگیری از اجرای مکرر یک افکت در موقع به‌روز‌ رسانی، به قسمت بعدی مراجعه کنید.
+برای آنکه دچار نشت در حافظه نشویم، تابعی که کار پاکسازی را انجام می‌دهد، پیش از آنکه کامپوننت ما از صفحه ی کاربر حذف شود اجرا خواهد شد. از طرف دیگر، اگر یک افکت چند بار فراخوانده شود (که معمولا این طور است)، **پیش از اجرای افکت بعدی، افکت پیشین پاکسازی خواهد شد.**این بدین معناست که در همی‌ن مثال قبلی ما، در هر به‌روز‌ رسانی یک اشتراک جدید خلق خواهد شد. برای جلوگیری از اجرای مکرر یک افکت در موقع به‌روز‌ رسانی، به قسمت بعدی مراجعه کنید.
 
 
 #### زمان بندی افکت‌ها {#timing-of-effects}
 
-برخلاف `componentDidMount`  و `componentDidUpdate`، تابعی که به `useEffect`  می‌دهید، **پس از** صفحه آرایی (layout) و ترسیم (paint)، طی یک رویداد به تعویق افتاده (deferred event) اجرا می‌شود. از همین رو، useEffect  مکان مناسبی برای اجرای بیشتر اثرات جانبی متدول است. مثل ایجاد اشتراک‌ها (subscriptions) و کنترل کننده ی رویداد‌ها (event handlers). دلیلش این است که بیشتر این کارها، نباید مانعی بر سر راه مرورگر در حین به‌روز‌ رسانی صفحه باشند.  
+برخلاف `componentDidMount`  و `componentDidUpdate`، تابعی که به `useEffect`  می‌دهید، **پس از** صفحه آرایی (layout) و ترسیم (paint)، طی یک رویداد به تعویق افتاده (deferred event) اجرا می‌شود. از همین رو، useEffect  مکان مناسبی برای اجرای بیشتر اثرات جانبی متداول است. مثل ایجاد اشتراک‌ها (subscriptions) و کنترل کننده ی رویداد‌ها (event handlers). دلیلش این است که بیشتر این کارها، نباید مانعی بر سر راه مرورگر در حین به‌روز‌ رسانی صفحه باشند.  
 
-با این حال، نمی‌توان تمام افکت‌ها را با تعویق انجام داد. به طور مثال اگر تغییری که در DOM می‌دهیم در معرض دید کاربر باشد، باید آن را به طور همزمان (synchronously) و پیش از ترسیم صفحه انجام دهیم تا باعث بروز ناهماهنگی در صفحه ی نمایش نشود. (این از نظر مفهومی مانند تفاوت  event listener‌های فعال و غیرفعال است.) برای اعمال چنین افکت‌هایی، ری‌اکت هوک دیگری را در اختیار شما قرار می‌دهد: [`useLayoutEffect`](#uselayouteffect). این افکت کارکردی شبیه `useEffect` دارد و تنها تفاوتش زمان اجرای آن است. 
+با این حال، نمی‌توان تمام افکت‌ها را با تعویق انجام داد. به طور مثال اگر تغییری که در DOM می‌دهیم در معرض دید کاربر باشد، باید آن را به طور همزمان (synchronously) و پیش از ترسیم صفحه انجام دهیم تا باعث بروز ناهماهنگی در صفحه ی نمایش نشود. (این از نظر مفهومی‌مانند تفاوت  event listener‌های فعال و غیرفعال است.) برای اعمال چنین افکت‌هایی، ری‌اکت هوک دیگری را در اختیار شما قرار می‌دهد: [`useLayoutEffect`](#uselayouteffect). این افکت کارکردی شبیه `useEffect` دارد و تنها تفاوتش زمان اجرای آن است. 
 
-برخلاف آنکه اجرای `useEffect` تا پس از ترسیم صفحه به تعویق می‌افتد، اما قطعا پیش از رندر‌های جدید اجرا خواهد شد. ری‌اکت همی‌شه افکت‌های متعلق به رندر پیشین را قبل از به‌روز‌ رسانی جدید، اعمال کرده و تمام می‌کند.
+اگرچه اجرای `useEffect` تا پس از ترسیم صفحه به تعویق می‌افتد، اما قطعا پیش از رندر‌های جدید اجرا خواهد شد. ری‌اکت همیشه افکت‌های متعلق به رندر پیشین را قبل از به‌روز‌ رسانی جدید، اعمال کرده و تمام می‌کند.
 
 
 #### اجرای مشروط یک افکت  {#conditionally-firing-an-effect}
 
-رفتار پیش فرض افکت‌ها بدین شکل است که پس از اتمام هر رندر، فراخوانی و اجرا شوند. در این حالت، اگر یکی از وابستگی‌های افکت ما تغییر کند، افکت دوباره اجرا می‌شود.
+رفتار پیش فرض افکت‌ها بدین شکل است که پس از اتمام هر رندر اجرا شوند. در این حالت، اگر یکی از وابستگی‌های افکت ما تغییر کند، افکت دوباره اجرا می‌شود.
 
-اما این در بعضی از موارد ممکن است باعث افراط بی مورد شود. مثال قبلی که در مورد ایجاد اشتراک (subscription) بود را به خاطر بیاورید. ما نیاز نداریم که در هر به‌روز‌ رسانی، یک اشتراک جدید بسازیم. مگر آنکه props‌هایی که دریافت می‌کنیم تغییر کرده باشند.
+اما این در بعضی از موارد ممکن است باعث افراط بی مورد شود. مثال قبلی که در مورد ایجاد اشتراک (subscription) بود را به خاطر بیاورید. ما نیاز نداریم که در هر به‌روز‌ رسانی، یک اشتراک جدید بسازیم. مگر آنکه `props.source` تغییر کرده باشند.
 
-بدین منظور، آرگومان دومی‌را به `useEffect`  بدهید. این آرگومان یک آرایه (array) خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
+بدین منظور، آرگومان دومی‌ را به `useEffect`  بدهید. این آرگومان یک آرایه (array) خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
 
 
 ```js
@@ -170,7 +170,7 @@ useEffect(
 
 >توجه
 >
->اگر خواستید این بهینه سازی را انجام دهید، اول اطمینان حاصل کنید که **تمام متغیر‌هایی که در حوزه ی کامپوننت هستند (از قبیل state و  props‌ها) که در طول زمان عوض می‌شوند و افکت از آنها استفاده می‌کند**، در آرایه اضافه کرده اید. در غیر این صورت، کد شما از متغیرهای مرده ای که از رندر‌های پیشین به جای مانده اند استفاده خواهد کرد. یاد بگیرید که [چگونه با توابع کار کنید](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) و زمانی که [آرایه متغیرها مکررا تغییر می‌کند](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)، چه کنید.
+>اگر خواستید این بهینه سازی را انجام دهید، اول اطمی‌نان حاصل کنید که **تمام متغیر‌هایی که در scope کامپوننت هستند (از قبیل state و  propsها) که در طول زمان عوض می‌شوند و افکت از آنها استفاده می‌کند**، در آرایه اضافه کرده اید. در غیر این صورت، کد شما از متغیرهای مرده ای که از رندر‌های پیشین به جای مانده اند استفاده خواهد کرد. یاد بگیرید که [چگونه با توابع کار کنید](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) و زمانی که [آرایه متغیرها مکررا تغییر می‌کند](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often)، چه کنید.
 >
 >اگر شما می‌خواهید که یک افکت فقط یک بار اجرا و پاکسازی شود (در mount و unmount)، می‌توانید به عنوان آرگومان دوم یک آرایه ی خالی (`[]`) وارد کنید. با این کار به ری‌اکت می‌گویید که افکت شما هیچ وابستگی به متغیرهای state یا props ندارد. پس لازم نیست که مجددا اجرا شود. البته این یک حالت ویژه نیست – آرایه ی وابستگی‌ها همیشه اینطور کار می‌کنند. 
 >
@@ -178,7 +178,7 @@ useEffect(
 >
 >توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
-آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان یک آرگومان در خود تابع افکت‌ها وارد نمی‌شود. اما به طور منطقی، کارش همین است: هر متغیری که داخل تابع افکت از آن استفاده شده، باید در آرایه ی وابستگی‌های آن افکت هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان یک آرگومان در خود تابع افکت‌ها وارد نمی‌شود. اما به طور منطقی، کارش همی‌ن است: هر متغیری که داخل تابع افکت از آن استفاده شده، باید در آرایه ی وابستگی‌های آن افکت هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 
 
 ### `useContext` {#usecontext}
@@ -187,7 +187,7 @@ useEffect(
 const value = useContext(MyContext);
 ```
 
-این هوک، آبجکت context را دریافت می‌کند (همان متغیری که از `React.createContext` بازگردانده می‌شود) و بعد value مرتبط با context فعلی را به ما می‌دهد. اما محتویات داخل  context  فعلی ما از کجا می‌آیند؟ از نزدیک‌ترین`<MyContext.Provider>` به ما، (فوق همین کامپوننت)، که در خودش یک prop  با عنوان `value`  داشته باشد. 
+این هوک، آبجکت context را دریافت می‌کند (همان متغیری که از `React.createContext` بازگردانده می‌شود) و بعد `value` مرتبط با context فعلی را به ما می‌دهد. محتویات داخل context فعلی ما از نزدیک‌ترین`<MyContext.Provider>`  فوق همین کامپوننت می آید، که در خودش یک prop  با عنوان value داشته باشد.
 
 وقتی که نزدیک‌ترین `<MyContext.Provider>` ، بالای یک کامپوننت به روز رسانی می‌شود، این هوک فرایند رندر کردن مجدد کامپوننت را کلید می‌زند و برای این کار از جدیدترین `value` که به `<MyContext.Provider>` داده شده است استفاده می‌کند. 
 
@@ -218,7 +218,7 @@ const [state, dispatch] = useReducer(reducer, initialArg, init);
 
 این جایگزینی برای [`useState`](#usestate) می‌تواند باشد. یک reducer از نوع `(state, action) => newState` می‌گیرد و خروجی که به شما می‌دهد state فعلی است به همراه متد `dispatch` . (اگر با ریداکس  Redux آشنا باشید می‌دانید که شیوه ی کارش چیست.)
 
-اما چه زمانی بهتر است به جای `useState`  از `useReducer`  استفاده کنید؟ زمانی که state شما ساختار منطقی پیچیده ای دارد و شامل زیر مجموعه‌هایی با عضو‌های متعدد است، یا زمانی که state بعدی شما وابسته به state پیشین شما است. بعلاوه اگر کامپوننت‌هایی دارید که به‌روز‌ رسانی در لایه‌های عمیق‌تری انجام می‌دهند، `useReducer`  به شما این امکان را می‌دهد تا این فرایند را بهینه کنید [چون قادر خواهید بود که به جای کال بک‌ها (callbacks)، از `dispatch`  استفاده کنید.](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)
+اما چه زمانی بهتر است به جای `useState`  از `useReducer`  استفاده کنید؟ زمانی که state شما ساختار منطقی پیچیده ای دارد و شامل زیر مجموعه‌هایی با عضو‌های متعدد است، یا زمانی که state بعدی شما وابسته به state پیشین شما است. بعلاوه اگر کامپوننت‌هایی دارید که به‌روز‌ رسانی در لایه‌های عمیق‌تری انجام می‌دهند، `useReducer`  به شما این امکان را می‌دهد تا این فرایند را بهینه کنید [چون قادر خواهید بود که به جای callback ها، از `dispatch`  استفاده کنید.](/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)
 
 در ادامه، مثال شمارشگر قبلی را که پیشتر با  [`useState`](#usestate) نوشته بودیم را با reducer بازنویسی می‌کنیم:
 
@@ -250,7 +250,7 @@ function Counter({initialState}) {
 
 >توجه
 >
->ری‌اکت این اطمینان را می‌دهند که  ماهیت تابع `dispatch`  ثابت بماند و در رندر‌های بعدی عوض نشود. در نتیجه، با خیال راحت می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  حذف کرد.
+>ری‌اکت این اطمی‌نان را می‌دهند که  ماهیت تابع `dispatch`  ثابت بماند و در رندر‌های بعدی عوض نشود. در نتیجه، با خیال راحت می‌توان آن را از لیست وابستگی‌های `useEffect`  و `useCallback`  حذف کرد.
 
 
 #### تعریف کردن state اولیه {#specifying-the-initial-state}
@@ -266,7 +266,7 @@ function Counter({initialState}) {
 
 >توجه
 >
->شیوه ای که توسط ریداکس برای دادن آرگومان باب شده، `state = initialState`  می‌باشد، اما ری‌اکت از این شیوه استفاده نمی‌کند. چون متغیر اولیه ما بعضی از اوقات وابسته به props است و از هوک فراخوانی می‌شود. اگر همچنان نظر متفاوتی دارید می‌توانید آرگومان‌های خود را به شکل زیر وارد کنید تا عملکردی مانند ریداکس داشته باشد: `useReducer(reducer, undefined, reducer)` 
+>شیوه ای که توسط ریداکس برای دادن آرگومان باب شده، `state = initialState`  می‌باشد، اما ری‌اکت از این شیوه استفاده نمی‌کند. چون متغیر اولیه ما بعضی از اوقات وابسته به props است و از هوک فراخوانی می‌شود. اگر همچنان نظر متفاوتی دارید می‌توانید آرگومان‌های خود را به شکل زیر وارد کنید تا عملکردی مانند ریداکس داشته باشد، اما توصیه نمی‌شود: `useReducer(reducer, undefined, reducer)`
 
 #### تعریف اولیه از نوع کُند (Lazy initialization) {#lazy-initialization}
 
@@ -331,14 +331,14 @@ const memoizedCallback = useCallback(
 
 هر دو کدی که در زیر می‌بینید، کار یکسانی را انجام می‌دهند:
 
-`useCallback(آرایه ی وابستگیها، تابع)` 
+`useCallback(fn, deps)` 
 
-`useMemo(() => آرایه ی وابستگیها، تابع)`
+`useMemo(() => fn, deps)`
 
 
 > توجه
 >
->آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود کال بک‌ها داده نمی‌شود. اما به طور منطقی، کارشان همین است: هر متغیری که داخل کال بک ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+>آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود کال بک‌ها داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل کال بک ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
 >توصیه می‌کنیم که از قانون  [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
@@ -349,7 +349,7 @@ const memoizedCallback = useCallback(
 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 ```
 
-یک متغیر [مموایز ](https://en.wikipedia.org/wiki/Memoization)شده را باز می‌گرداند.
+یک متغیر [memoize](https://en.wikipedia.org/wiki/Memoization)شده را باز می‌گرداند.
 
 به آن یک تابع می‌دهید که نقش تولید کننده را دارد و آرگومان بعدیش، آرایه ای متشکل از وابستگی‌هاست. فقط زمانی `useMemo`  محاسبه مجدد را شروع می‌کند که یکی از وابستگی‌هایش تغییر کرده باشد. با این بهینه سازی، جلوی محاسبات سنگینی که در هر رندر می‌تواند روی دهد را می‌گیریم.
 
@@ -357,12 +357,12 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 
 اگر آرایه ای به آن نداده باشید، ارزش آن متغیر در هر رندر مجددا محاسبه خواهد شد.
 
-**شما می‌توانید به `useMemo`  برای بهینه سازی اجرا و نمایش کامپوننت تکیه کنید، اما نه به عنوان چیزی که همیشه به یک شکل کار کند.** مثلا در آینده ممکن است ری‌اکت برای کامپوننت‌هایی که هنوز نمایش داده نشده اند، نیاز به آزاد کردن فضا در حافظه داشته باشد و بخاطر همین، ممکن است متغیر مموایز شده ی پیشین را فراموش کند و در رندر بعدی دوباره آن را محاسبه کند. کدتان را جوری بنویسید که بدون `useMemo`  هم درست کار کند و از آن صرفا برای بهینه سازی اجرای کد استفاده کنید.
+**شما می‌توانید به `useMemo`  برای بهینه سازی اجرا و نمایش کامپوننت تکیه کنید، اما نه به عنوان چیزی که همیشه به یک شکل کار کند.** مثلا در آینده ممکن است ری‌اکت برای کامپوننت‌هایی که هنوز نمایش داده نشده اند، نیاز به آزاد کردن فضا در حافظه داشته باشد و بخاطر همی‌ن، ممکن است متغیر مموایز شده ی پیشین را فراموش کند و در رندر بعدی دوباره آن را محاسبه کند. کدتان را جوری بنویسید که بدون `useMemo`  هم درست کار کند و از آن صرفا برای بهینه سازی اجرای کد استفاده کنید.
 
 
 > توجه
 >
-> آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود تابع داده نمی‌شود. اما به طور منطقی، کارشان همین است: هر متغیری که داخل تابع ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
+> آرایه ی حاوی وابستگی‌ها، مستقیما به عنوان  آرگومان به خود تابع داده نمی‌شود. اما به طور منطقی، کارشان همی‌ن است: هر متغیری که داخل تابع ذکر شده، باید در آرایه ی وابستگی‌های آن هم حضور داشته باشد. در آینده، کامپایلری که به اندازه کافی پیشرفته باشد قادر خواهد بود تا این آرایه ی وابستگی‌ها را به طور خودکار بسازد.
 >
 > توصیه می‌کنیم که از قانون [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) که بخشی از پکیج [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) می‌باشد استفاده کنید. اگر وابستگی‌ها به شکل نادرستی اعلام شده باشند، به شما هشدار داده و راه اصلاحش را پیشنهاد می‌دهد.
 
@@ -372,9 +372,9 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 const refContainer = useRef(initialValue);
 ```
 
-`useRef`  یک آبجکت قابل رجوع (ref object) به شما می‌دهد که اولا متغیرهایش می‌توانند تغییر کنند و ثانیا پراپرتی .`.current`  آن برابر با آرگومان (`initialValue`) خواهد بود. آبجکتی که به شما باز می‌گرداند، تا پایان طول عمر کامپوننت دوام خواهد داشت.
+`useRef`  یک ref object به شما می‌دهد که اولا متغیرهایش می‌توانند تغییر کنند و ثانیا پراپرتی .`.current`  آن برابر با آرگومان (`initialValue`) خواهد بود. آبجکتی که به شما باز می‌گرداند، تا پایان طول عمر کامپوننت دوام خواهد داشت.
 
-یک استفاده ی متداول آن، برای دسترسی به المنت‌های زیرین، به شکل دستوری است:
+یک استفاده ی متداول آن، برای دسترسی به یک [المنت‌] فرزند، به شکل دستوری است:
 
 ```js
 function TextInputWithFocusButton() {
@@ -412,7 +412,7 @@ function TextInputWithFocusButton() {
 useImperativeHandle(ref, createHandle, [deps])
 ```
 
-وقتی که از `ref` در کامپوننتی استفاده می‌کنید، `useImperativeHandle`  به شما اجازه می‌دهد تا متغیر آن را از طریق کامپوننت والدش دستکاری کنید. مثل همی‌شه اکثرا باید از کد کردن دستوری، که از refs استفاده می‌کند،  اجتناب کرد. `useImperativeHandle`  باید با  `forwardRef` استفاده شود:
+وقتی که از `ref` در کامپوننتی استفاده می‌کنید، `useImperativeHandle`  به شما اجازه می‌دهد تا متغیر آن را از طریق کامپوننت والدش دستکاری کنید. مثل همیشه اکثرا باید از کد کردن دستوری، که از refs استفاده می‌کند،  اجتناب کرد. `useImperativeHandle`  باید با  `forwardRef` استفاده شود:
 
 
 ```js
@@ -442,7 +442,7 @@ FancyInput = forwardRef(FancyInput);
 >
 >اگر در حال تبدیل کامپوننت‌های کلاس خود هستید، توجه کنید که `useLayoutEffect`  در همان فازی کلید می‌خورد که `componentDidMount`  و `componentDidUpdate` کلید می‌خورند.  با این حال **توصیه ما این است که اول از همه با `useEffect`  شروع کنید** و بعد اگر با مشکل روبرو شدید، `useLayoutEffect`  را استفاده کنید.
 >
->اگر رندر شما در سرور انجام می‌شود، به خاطر داشته باشید که `useLayoutEffect`  یا `useEffect`  تا زمانی که تمام کد جاوااسکریپت دانلود نشده باشد اجرا نخواهد شد. به همین دلیل است که ری‌اکت زمانی که کامپوننتی در سرور رندر می‌شود و حاوی `useLayoutEffect` است به شما هشدار می‌دهد. برای حل این مشکل، دو راه دارید: یک راه این است که اگر کد شما در اولین رندر دخالتی ندارد، آن را به درون `useEffect`  انتقال دهید. اما اگر بدون اجرای `useLayoutEffect` ، HTML شما خراب به نظر می‌رسد، نمایش آن کامپوننت را تا زمانی که صفحه ی کاربر رندر نشده باشد به تاخیر بیندازید.
+>اگر رندر شما در سرور انجام می‌شود، به خاطر داشته باشید که `useLayoutEffect`  یا `useEffect`  تا زمانی که تمام کد جاوااسکریپت دانلود نشده باشد اجرا نخواهد شد. به همی‌ن دلیل است که ری‌اکت زمانی که کامپوننتی در سرور رندر می‌شود و حاوی `useLayoutEffect` است به شما هشدار می‌دهد. برای حل این مشکل، دو راه دارید: یک راه این است که اگر کد شما در اولین رندر دخالتی ندارد، آن را به درون `useEffect`  انتقال دهید. اما اگر بدون اجرای `useLayoutEffect` ، HTML شما خراب به نظر می‌رسد، نمایش آن کامپوننت را تا زمانی که صفحه ی کاربر رندر نشده باشد به تاخیر بیندازید.
 >
 >برای جدا کردن کامپوننتی که به افکت‌های صفحه آرایی نیاز دارد و از سرور رندر می‌شود، آن را به طور مشروط رندر کنید:
 >`showChild && <Child />`
@@ -485,7 +485,7 @@ function useFriendStatus(friendID) {
 
 در بعضی مواقع، فرمت کردن یک متغیر برای مشاهده ی بهترش، می‌تواند عملیات پرهزینه ای باشد. 
 
-از همین روی، `useDebugValue`  یک تابع برای فرمت کردن را به عنوان آرگومان اختیاری دوم می‌تواند بپذیرد. این تابع فقط زمانی فراخوانده می‌شود که هوک مورد نظر تحت بررسی قرار گیرد. این تابع، متغیر خطایابی را (به عنوان آرگومانش) دریافت می‌کند و شکل فرمت شده ی آن را باز می‌گرداند. 
+از همی‌ن روی، `useDebugValue`  یک تابع برای فرمت کردن را به عنوان آرگومان اختیاری دوم می‌تواند بپذیرد. این تابع فقط زمانی فراخوانده می‌شود که هوک مورد نظر تحت بررسی قرار گیرد. این تابع، متغیر خطایابی را (به عنوان آرگومانش) دریافت می‌کند و شکل فرمت شده ی آن را باز می‌گرداند. 
 
 فرض کنیم که در یک هوک سفارشی، متغیری از جنس زمان (`Date`)  بازگردانده می‌شود. برای اینکه بی مورد از تابع `toDateString` استفاده نشود، می‌توانید آن را به عنوان تابع فرمت کننده به `useDebugValue`  بدهید:
 

From 04e68b392d2e0521593b0e4e8ba52788b600f41d Mon Sep 17 00:00:00 2001
From: Mehdi <40258654+seven-deuce@users.noreply.github.com>
Date: Tue, 30 Apr 2019 01:08:10 +0400
Subject: [PATCH 31/31] changes done - April 30

---
 content/docs/hooks-reference.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index f030c3dea..77352daa2 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -26,7 +26,7 @@ next: hooks-faq.html
   - [`useLayoutEffect`](#uselayouteffect)
   - [`useDebugValue`](#usedebugvalue)
 
-## هوک‌های اولیه {#basic-hooks}
+## هوک‌های پایه‌ای {#basic-hooks}
 
 ### `useState` {#usestate}
 
@@ -70,12 +70,12 @@ function Counter({initialCount}) {
 }
 ```
 
-دکمه‌های “+”  و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state  باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همیشه متغیر را به آن مقداری که در ابتدا برایش تعریف شده بود باز می‌گرداند.
+دکمه‌های “+” و “-“ از تابع به‌روز‌ رسانی متغیر state استفاده می‌کنند چون نیاز دارند از متغیر اولیه تعریف شده برای state باخبر شوند. اما دکمه ی “Reset” از شکل تابعی استفاده نمی‌کند چون همیشه متغیر را به مقدار اولیه باز می گرداند.
 
 
-> Note
+> توجه
 >
-> هنگامی‌که در کامپوننت‌هایی که به شکل کلاس تعریف شده اند، از متد `setState`  استفاده می‌کردید، می‌توانستید بخشی از آبجکتی که به عنوان متغیر state آن کامپوننت تعریف شده بود را عوض کنید و بقیه آبجکت دست نخورده باقی بماند. اما هنگام استفاده از `useState`  این اتفاق به طور خودکار نمی‌افتد. اگر قصد دارید که بقیه آبجکت دست نخورده باقی بماند و فقط بخشی از آن را تغییر دهید، این را باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجام دهید:
+> در کامپوننت‌هایی که به شکل کلاس تعریف می شدند، می توانستید با استفاده از متدsetState  متغیر به‌روز‌ رسانی شده را با آبجکت پیشین state ادغام کنید. اماuseState به آن شکل کار نمی کند. اگر قصد دارید که کاری مثل آن بکنید، باید با استفاده از "تابع بروز کننده" و “object spread syntax” انجامش دهید:
 >
 > ```js
 > setState(prevState => {
@@ -153,7 +153,7 @@ useEffect(() => {
 
 اما این در بعضی از موارد ممکن است باعث افراط بی مورد شود. مثال قبلی که در مورد ایجاد اشتراک (subscription) بود را به خاطر بیاورید. ما نیاز نداریم که در هر به‌روز‌ رسانی، یک اشتراک جدید بسازیم. مگر آنکه `props.source` تغییر کرده باشند.
 
-بدین منظور، آرگومان دومی‌ را به `useEffect`  بدهید. این آرگومان یک آرایه (array) خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
+بدین منظور، آرگومان دومی‌ را به `useEffect`  بدهید. این آرگومان یک آرایه  خواهد بود شامل تمام متغیرهایی که افکت ما به آن وابسته است. مثال قبلی ما پس از به‌روز‌ رسانی بدین شکل در خواهد آمد:
 
 
 ```js
@@ -325,9 +325,9 @@ const memoizedCallback = useCallback(
 );
 ```
 
-یک کال بک مموایز شده ([memoized](https://en.wikipedia.org/wiki/Memoization) callback) را باز می‌گرداند. 
+یک ([memoized](https://en.wikipedia.org/wiki/Memoization) callback) را باز می‌گرداند.
 
-یک کال بک اینلاین و آرایه ای از وابستگی‌ها را به آن بدهید. `useCallback`  نسخه ی مموایز شده ای از کال بک را به شما باز خواهد گرداند. این نسخه فقط زمانی تغییر خواهد کرد که یکی از وابستگی‌هایش تغییر کند. این در چه مواقعی به درد می‌خورد؟ زمانی که می‌خواهیم کال بک‌ها را به کامپوننت‌های سطح پایینی بدهیم که بهینه شده اند. این کامپوننت‌ها با تکیه بر "برابری و تطبیق متغیر با مرجعش" از رندر‌های بی مورد جلوگیری می‌کنند (به طور مثال:  `shouldComponentUpdate`).
+یک کال بک درخط (inline) و آرایه ای از وابستگی‌ها را به آن بدهید. `useCallback`  نسخه ی مموایز شده ای از کال بک را به شما باز خواهد گرداند. این نسخه فقط زمانی تغییر خواهد کرد که یکی از وابستگی‌هایش تغییر کند. این در چه مواقعی به درد می‌خورد؟ زمانی که می‌خواهیم کال بک‌ها را به کامپوننت‌های سطح پایینی بدهیم که بهینه شده اند. این کامپوننت‌ها با تکیه بر "برابری و تطبیق متغیر با مرجعش" از رندر‌های بی مورد جلوگیری می‌کنند (به طور مثال:  `shouldComponentUpdate`).
 
 هر دو کدی که در زیر می‌بینید، کار یکسانی را انجام می‌دهند: