Skip to content

Commit e10a31c

Browse files
merging all conflicts
2 parents f61dd30 + 5de8519 commit e10a31c

File tree

7 files changed

+168
-12
lines changed

7 files changed

+168
-12
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"check-all": "npm-run-all prettier lint:fix tsc"
2323
},
2424
"dependencies": {
25-
"@codesandbox/sandpack-react": "2.13.1",
25+
"@codesandbox/sandpack-react": "2.13.5",
2626
"@docsearch/css": "3.0.0-alpha.41",
2727
"@docsearch/react": "3.0.0-alpha.41",
2828
"@headlessui/react": "^1.7.0",

src/content/community/team.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Current members of the React team are listed in alphabetical order below.
2222
Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports.
2323
</TeamMember>
2424

25-
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Independent Engineer">
25+
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
2626
Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
2727
</TeamMember>
2828

src/content/learn/typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
2222

2323
All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
2424

25-
- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
25+
- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
2626
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
2727
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
2828
- [Expo](https://docs.expo.dev/guides/typescript/)

src/content/reference/react/useDeferredValue.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,11 @@ function SearchPage() {
4040

4141
#### Возвращаемое значение {/*returns*/}
4242

43+
<<<<<<< HEAD
4344
При первом рендеринге вызов вернёт то же значение, которое вы указали. Когда в следующих обновлениях значение изменится, вызов вернёт прошлое значение, но при этом React запустит дополнительный фоновый рендеринг, в котором вызов вернёт обновлённое значение.
45+
=======
46+
During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value).
47+
>>>>>>> 5de85198a3c575d94a395138e3f471cc7172a51c
4448
4549
#### Замечания {/*caveats*/}
4650

@@ -76,7 +80,11 @@ function SearchPage() {
7680

7781
При первом рендеринге <CodeStep step={2}>отложенное значение</CodeStep> будет равно <CodeStep step={1}>значению</CodeStep>, которое вы передадите.
7882

83+
<<<<<<< HEAD
7984
В следующих обновлениях <CodeStep step={2}>отложенное значение</CodeStep> будет как бы "отставать" от актуального <CodeStep step={1}>значения</CodeStep>. А именно: сначала React отрендерит компонент, *не обновляя* отложенное значение, а затем в фоне попытается отрендерить компонент с новым значением.
85+
=======
86+
During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in the background.
87+
>>>>>>> 5de85198a3c575d94a395138e3f471cc7172a51c
8088
8189
**Разберём на примере, когда это может быть полезно.**
8290

@@ -508,7 +516,11 @@ input { margin: 10px; }
508516

509517
1. **Сначала React отрендерит компонент с новым запросом `"ab"` в `query`, но пока что с отложенным `"a"` в `deferredQuery`.** Значение в `deferredQuery`, которое вы передаёте в список результатов, является *отложенным:* оно "отстаёт" от значения `query`.
510518

519+
<<<<<<< HEAD
511520
2. **Затем в фоне React попытается ещё раз отрендерить компонент, но уже с новым запросом `"ab"` и в `query`, и в `deferredQuery`.** Если этот рендеринг выполнится до конца, то React отобразит его результаты на экране. Но если рендеринг задержится (встанет в ожидании результатов для `"ab"`), то React эту конкретную попытку прервёт, а когда результаты загрузятся, попробует снова. Пока данные не загрузились, пользователю будет показываться старое отложенное значение.
521+
=======
522+
2. **In the background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
523+
>>>>>>> 5de85198a3c575d94a395138e3f471cc7172a51c
512524
513525
Отложенный фоновый рендеринг можно прервать. Если, например, продолжить печатать запрос, React прервёт фоновый рендеринг и перезапустит его уже с новым вводом. React всегда будет ориентироваться только на самое последнее переданное ему значение.
514526

@@ -952,7 +964,11 @@ export default SlowList;
952964

953965
Можно не привязываться к какой-то фиксированной задержке. У пользователей с быстрым, мощным устройством фоновый рендеринг будет выполняться быстро и без заметной задержки. А у пользователей со слабым устройством список будет "отставать" ровно на столько, на сколько позволяет устройство.
954966

967+
<<<<<<< HEAD
955968
Кроме того, в отличие от дебаунсинга и тротлинга, отложенный с помощью `useDeferredValue` рендеринг можно прервать. Это значит, что если, например, пользователь введёт очередной символ, пока в фоне рендерится большой сложный список, React прервёт этот рендеринг, обработает ввод, и затем снова запустит рендеринг в фоне. При этом с дебаунсингом или тротлингом в такой же ситуации интерфейс всё ещё будет тормозить и заедать -- ведь эти приёмы не устраняют собственно *блокировку* ввода: с ними она случается просто либо позже, либо реже.
969+
=======
970+
Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
971+
>>>>>>> 5de85198a3c575d94a395138e3f471cc7172a51c
956972
957973
Когда нужно оптимизировать что-то помимо рендеринга, дебаунсинг и тротлинг могут наоборот быть очень полезны. Например, они помогут уменьшить количество запросов в сеть. А ещё их можно совмещать с описанными здесь техниками.
958974

src/styles/sandpack.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -608,3 +608,7 @@ html.dark .sp-devtools > div {
608608
}
609609
}
610610
}
611+
612+
.sp-loading .sp-icon-standalone span {
613+
display: none;
614+
}

vercel.json

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,142 @@
1313
"source": "/learn/meet-the-team",
1414
"destination": "/community/team",
1515
"permanent": true
16+
},
17+
{
18+
"source": "/link/warning-keys",
19+
"destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
20+
"permanent": false
21+
},
22+
23+
{
24+
"source": "/link/invalid-hook-call",
25+
"destination": "/warnings/invalid-hook-call-warning",
26+
"permanent": false
27+
},
28+
{
29+
"source": "/link/hooks-data-fetching",
30+
"destination": "/reference/react/useEffect#fetching-data-with-effects",
31+
"permanent": false
32+
},
33+
{
34+
"source": "/link/special-props",
35+
"destination": "/warnings/special-props",
36+
"permanent": false
37+
},
38+
{
39+
"source": "/link/dangerously-set-inner-html",
40+
"destination": "/reference/react-dom/components/common#dangerously-setting-the-inner-html",
41+
"permanent": false
42+
},
43+
{
44+
"source": "/link/controlled-components",
45+
"destination": "/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
46+
"permanent": false
47+
},
48+
{
49+
"source": "/link/react-devtools",
50+
"destination": "/learn/react-developer-tools",
51+
"permanent": false
52+
},
53+
{
54+
"source": "/link/invalid-aria-props",
55+
"destination": "/warnings/invalid-aria-prop",
56+
"permanent": false
57+
},
58+
{
59+
"source": "/link/hydration-mismatch",
60+
"destination": "/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html",
61+
"permanent": false
62+
},
63+
{
64+
"source": "/link/switch-to-createroot",
65+
"destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",
66+
"permanent": false
67+
},
68+
{
69+
"source": "/link/error-boundaries",
70+
"destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary",
71+
"permanent": false
72+
},
73+
{
74+
"source": "/link/strict-mode-find-node",
75+
"destination": "/reference/react-dom/findDOMNode#alternatives",
76+
"permanent": false
77+
},
78+
{
79+
"source": "/link/rules-of-hooks",
80+
"destination": "/warnings/invalid-hook-call-warning",
81+
"permanent": false
82+
},
83+
{
84+
"source": "/link/event-pooling",
85+
"destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html",
86+
"permanent": false
87+
},
88+
{
89+
"source": "/link/legacy-context",
90+
"destination": "https://legacy.reactjs.org/docs/legacy-context.html",
91+
"permanent": false
92+
},
93+
{
94+
"source": "/link/crossorigin-error",
95+
"destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html",
96+
"permanent": false
97+
},
98+
{
99+
"source": "/link/react-polyfills",
100+
"destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html",
101+
"permanent": false
102+
},
103+
{
104+
"source": "/link/wrap-tests-with-act",
105+
"destination": "https://legacy.reactjs.org/docs/test-utils.html#act",
106+
"permanent": false
107+
},
108+
{
109+
"source": "/link/refs-must-have-owner",
110+
"destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html",
111+
"permanent": false
112+
},
113+
{
114+
"source": "/link/derived-state",
115+
"destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html",
116+
"permanent": false
117+
},
118+
{
119+
"source": "/link/strict-mode-string-ref",
120+
"destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs",
121+
"permanent": false
122+
},
123+
{
124+
"source": "/link/perf-use-production-build",
125+
"destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build",
126+
"permanent": false
127+
},
128+
{
129+
"source": "/link/unsafe-component-lifecycles",
130+
"destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html",
131+
"permanent": false
132+
},
133+
{
134+
"source": "/link/test-utils-mock-component",
135+
"destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
136+
"permanent": false
137+
},
138+
{
139+
"source": "/link/attribute-behavior",
140+
"destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
141+
"permanent": false
142+
},
143+
{
144+
"source": "/link/react-devtools-faq",
145+
"destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
146+
"permanent": false
147+
},
148+
{
149+
"source": "/link/setstate-in-render",
150+
"destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
151+
"permanent": false
16152
}
17153
],
18154
"headers": [

yarn.lock

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -619,21 +619,21 @@
619619
outvariant "^1.4.0"
620620
strict-event-emitter "^0.4.3"
621621

622-
"@codesandbox/sandpack-client@^2.13.0":
623-
version "2.13.0"
624-
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27"
625-
integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g==
622+
"@codesandbox/sandpack-client@^2.13.2":
623+
version "2.13.2"
624+
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.2.tgz#8e573e96d341d3284ce579a71c6c57f16aefc80e"
625+
integrity sha512-uAuxQOF7p8y4m7H0ojedDcWRf62xVK7UIYIJoX5LkhcV0SW1BTXcRkVNuR0/MSCSv+Og1dBeV8+Xpye9PX0quA==
626626
dependencies:
627627
"@codesandbox/nodebox" "0.1.8"
628628
buffer "^6.0.3"
629629
dequal "^2.0.2"
630630
outvariant "1.4.0"
631631
static-browser-server "1.0.3"
632632

633-
"@codesandbox/[email protected].1":
634-
version "2.13.1"
635-
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09"
636-
integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw==
633+
"@codesandbox/[email protected].5":
634+
version "2.13.5"
635+
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz#bc4b3fe43b74fdb011f69d3d9a117415110c709e"
636+
integrity sha512-MWzh2P/Asck0JSCKY3y7WecdUBBEqB0NFi4p+ohoZMTYqHWTaYfd7nbPlNmGIE1xcGppSZEqPVDjOpAfeQ0zFw==
637637
dependencies:
638638
"@codemirror/autocomplete" "^6.4.0"
639639
"@codemirror/commands" "^6.1.3"
@@ -643,7 +643,7 @@
643643
"@codemirror/language" "^6.3.2"
644644
"@codemirror/state" "^6.2.0"
645645
"@codemirror/view" "^6.7.1"
646-
"@codesandbox/sandpack-client" "^2.13.0"
646+
"@codesandbox/sandpack-client" "^2.13.2"
647647
"@lezer/highlight" "^1.1.3"
648648
"@react-hook/intersection-observer" "^3.1.1"
649649
"@stitches/core" "^1.2.6"

0 commit comments

Comments
 (0)