Skip to content

Commit 9e8e2d0

Browse files
merging all conflicts
2 parents a1f0f1f + 265fa26 commit 9e8e2d0

File tree

7 files changed

+167
-11
lines changed

7 files changed

+167
-11
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.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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,13 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
2222
Andrey a commencé sa carrière comme designer pour progressivement passer au développement web. Après avoir rejoint l'équipe React Data chez Meta, il a travaillé à ajouter un compilateur incrémental JavaScript dans Relay… pour finir par le retirer plus tard. Hors du boulot, Andrey aime jouer de la musique et faire divers types de sports.
2323
</TeamMember>
2424

25+
<<<<<<< HEAD
2526
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Ingénieur indépendant">
2627
Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint. Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
28+
=======
29+
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
30+
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.
31+
>>>>>>> 265fa26e3b39739f06c956140d9acf618c6b4e6b
2732
</TeamMember>
2833
2934
<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Manager d’ingénieurs chez Meta">

src/content/learn/typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ TypeScript est une solution populaire d'ajout de définitions de types à des ba
2222

2323
Tous les [frameworks React de qualité reconnue](/learn/start-a-new-react-project#production-grade-react-frameworks) prennent en charge TypeScript. Suivez le guide spécifique à votre framework pour l'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
#### Valeur renvoyée {/*returns*/}
4242

43+
<<<<<<< HEAD
4344
Durant le rendu initial, la valeur différée renvoyée sera celle que vous avez fournie. Lors des mises à jour, React tentera d'abord un rendu avec l'ancienne valeur (il va donc renvoyer l'ancienne valeur), et ensuite essayer en arrière-plan un rendu avec la nouvelle valeur (il va donc renvoyer la valeur à jour).
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+
>>>>>>> 265fa26e3b39739f06c956140d9acf618c6b4e6b
4448
4549
#### Limitations {/*caveats*/}
4650

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

7781
Lors du rendu initial, la <CodeStep step={2}>valeur différée</CodeStep> sera la même que la <CodeStep step={1}>valeur</CodeStep> que vous avez fournie.
7882

83+
<<<<<<< HEAD
7984
Lors des mises à jour, la <CodeStep step={2}>valeur différée</CodeStep> sera « en retard » par rapport à la dernière <CodeStep step={1}>valeur</CodeStep>. Plus particulièrement, React fera d'abord un rendu *sans* mettre à jour la valeur différée, puis tentera un rendu supplémentaire en arrière-plan avec la nouvelle valeur reçue.
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+
>>>>>>> 265fa26e3b39739f06c956140d9acf618c6b4e6b
8088
8189
**Parcourons un exemple afin de comprendre l'utilité de ce Hook.**
8290

@@ -508,7 +516,11 @@ Imaginez un déroulement en deux étapes :
508516

509517
1. **Pour commencer, React refait un rendu avec la nouvelle `query` (`"ab"`) mais avec l'ancienne `deferredQuery` (toujours `"a")`.** La valeur `deferredQuery`, que vous passez à la liste de résultats, est *différée* : elle est « en retard » par rapport à la valeur `query`.
510518

519+
<<<<<<< HEAD
511520
2. **En arrière-plan, React tente alors un autre rendu avec `query` et `deferredQuery` valant *toutes les deux* `"ab"`.** Si ce rendu aboutit, React l'affichera à l'écran. Cependant, s'il suspend (les résultats pour `"ab"` ne sont pas encore chargés), React abandonnera cet essai de rendu, et essaiera à nouveau une fois les données chargées. L'utilisateur continuera à voir l'ancienne valeur différée jusqu'à ce que les données soient prêtes.
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+
>>>>>>> 265fa26e3b39739f06c956140d9acf618c6b4e6b
512524
513525
Le rendu différé « d'arrière-plan » est susceptible d'être interrompu. Par exemple, si vous tapez à nouveau dans le champ de saisie, React l'abandonnera et recommencera avec la nouvelle valeur. React utilisera toujours la dernière valeur fournie.
514526

@@ -951,7 +963,11 @@ Mêmes si ces techniques sont utiles dans certains cas, `useDeferredValue` est p
951963

952964
Contrairement au *debouncing* et au *throttling*, il ne nécessite pas de choisir un délai fixe. Si l'appareil de l'utilisateur est rapide (par exemple un ordinateur puissant), le rendu différé serait quasiment immédiat, le rendant imperceptible pour l'utilisateur. Si l'appareil est lent, la liste serait « en retard » par rapport au champ de saisie, proportionnellement à la lenteur de l'appareil.
953965

966+
<<<<<<< HEAD
954967
De plus, les rendus différés planifiés par `useDeferredValue` sont par défaut susceptibles d'être interrompus, ce qui n'est pas le cas du *debouncing* ou du *throttling*. Ça signifie que si React est en plein milieu du rendu d'une vaste liste, et que l'utilisateur ajuste sa saisie, React abandonnera ce rendu, traitera la frappe, et recommencera le rendu en arrière-plan. Par opposition, le *debouncing* et le *throttling* donneraient ici toujours une expérience saccadée car ils sont *bloquants* : ils diffèrent simplement le moment auquel le rendu bloque la frappe.
968+
=======
969+
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.
970+
>>>>>>> 265fa26e3b39739f06c956140d9acf618c6b4e6b
955971
956972
Si vous souhaitez optimiser des traitements hors du rendu, le *debouncing* et le *throttling* restent utiles. Par exemple, ils peuvent vous permettre de lancer moins de de requêtes réseau. Vous pouvez parfaitement combiner ces techniques.
957973

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: 131 additions & 0 deletions
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

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].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)