Skip to content

Commit 979c498

Browse files
committed
Apply suggestions from code review
1 parent 19e0ac1 commit 979c498

File tree

1 file changed

+2
-3
lines changed

1 file changed

+2
-3
lines changed

src/content/reference/react/useMemo.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -552,7 +552,6 @@ label {
552552

553553
В некоторых случаях `useMemo` можно использовать для оптимизации ререндеров дочерних компонентов. Допустим, что `TodoList` передаёт как проп `visibleTodos` дочернему компоненту `List`:
554554

555-
556555
```js {5}
557556
export default function TodoList({ todos, tab, theme }) {
558557
// ...
@@ -609,7 +608,7 @@ export default function TodoList({ todos, tab, theme }) {
609608
}
610609
```
611610

612-
В примере выше `visibleTodos` всегда будет иметь *одно и то же* значение, пока массив зависимостей остаётся неизменным. Следует помнить, что нет необходимости использовать `useMemo` без веской на то причины. Однако в этом примере `visibleTodos` передаётся как пропс в компонент, обёрнутый в [`memo`](/reference/react/memo), что позволяет пропускать лишние ререндеры.
611+
В примере выше `visibleTodos` всегда будет иметь *одно и то же* значение, пока массив зависимостей остаётся неизменным. Следует помнить, что нет необходимости использовать `useMemo` без веской на то причины. Однако здесь это оправданно, поскольку `visibleTodos` передаётся как пропс в компонент, обёрнутый в [`memo`](/reference/react/memo), что позволяет пропускать лишние ререндеры. Существует ещё несколько причин, когда использование `useMemo` оправданно, – о них речь пойдёт ниже.
613612

614613
<DeepDive>
615614

@@ -631,7 +630,7 @@ export default function TodoList({ todos, tab, theme }) {
631630

632631
Поведение будет таким же. Компонент `List` не будет ререндериться, пока значение `visibleTodos` остаётся неизменным.
633632

634-
JSX-узел `<List items={visibleTodos} />` является простым объектом типа `{ type: List, props: { items: visibleTodos } }`. Создание такого объекта – довольно дешёвая операция, однако React не знает, осталось ли его содержимое прежним или нет. Поэтому по умолчанию React всегда будет ререндерить компонент `List`.
633+
JSX-узел `<List items={visibleTodos} />` является простым объектом типа `{ type: List, props: { items: visibleTodos } }`. Создать такой объект очень дёшево, однако React не знает, осталось ли его содержимое прежним или нет. Поэтому по умолчанию React всегда будет ререндерить компонент `List`.
635634

636635
При этом, если React видит тот же JSX, который был при предыдущем рендере, он не будет ререндерить компонент. Это происходит потому что JSX-узлы [иммутабельны](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82). Такие объекты узлов не могут быть изменены с течением времени, поэтому React знает, что пропустить ререндер безопасно. Однако чтобы это работало, узел должен быть *буквально тем же объектом*, а не только *выглядеть* таким же в коде. Это именно то, что делает `useMemo` в данном примере.
637636

0 commit comments

Comments
 (0)