diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index bb175403e..ec7302121 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -18,7 +18,6 @@ prev: hooks-reference.html
).join('\n')
-->
-<<<<<<< HEAD
* [Внедрение хуков](#adoption-strategy)
* [В какой версии React появились хуки?](#which-versions-of-react-include-hooks)
* [Нужно ли переписать все мои классовые компоненты?](#do-i-need-to-rewrite-all-my-class-components)
@@ -42,6 +41,7 @@ prev: hooks-reference.html
* [Как я могу реализовать `getDerivedStateFromProps`?](#how-do-i-implement-getderivedstatefromprops)
* [Существует что-нибудь наподобие forceUpdate?](#is-there-something-like-forceupdate)
* [Могу ли я изменить реф, переданный в функциональный компонент?](#can-i-make-a-ref-to-a-function-component)
+ * [Как я могу измерить узел DOM?](#how-can-i-measure-a-dom-node)
* [Что значит `const [thing, setThing] = useState()`?](#what-does-const-thing-setthing--usestate-mean)
* [Оптимизации производительности](#performance-optimizations)
* [Могу ли я пропустить эффект при обновлениях?](#can-i-skip-an-effect-on-updates)
@@ -62,52 +62,6 @@ prev: hooks-reference.html
### В какой версии React появились хуки? {#which-versions-of-react-include-hooks}
Начиная с релиза 16.8.0, React включает в себя стабильную реализацию хуков для:
-=======
-* **[Adoption Strategy](#adoption-strategy)**
- * [Which versions of React include Hooks?](#which-versions-of-react-include-hooks)
- * [Do I need to rewrite all my class components?](#do-i-need-to-rewrite-all-my-class-components)
- * [What can I do with Hooks that I couldn't with classes?](#what-can-i-do-with-hooks-that-i-couldnt-with-classes)
- * [How much of my React knowledge stays relevant?](#how-much-of-my-react-knowledge-stays-relevant)
- * [Should I use Hooks, classes, or a mix of both?](#should-i-use-hooks-classes-or-a-mix-of-both)
- * [Do Hooks cover all use cases for classes?](#do-hooks-cover-all-use-cases-for-classes)
- * [Do Hooks replace render props and higher-order components?](#do-hooks-replace-render-props-and-higher-order-components)
- * [What do Hooks mean for popular APIs like Redux connect() and React Router?](#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router)
- * [Do Hooks work with static typing?](#do-hooks-work-with-static-typing)
- * [How to test components that use Hooks?](#how-to-test-components-that-use-hooks)
- * [What exactly do the lint rules enforce?](#what-exactly-do-the-lint-rules-enforce)
-* **[From Classes to Hooks](#from-classes-to-hooks)**
- * [How do lifecycle methods correspond to Hooks?](#how-do-lifecycle-methods-correspond-to-hooks)
- * [How can I do data fetching with Hooks?](#how-can-i-do-data-fetching-with-hooks)
- * [Is there something like instance variables?](#is-there-something-like-instance-variables)
- * [Should I use one or many state variables?](#should-i-use-one-or-many-state-variables)
- * [Can I run an effect only on updates?](#can-i-run-an-effect-only-on-updates)
- * [How to get the previous props or state?](#how-to-get-the-previous-props-or-state)
- * [Why am I seeing stale props or state inside my function?](#why-am-i-seeing-stale-props-or-state-inside-my-function)
- * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops)
- * [Is there something like forceUpdate?](#is-there-something-like-forceupdate)
- * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component)
- * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node)
- * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean)
-* **[Performance Optimizations](#performance-optimizations)**
- * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates)
- * [Is it safe to omit functions from the list of dependencies?](#is-it-safe-to-omit-functions-from-the-list-of-dependencies)
- * [What can I do if my effect dependencies change too often?](#what-can-i-do-if-my-effect-dependencies-change-too-often)
- * [How do I implement shouldComponentUpdate?](#how-do-i-implement-shouldcomponentupdate)
- * [How to memoize calculations?](#how-to-memoize-calculations)
- * [How to create expensive objects lazily?](#how-to-create-expensive-objects-lazily)
- * [Are Hooks slow because of creating functions in render?](#are-hooks-slow-because-of-creating-functions-in-render)
- * [How to avoid passing callbacks down?](#how-to-avoid-passing-callbacks-down)
- * [How to read an often-changing value from useCallback?](#how-to-read-an-often-changing-value-from-usecallback)
-* **[Under the Hood](#under-the-hood)**
- * [How does React associate Hook calls with components?](#how-does-react-associate-hook-calls-with-components)
- * [What is the prior art for Hooks?](#what-is-the-prior-art-for-hooks)
-
-## Adoption Strategy {#adoption-strategy}
-
-### Which versions of React include Hooks? {#which-versions-of-react-include-hooks}
-
-Starting with 16.8.0, React includes a stable implementation of React Hooks for:
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
* React DOM
* React DOM Server
@@ -450,7 +404,7 @@ function Example() {
Если вы намеренно хотите считать из асинхронного колбэка *свежайшее* состояние, вы можете сперва сохранить его [в реф](/docs/hooks-faq.html#is-there-something-like-instance-variables), потом изменить его и затем считать его из рефа.
-Наконец, возможна другая ситуация, почему вы видите устаревшие пропсы или состояние: когда вы используете оптимизацию с помощью «массива зависимостей», но неправильно указали какие-то зависимости. Например, если эффект передаёт вторым параметром `[]`, но при этом использует `someProp`, то он продолжит «видеть» исходное значение `someProp`. Правильным решением является либо исправление массива, либо отказ от его использования.
+Наконец, возможна другая ситуация, почему вы видите устаревшие пропсы или состояние: когда вы используете оптимизацию с помощью «массива зависимостей», но неправильно указали какие-то зависимости. Например, если эффект передаёт вторым параметром `[]`, но при этом использует `someProp`, то он продолжит «видеть» исходное значение `someProp`. Правильным решением является либо исправление массива, либо отказ от его использования.
По этим ссылкам описаны [подходы к функциям](#is-it-safe-to-omit-functions-from-the-list-of-dependencies) в аналогичных ситуациях и [другие известные способы](#what-can-i-do-if-my-effect-dependencies-change-too-often) снижения частоты вызова эффектов, исключающие передачу неправильных зависимостей.
>Примечание
@@ -498,15 +452,11 @@ function ScrollView({row}) {
### Могу ли я изменить реф, переданный в функциональный компонент? {#can-i-make-a-ref-to-a-function-component}
-
Несмотря на то, что вам не понадобится это часто, вы можете предоставить некоторые императивные методы родительскому компоненту, используя хук [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle).
-<<<<<<< HEAD
-### Что значит `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
-=======
-### How can I measure a DOM node? {#how-can-i-measure-a-dom-node}
+### Как я могу измерить узел DOM? {#how-can-i-measure-a-dom-node}
-In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9):
+Для измерения положения или размера узла DOM можно использовать [колбэк-реф](/docs/refs-and-the-dom.html#callback-refs). React будет вызывать этот колбэк всякий раз, когда ref подключается к другому узлу. Вот [небольшая демонстрация](https://codesandbox.io/s/l7m0v5x4v9):
```js{4-8,12}
function MeasureExample() {
@@ -520,18 +470,18 @@ function MeasureExample() {
return (
<>
-
Hello, world
- The above header is {Math.round(height)}px tall
+ Привет, мир
+ Заголовок выше {Math.round(height)} пикселей в высоту
>
);
}
```
-We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements.
+Мы не выбрали `useRef` в этом примере, потому что объект рефа не уведомляет нас об *изменениях* текущего значения рефа. Использование колбэк-рефа гарантирует, что [даже если дочерний компонент отображает измеренный узел позже](https://codesandbox.io/s/818zzk8m78) (например, в ответ на клик), мы по-прежнему получаем уведомление об этом в родительском компоненте и можем обновлять измерения.
-Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily.
+Обратите внимание, что мы передаем `[]` как массив зависимостей в `useCallback`. Это гарантирует, что наш обратный вызов рефа не изменится между повторными рендерами, и поэтому React не вызовет его без необходимости.
-If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook:
+При желании вы можете [извлечь эту логику](https://codesandbox.io/s/m5o42082xy) в многоразовый хук:
```js{2}
function MeasureExample() {
@@ -558,8 +508,7 @@ function useClientRect() {
```
-### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
+### Что значит `const [thing, setThing] = useState()`? {#what-does-const-thing-setthing--usestate-mean}
Если вы не знакомы с этим синтаксисом, ознакомьтесь с [объяснением](/docs/hooks-state.html#tip-what-do-square-brackets-mean) в документации хука состояния.
@@ -962,13 +911,8 @@ function Form() {
const [text, updateText] = useState('');
const textRef = useRef();
-<<<<<<< HEAD
- useLayoutEffect(() => {
- textRef.current = text; // Записать в реф
-=======
useEffect(() => {
- textRef.current = text; // Write it to the ref
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
+ textRef.current = text; // Записать это в реф
});
const handleSubmit = useCallback(() => {
diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index 853961b26..20395fc35 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -176,29 +176,25 @@ useEffect(
const value = useContext(MyContext);
```
-<<<<<<< HEAD
-Принимает объект контекста (значение, возвращённое из `React.createContext`) и возвращает текущее значение контекста, как указано ближайшим поставщиком контекста для данного контекста.
+Принимает объект контекста (значение, возвращаемое из `React.createContext`) и возвращает текущее значение контекста для этого контекста. Текущее значение контекста определяется пропом `value` ближайшего `` над вызывающим компонентом в дереве.
-Когда провайдер обновляется, этот хук инициирует повторный рендер с последним значением контекста.
-=======
-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 `` above the calling component in the tree.
+Когда ближайший `` находится над обновлениями компонентов этот хук вызовет повторный рендер с последним значением контекста, переданным этому провайдеру `MyContext`.
-When the nearest `` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider.
+Не забывайте, что аргумент `useContext` должен быть самим объектом *context*:
-Don't forget that the argument to `useContext` must be the *context object itself*:
+ * **Правильно:** `useContext(MyContext)`
+ * **Неправильно:** `useContext(MyContext.Consumer)`
+ * **Неправильно:** `useContext(MyContext.Provider)`
- * **Correct:** `useContext(MyContext)`
- * **Incorrect:** `useContext(MyContext.Consumer)`
- * **Incorrect:** `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).
+Компонент вызывающий `useContext` всегда будет перерендериваться при изменении значения контекста. Если повторный рендер компонента затратен, вы можете [оптимизировать его с помощью мемоизации](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 ``.
+
+>Если вы знакомы с контекстным API до хуков, `useContext(MyContext)` эквивалентно `static contextType = MyContext` в классе или `
->`useContext(MyContext)` only lets you *read* the context and subscribe to its changes. You still need a `` above in the tree to *provide* the value for this context.
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
+>`useContext (MyContext)` позволяет только *читать* контекст и подписываться на его изменения. Вам все еще нужен `` выше в дереве ,чтобы *предоставить* значение для этого контекста.
## Дополнительные хуки {#additional-hooks}
@@ -378,20 +374,16 @@ function TextInputWithFocusButton() {
}
```
-<<<<<<< HEAD
-Обратите внимание, что `useRef()` полезен не только для атрибута `ref`. Он также [удобен для хранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) примерно так же, как вы используете поля экземпляров в классах.
-=======
-Essentially, `useRef` is like a "box" that can hold a mutable value in its `.current` property.
+По сути, `useRef` - это как «коробка», которая может содержать изменяемое значение в своем `.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 ``, React will set its `.current` property to the corresponding DOM node whenever that node changes.
+Возможно вы знакомы с рефами в первую очередь как со способом [получить доступ к DOM](/docs/refs-and-the-dom.html). Если вы передадите объект рефа для реакции с ``, React установит его `.current` текущим для соответствующего узла DOM при каждом изменении этого узла.
-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.
+Однако `useRef()` полезен не только для атрибута реф. Это [удобно для сохранения любого изменяемого значения](/docs/hooks-faq.html#is-there-something-like-instance-variables) аналогично тому, как вы бы использовали поля экземпляра в классах.
-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()` создает простой объект JavaScript. Единственное различие между `useRef()` и созданием` {current:...} `сам объект заключается в том, что `useRef` даст вам один и тот же объект реф для каждого рендеринга.
-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` не вызывает повторный рендер. Если вы хотите запустить некоторый код, когда React присоединяет или отсоединяет реф к узлу DOM, вы можете использовать [колбэк-реф](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) вместо этого.
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
### `useImperativeHandle` {#useimperativehandle}
@@ -424,15 +416,11 @@ FancyInput = forwardRef(FancyInput);
> Совет
>
-<<<<<<< HEAD
-> Если вы переносите код из классового компонента, `useLayoutEffect` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`, поэтому, если вы не уверены, какой хук эффект использовать, это, вероятно, наименее рискованно.
-=======
-> 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` запускается в той же фазе, что и `componentDidMount` и `componentDidUpdate`. Однако, *мы рекомендуем начать вначале с `useEffect`** и только попробовать `useLayoutEffect`, если это вызывает проблему.
>
->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).
+>Если вы используете серверный рендер, имейте в виду, что *ни* `useLayoutEffect`, ни `useEffect` не могут работать до загрузки JavaScript. Вот почему React предупреждает, когда серверный компонент содержит `useLayoutEffect`. Чтобы исправить это, либо переместите эту логику в `useEffect` (если это не нужно для первого рендера), либо задержите показ этого компонента до тех пор, пока клиент не отрисовает (если HTML выглядит сломанным до запуска `useLayoutEffect`).
>
->To exclude a component that needs layout effects from the server-rendered HTML, render it conditionally with `showChild && ` and defer showing it with `useEffect(() => { setShowChild(true); }, [])`. This way, the UI doesn't appear broken before hydration.
->>>>>>> 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a
+>Чтобы исключить компонент, который нуждается в эффектах макета из HTML-кода, отображаемого сервером, сделайте его условно с помощью `showChild & & ` и отложите показ с помощью ` useEffect(() => { setShowChild(true);}, [])`. Таким образом, пользовательский интерфейс не отображается сломанным перед гидратацией.
### `useDebugValue` {#usedebugvalue}