Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 97489434 #353

Open
wants to merge 24 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9ceb057
Revert "fix(sandpack): clear up bundler timeout when there's a syntax…
harish-sethuraman Feb 26, 2024
41b1bb3
Update Dan's twitter link
gaearon Feb 26, 2024
6d8e094
fix: Update @codesandbox/sandpack-react version to 2.13.4 (#6664)
danilowoz Feb 27, 2024
6e650f9
update: "Configuring TypeScript" link for Next.js App Directory - to …
tomihq Feb 29, 2024
6310c8a
Add /link redirects (#6670)
rickhanlonii Mar 1, 2024
265fa26
Update small typo in useDeferredValue.md (#6673)
ninjaPixel Mar 3, 2024
716e889
Add hydration-mismatch link (#6678)
rickhanlonii Mar 4, 2024
5de8519
fix: Update sandpack-react version to 2.13.5 (#6668)
danilowoz Mar 8, 2024
aa31fe5
Add details about shallow renderer warning (#6689)
jackpope Mar 11, 2024
1a839ff
Remove links to localhost (#6696)
poteto Mar 14, 2024
0dc1b31
Add initial Rules of React docs (#6680)
poteto Mar 15, 2024
f55d948
Reorder rules of react summary in reference index (#6698)
poteto Mar 15, 2024
ef3a7ea
Fix typos in typescript.md (#6439)
pavelsavva Mar 19, 2024
5a45b53
Fix hover styles in strictmode docs (#6705)
rickhanlonii Mar 23, 2024
9c04f9b
Correct pluralization of 'covers' (#6702)
allison-strandberg Mar 23, 2024
7bdbab1
Fix missing id properties in docs example (#6395)
jpayoung Mar 24, 2024
d661678
Update @eps1lon's job title (#6710)
poteto Mar 25, 2024
4df3124
Fix caps for React concepts (#6712)
rickhanlonii Mar 27, 2024
2aa9594
Add warning page for ReactDOMTestUtils deprecation (#6716)
eps1lon Mar 27, 2024
9b4de7c
Add Jack to team page (#6721)
rickhanlonii Mar 28, 2024
6436bd9
Fix typo in components-and-hooks-must-be-pure.md (#6724)
rivea0 Mar 29, 2024
3076795
chore: fix typos (#6723)
ahmoin Mar 29, 2024
9748943
Update Node.js version in engines into package.json file (^21.0.0) (#…
foridpathan Mar 31, 2024
7ad7674
merging all conflicts
react-translations-bot Apr 1, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
- Always capitalize React concepts such as Hooks, Effects, and Transitions.

### Highlighting

Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"check-all": "npm-run-all prettier lint:fix tsc"
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.1",
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@headlessui/react": "^1.7.0",
Expand Down Expand Up @@ -97,7 +97,7 @@
"webpack-bundle-analyzer": "^4.5.0"
},
"engines": {
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
},
"nextBundleAnalysis": {
"budget": null,
Expand Down
Binary file added public/images/team/jack-pope.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/content/community/acknowledgements.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ We'd like to recognize a few people who have made significant contributions to R
* [Andreas Svensson](https://github.com/syranide)
* [Alex Krolick](https://github.com/alexkrolick)
* [Alexey Pyltsyn](https://github.com/lex111)
* [Andrey Lunyov](https://github.com/alunyov)
* [Brandon Dail](https://github.com/aweary)
* [Brian Vaughn](https://github.com/bvaughn)
* [Caleb Meredith](https://github.com/calebmer)
Expand Down
12 changes: 6 additions & 6 deletions src/content/community/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,18 @@ Current members of the React team are listed in alphabetical order below.
Andrew got started with web development by making sites with WordPress, and eventually tricked himself into doing JavaScript. His favorite pastime is karaoke. Andrew is either a Disney villain or a Disney princess, depending on the day.
</TeamMember>

<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" threads="alunyov" title="Engineer at Meta">
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.
</TeamMember>

<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Independent Engineer">
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
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.
</TeamMember>

<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
</TeamMember>

<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
</TeamMember>

<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta">
Jason likes having large volumes of Amazon packages delivered to the office so that he can build forts. Despite literally walling himself off from his team at times and not understanding how for-of loops work, we appreciate him for the unique qualities he brings to his work.
</TeamMember>
Expand Down Expand Up @@ -74,7 +74,7 @@ Current members of the React team are listed in alphabetical order below.
Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
</TeamMember>

<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Independent Engineer">
<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Engineer at Vercel">
Sebastian learned programming to make the browser games he played during class more enjoyable. Eventually this lead to contributing to as much open source code as possible. Outside of coding he's busy making sure people don't confuse him with the other Sebastians and Zilberman of the React community.
</TeamMember>

Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/editor-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@ title: התקנת עורך קוד

### Formatting {/*formatting*/}

<<<<<<< HEAD
הדרך האחרון שאתה רוצה כשאתה משתף קוד עם מפתח אחר הוא להיכנס לוויכוח [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces). למזלנו, [prettier](https://prettier.io/)) ינקה את הקוד שלך על ידי התאמתו לחוקים קיימים. בעת הרצת prettier, כל ה-tabs יהפכו ל-spaces, וגרשיים כפולים או יחידים ישונו בהתאם לקונפיגורציה. בסביבת פיתוח אידיאלית, Prettier ירוץ בעת שמירת קובץ, ויעשה את כל השינויים הללו אוטומטית.
=======
The last thing you want to do when sharing your code with another contributor is get into a discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
>>>>>>> 97489434323b0c4cce78588cd0f48e3808e0eba4

ניתן להתקין את Prettier ב[VS Code](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) בעזרת הצעדים הבאים:

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ In general, you [don't want](/learn/referencing-values-with-refs#best-practices-

React sets `ref.current` during the commit. Before updating the DOM, React sets the affected `ref.current` values to `null`. After updating the DOM, React immediately sets them to the corresponding DOM nodes.

**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.
**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.

<DeepDive>

Expand Down
2 changes: 2 additions & 0 deletions src/content/learn/rendering-lists.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,11 @@ const people = [{
name: 'Mohammad Abdus Salam',
profession: 'physicist',
}, {
id: 3,
name: 'Percy Lavon Julian',
profession: 'chemist',
}, {
id: 4,
name: 'Subrahmanyan Chandrasekhar',
profession: 'astrophysicist',
}];
Expand Down
6 changes: 3 additions & 3 deletions src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out

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:

- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
- [Expo](https://docs.expo.dev/guides/typescript/)
Expand Down Expand Up @@ -435,7 +435,7 @@ interface ModalRendererProps {

Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `<li>` children.

You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).

### Style Props {/*typing-style-props*/}

Expand All @@ -456,7 +456,7 @@ We recommend the following resources:

- [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features.

- [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth.
- [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth.

- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document.

Expand Down
8 changes: 4 additions & 4 deletions src/content/reference/react-dom/components/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ Props that are **not recommended** for use with React:

#### Special rendering behavior {/*special-rendering-behavior*/}

React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.
React will always place the DOM element corresponding to the `<link>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<link>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<link>` components itself.

There are a few exceptions to this:

Expand All @@ -91,7 +91,7 @@ There are a few exceptions to this:

In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet"` in its props), React treats it specially in the following ways:

* The component that renders `<link>` will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
* The component that renders `<link>` will [suspend](/reference/react/Suspense) while the stylesheet is loading.
* If multiple components render links to the same stylesheet, React will de-duplicate them and only put a single link into the DOM. Two links are considered the same if they have the same `href` prop.

There are two exception to this special behavior:
Expand Down Expand Up @@ -133,7 +133,7 @@ export default function BlogPage() {

### Linking to a stylesheet {/*linking-to-a-stylesheet*/}

If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.
If a component depends on a certain stylesheet in order to be displayed correctly, you can render a link to that stylesheet within the component. Your component will [suspend](/reference/react/Suspense) while the stylesheet is loading. You must supply the `precedence` prop, which tells React where to place this stylesheet relative to others — stylesheets with higher precedence can override those with lower precedence.

<Note>
When you want to use a stylesheet, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the stylesheet earlier than if you just render a `<link>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
Expand Down Expand Up @@ -217,7 +217,7 @@ function Component() {

### Annotating specific items within the document with links {/*annotating-specific-items-within-the-document-with-links*/}

You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.
You can use the `<link>` component with the `itemProp` prop to annotate specific items within the document with links to related resources. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.

```js
<section itemScope>
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/style.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ Props that are **not recommended** for use with React:

#### Special rendering behavior {/*special-rendering-behavior*/}

React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](http://localhost:3000/reference/react/Suspense) while the stylesheet is loading.
React can move `<style>` components to the document's `<head>`, de-duplicate identical stylesheets, and [suspend](/reference/react/Suspense) while the stylesheet is loading.

To opt into this behavior, provide the `href` and `precedence` props. React will de-duplicate styles if they have the same `href`. The precedence prop tells React where to rank the `<style>` DOM node relative to others in the document `<head>`, which determines which stylesheet can override the other.

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/textarea.md
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,7 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }

<Pitfall>

**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control an text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.
**If you pass `value` without `onChange`, it will be impossible to type into the text area.** When you control a text area by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the text area after every keystroke back to the `value` that you specified.

</Pitfall>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/flushSync.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.

* `flushSync` can significantly hurt performance. Use sparingly.
* `flushSync` may force pending Suspense boundaries to show their `fallback` state.
* `flushSync` may run pending effects and synchronously apply any updates they contain before returning.
* `flushSync` may run pending Effects and synchronously apply any updates they contain before returning.
* `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.

---
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/hydrate.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ This only works one level deep, and is intended to be an escape hatch. Don’t o

### Handling different client and server content {/*handling-different-client-and-server-content*/}

If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect):
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect):

<Sandpack>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/preconnect.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ The `preconnect` function provides the browser with a hint that it should open a
#### Caveats {/*caveats*/}

* Multiple calls to `preconnect` with the same server have the same effect as a single call.
* In the browser, you can call `preconnect` in any situation: while rendering a component, in an effect, in an event handler, and so on.
* In the browser, you can call `preconnect` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preconnect` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
* If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
* There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given.
Expand Down
Loading
Loading