Skip to content

Commit bcf223d

Browse files
lxmarinkoviclxmarinkovic
authored
Merge pull request #46 from reactjs/sync-265fa26e
2 parents dbef869 + 42ab491 commit bcf223d

File tree

7 files changed

+151
-16
lines changed

7 files changed

+151
-16
lines changed

‎package.json

+1-1
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.4",
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

+1-1
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

+1-1
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

+4-4
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function SearchPage() {
4040

4141
#### Returns {/*returns*/}
4242

43-
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 background with the new value (so it will return the updated value).
43+
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).
4444

4545
#### Caveats {/*caveats*/}
4646

@@ -76,7 +76,7 @@ function SearchPage() {
7676

7777
During the initial render, the <CodeStep step={2}>deferred value</CodeStep> will be the same as the <CodeStep step={1}>value</CodeStep> you provided.
7878

79-
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 background.
79+
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.
8080

8181
**Let's walk through an example to see when this is useful.**
8282

@@ -508,7 +508,7 @@ You can think of it as happening in two steps:
508508

509509
1. **First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value.
510510

511-
2. **In 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.
511+
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.
512512

513513
The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value.
514514

@@ -952,7 +952,7 @@ While these techniques are helpful in some cases, `useDeferredValue` is better s
952952

953953
Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
954954

955-
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 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.
955+
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.
956956

957957
If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
958958

‎src/styles/sandpack.css

+4
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

+131
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,137 @@
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/switch-to-createroot",
60+
"destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",
61+
"permanent": false
62+
},
63+
{
64+
"source": "/link/error-boundaries",
65+
"destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary",
66+
"permanent": false
67+
},
68+
{
69+
"source": "/link/strict-mode-find-node",
70+
"destination": "/reference/react-dom/findDOMNode#alternatives",
71+
"permanent": false
72+
},
73+
{
74+
"source": "/link/rules-of-hooks",
75+
"destination": "/warnings/invalid-hook-call-warning",
76+
"permanent": false
77+
},
78+
{
79+
"source": "/link/event-pooling",
80+
"destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html",
81+
"permanent": false
82+
},
83+
{
84+
"source": "/link/legacy-context",
85+
"destination": "https://legacy.reactjs.org/docs/legacy-context.html",
86+
"permanent": false
87+
},
88+
{
89+
"source": "/link/crossorigin-error",
90+
"destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html",
91+
"permanent": false
92+
},
93+
{
94+
"source": "/link/react-polyfills",
95+
"destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html",
96+
"permanent": false
97+
},
98+
{
99+
"source": "/link/wrap-tests-with-act",
100+
"destination": "https://legacy.reactjs.org/docs/test-utils.html#act",
101+
"permanent": false
102+
},
103+
{
104+
"source": "/link/refs-must-have-owner",
105+
"destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html",
106+
"permanent": false
107+
},
108+
{
109+
"source": "/link/derived-state",
110+
"destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html",
111+
"permanent": false
112+
},
113+
{
114+
"source": "/link/strict-mode-string-ref",
115+
"destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs",
116+
"permanent": false
117+
},
118+
{
119+
"source": "/link/perf-use-production-build",
120+
"destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build",
121+
"permanent": false
122+
},
123+
{
124+
"source": "/link/unsafe-component-lifecycles",
125+
"destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html",
126+
"permanent": false
127+
},
128+
{
129+
"source": "/link/test-utils-mock-component",
130+
"destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
131+
"permanent": false
132+
},
133+
{
134+
"source": "/link/attribute-behavior",
135+
"destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
136+
"permanent": false
137+
},
138+
{
139+
"source": "/link/react-devtools-faq",
140+
"destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
141+
"permanent": false
142+
},
143+
{
144+
"source": "/link/setstate-in-render",
145+
"destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
146+
"permanent": false
16147
}
17148
],
18149
"headers": [

‎yarn.lock

+9-9
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].4":
634+
version "2.13.4"
635+
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.4.tgz#d079da898e54a5546cfbeea13e4c3549b20f58a6"
636+
integrity sha512-lgfcOwWAA+JKztLL5fwZ89389WvBMBl2R2BwE+RfnYKLIfgZ2UGH2Kifly4pam2iFqIzxPER7rYZJh/keSJQbg==
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)