final fixes

Author: khikmatjon

src/content/reference/react/useCallback.md

@@ -20,7 +20,7 @@ const cachedFn = useCallback(fn, dependencies)
 
 ### `useCallback(fn, dependencies)` {/*usecallback*/}
 
-Вызовите `useCallback` на верхнем уровне вашего компонента, чтобы кешировать определение функции между рендерами:
+Вызовите `useCallback` на верхнем уровне вашего компонента, чтобы кешировать функцию между повторными рендерами:
 
 ```js {4,9}
 import { useCallback } from 'react';
@@ -38,7 +38,7 @@ export default function ProductPage({ productId, referrer, theme }) {
 
 #### Параметры {/*parameters*/}
 
-* `fn`: Значение функции, которую вы хотите кешировать, может принимать любые аргументы и возвращать любые значения. React вернет (но не вызовет!) вашу функцию при первом рендере. При последующих рендерах React даст вам ту же функцию, если `dependencies` не изменились. В противном случае он вернет функцию, переданную при текущем рендере, и сохранит её для возможного повторного использования. React не вызывает вашу функцию, он возвращает её вам, чтобы вы могли решить, когда и нужно ли её вызывать.
+* `fn`: Значение функции, которую вы хотите кешировать. Она может принимать любые аргументы и возвращать любые значения. React вернет (но не вызовет!) вашу функцию при первом рендере. При последующих рендерах React даст вам ту же функцию, если `dependencies` не изменились. В противном случае он вернет функцию, переданную при текущем рендере, и сохранит её для возможного повторного использования. React не вызывает вашу функцию. Он возвращает её вам, чтобы вы могли решить, когда и нужно ли её вызывать.
 
 * `dependencies`: Список всех реактивных значений, на которые ссылается код `fn`. К реактивным значениям относятся пропсы, состояние и все переменные и функции, объявленные непосредственно в теле компонента. Если ваш линтер [настроен для использования с React](/learn/editor-setup#linting), он проверит, что каждое реактивное значение правильно указано как зависимость. Список зависимостей должен иметь постоянное количество элементов и быть записан примерно так: `[dep1, dep2, dep3]`. React будет сравнивать каждую зависимость с её предыдущим значением, используя алгоритм сравнения [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is).
 
@@ -78,14 +78,14 @@ function ProductPage({ productId, referrer, theme }) {
 
 Вам нужно передать две вещи в `useCallback`:
 
-1. Функцию, которую вы хотите кешировать между рендерами.
+1. Функцию, которую вы хотите кешировать между повторными рендерами.
 2. <CodeStep step={2}>Список зависимостей</CodeStep>, включающий каждое значение внутри вашего компонента, которое используется внутри функции.
 
 При первом рендере <CodeStep step={3}>возвращаемая функция</CodeStep> из `useCallback` будет той функцией, которую вы передали.
 
 При последующих рендерах React сравнит <CodeStep step={2}>зависимости</CodeStep> с теми, которые вы передали при предыдущем рендере. Если ни одна из зависимостей не изменилась (сравнение производится с помощью [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useCallback` вернёт ту же функцию, что и раньше. В противном случае, `useCallback` вернёт функцию, переданную при *текущем* рендере.
 
-Другими словами, `useCallback` кеширует функцию между рендерами до тех пор, пока её зависимости не изменятся.
+Другими словами, `useCallback` кеширует функцию между повторными рендерами до тех пор, пока её зависимости не изменятся.
 
 **Давайте рассмотрим пример, чтобы понять, когда это полезно.**
 
@@ -103,7 +103,7 @@ function ProductPage({ productId, referrer, theme }) {
 
 Вы заметили, что при переключении пропса `theme` приложение на мгновение зависает, но если убрать `<ShippingForm />` из вашего JSX, оно работает быстро. Это говорит о том, что стоит попытаться оптимизировать компонент `ShippingForm`.
 
-**По умолчанию, когда компонент повторно рендерится, React рекурсивно рендерит всех его дочерних компонентов.** Поэтому, когда `ProductPage` рендерится с другой `theme`, компонент `ShippingForm` *тоже* повторно рендерится. Это нормально для компонентов, которые не требуют больших вычислений при рендере. Но если повторный рендер медленный, можно сказать `ShippingForm` пропустить рендеринг, если его пропсы такие же, как при последнем рендере, обернув его в [`memo`:](/reference/react/memo)
+**По умолчанию, когда компонент повторно рендерится, React рекурсивно отрендерит снова все его дочерние компоненты.** Поэтому, когда `ProductPage` рендерится с другой `theme`, компонент `ShippingForm` *тоже* повторно рендерится. Это нормально для компонентов, которые не требуют больших вычислений при рендере. Но если повторный рендер медленный, можно сказать `ShippingForm` пропустить повторный рендеринг, если его пропсы такие же, как при последнем рендере, обернув его в [`memo`:](/reference/react/memo)
 
 ```js {3,5}
 import { memo } from 'react';
@@ -127,7 +127,7 @@ function ProductPage({ productId, referrer, theme }) {
 
   return (
     <div className={theme}>
-      {/* ... таким образом, пропсы ShippingForm никогда не будут одинаковыми, и он будет рендериться каждый раз. */}
+      {/* ... таким образом, пропсы ShippingForm никогда не будут одинаковыми, и он будет повторно рендериться каждый раз. */}
       <ShippingForm onSubmit={handleSubmit} />
     </div>
   );
@@ -138,13 +138,13 @@ function ProductPage({ productId, referrer, theme }) {
 
 ```js {2,3,8,12-13}
 function ProductPage({ productId, referrer, theme }) {
-  // Сообщите React, чтобы кешировать вашу функцию между рендерами...
+  // Сообщите React, чтобы кешировать вашу функцию между повторными рендерами...
   const handleSubmit = useCallback((orderDetails) => {
     post('/product/' + productId + '/buy', {
       referrer,
       orderDetails,
     });
-  }, [productId, referrer]); // // ...поэтому, пока эти зависимости не изменятся...
+  }, [productId, referrer]); // // ...пока эти зависимости не изменятся...
 
   return (
     <div className={theme}>
@@ -155,7 +155,7 @@ function ProductPage({ productId, referrer, theme }) {
 }
 ```
 
-**Оборачивая `handleSubmit` в `useCallback`, вы гарантируете, что это *одна и та же* функция между рендерами** (пока зависимости не изменятся). Вам *не нужно* оборачивать функцию в `useCallback`, если на это нет конкретной причины. В этом примере причина в том, что вы передаёте её в компонент, обёрнутый в [`memo`,](/reference/react/memo), что позволяет ему пропускать повторные рендеры. Есть и другие причины использовать `useCallback`, которые описаны далее на этой странице.
+**Оборачивая `handleSubmit` в `useCallback`, вы гарантируете, что это *одна и та же* функция между повторными рендерами** (пока зависимости не изменятся). Вам *не нужно* оборачивать функцию в `useCallback`, если на это нет конкретной причины. В этом примере причина в том, что вы передаёте её в компонент, обёрнутый в [`memo`,](/reference/react/memo) что позволяет ему пропускать повторные рендеры. Есть и другие причины использовать `useCallback`, которые описаны далее на этой странице.
 
 <Note>
 
@@ -167,7 +167,7 @@ function ProductPage({ productId, referrer, theme }) {
 
 #### Как useCallback связан с useMemo? {/*how-is-usecallback-related-to-usememo*/}
 
-Вы часто увидите [`useMemo`](/reference/react/useMemo) вместе с `useCallback`. . Оба они полезны при оптимизации дочернего компонента. Они позволяют вам [мемоизировать](https://en.wikipedia.org/wiki/Memoization) (или, другими словами, кешировать) что-то, что вы передаете вниз по иерархии:
+Вы часто увидите [`useMemo`](/reference/react/useMemo) вместе с `useCallback`. Они оба полезны при оптимизации дочернего компонента. Они позволяют вам [мемоизировать](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%BC%D0%BE%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F) (или, другими словами, кешировать) что-то, что вы передаете вниз по иерархии:
 
 ```js {6-8,10-15,19}
 import { useMemo, useCallback } from 'react';
@@ -220,7 +220,7 @@ function useCallback(fn, dependencies) {
 
 Кеширование функции с помощью `useCallback` полезно в нескольких случаях:
 
-- Вы передаете её как пропс компоненту, обёрнутому в [`memo`.](/reference/react/memo). Вы хотите пропустить повторный рендер, если значение не изменилось. Меморизация позволяет вашему компоненту повторно рендериться только если зависимости изменились.
+- Вы передаете её как пропс компоненту, обёрнутому в [`memo`.](/reference/react/memo) Вы хотите пропустить повторный рендер, если значение не изменилось. Меморизация позволяет вашему компоненту повторно рендериться только если зависимости изменились.
 - Функция, которую вы передаёте, позже используется как зависимость в каком-то хуке. Например, другая функция, обёрнутая в `useCallback`, зависит от неё, или вы зависите от этой функции в [`useEffect.`](/reference/react/useEffect)
 
 Нет смысла оборачивать функцию в `useCallback` в других случаях. Это не принесёт значительного вреда, поэтому некоторые команды решают не думать о конкретных случаях и мемоизируют как можно больше. Недостатком является то, что код становится менее читаемым. Кроме того, не всякая мемоизация эффективна: одно значение, которое «всегда новое», достаточно, чтобы сломать мемоизацию для всего компонента.
@@ -265,7 +265,7 @@ export default function App() {
           checked={isDark}
           onChange={e => setIsDark(e.target.checked)}
         />
-        Dark mode
+        Тёмный режим
       </label>
       <hr />
       <ProductPage
@@ -405,7 +405,7 @@ export default function App() {
           checked={isDark}
           onChange={e => setIsDark(e.target.checked)}
         />
-        Dark mode
+        Тёмный режим
       </label>
       <hr />
       <ProductPage
@@ -539,7 +539,7 @@ export default function App() {
           checked={isDark}
           onChange={e => setIsDark(e.target.checked)}
         />
-        Dark mode
+        Тёмный режим
       </label>
       <hr />
       <ProductPage