Skip to content

[v19] Update sandboxes to 19 RC #7196

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Sep 30, 2024
Merged

[v19] Update sandboxes to 19 RC #7196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/components/MDX/Sandpack/template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ root.render(
eject: 'react-scripts eject',
},
dependencies: {
react: '^18.0.0',
'react-dom': '^18.0.0',
react: '19.0.0-rc-3edc000d-20240926',
'react-dom': '19.0.0-rc-3edc000d-20240926',
'react-scripts': '^5.0.0',
},
},
Expand Down
10 changes: 0 additions & 10 deletions src/content/learn/manipulating-the-dom-with-refs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,16 +309,6 @@ li {
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
}
}
```

</Sandpack>

In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
Expand Down
19 changes: 4 additions & 15 deletions src/content/reference/react-dom/client/createRoot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -572,17 +572,6 @@ export default function App() {
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js"
}
```

</Sandpack>


Expand Down Expand Up @@ -853,8 +842,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "19.0.0-rc-3edc000d-20240926",
"react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
Expand Down Expand Up @@ -1111,8 +1100,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "19.0.0-rc-3edc000d-20240926",
"react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
Expand Down
19 changes: 4 additions & 15 deletions src/content/reference/react-dom/client/hydrateRoot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -606,17 +606,6 @@ export default function App() {
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js"
}
```

</Sandpack>


Expand Down Expand Up @@ -890,8 +879,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "19.0.0-rc-3edc000d-20240926",
"react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
Expand Down Expand Up @@ -1152,8 +1141,8 @@ function Throw({error}) {
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "19.0.0-rc-3edc000d-20240926",
"react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
Expand Down
64 changes: 2 additions & 62 deletions src/content/reference/react-dom/components/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,18 +69,6 @@ export default function Search() {
}
```

```json package.json hidden
{
"dependencies": {
"react": "18.3.0-canary-6db7f4209-20231021",
"react-dom": "18.3.0-canary-6db7f4209-20231021",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```

</Sandpack>

### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
Expand Down Expand Up @@ -170,17 +158,6 @@ export async function submitForm(query) {
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```
</Sandpack>

To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
Expand Down Expand Up @@ -250,19 +227,6 @@ export async function deliverMessage(message) {
}
```


```json package.json hidden
{
"dependencies": {
"react": "18.3.0-canary-6db7f4209-20231021",
"react-dom": "18.3.0-canary-6db7f4209-20231021",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```

</Sandpack>

[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentatino page is published'
Expand Down Expand Up @@ -298,8 +262,8 @@ export default function Search() {
```json package.json hidden
{
"dependencies": {
"react": "18.3.0-canary-6db7f4209-20231021",
"react-dom": "18.3.0-canary-6db7f4209-20231021",
"react": "19.0.0-rc-3edc000d-20240926",
"react-dom": "19.0.0-rc-3edc000d-20240926",
"react-scripts": "^5.0.0",
"react-error-boundary": "4.0.3"
},
Expand Down Expand Up @@ -364,18 +328,6 @@ export async function signUpNewUser(newEmail) {
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```

</Sandpack>

Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
Expand Down Expand Up @@ -412,16 +364,4 @@ export default function Search() {
}
```

```json package.json hidden
{
"dependencies": {
"react": "18.3.0-canary-6db7f4209-20231021",
"react-dom": "18.3.0-canary-6db7f4209-20231021",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```

</Sandpack>
23 changes: 0 additions & 23 deletions src/content/reference/react-dom/hooks/useFormStatus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,18 +111,6 @@ export async function submitForm(query) {
await new Promise((res) => setTimeout(res, 1000));
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```
</Sandpack>

<Pitfall>
Expand Down Expand Up @@ -228,17 +216,6 @@ button {

```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "^5.0.0"
},
"main": "/index.js",
"devDependencies": {}
}
```
</Sandpack>

---
Expand Down
30 changes: 0 additions & 30 deletions src/content/reference/react/StrictMode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,16 +952,6 @@ li {
}
```

```json package.json hidden
{
"dependencies": {
"react": "beta",
"react-dom": "beta",
"react-scripts": "^5.0.0"
}
}
```

</Sandpack>


Expand Down Expand Up @@ -1104,16 +1094,6 @@ li {
}
```

```json package.json hidden
{
"dependencies": {
"react": "beta",
"react-dom": "beta",
"react-scripts": "^5.0.0"
}
}
```

</Sandpack>

**With Strict Mode, you immediately see that there is a problem**. Strict Mode runs an extra setup+cleanup cycle for every callback ref. This callback ref has no cleanup logic, so it adds refs but doesn't remove them. This is a hint that you're missing a cleanup function.
Expand Down Expand Up @@ -1241,16 +1221,6 @@ li {
}
```

```json package.json hidden
{
"dependencies": {
"react": "beta",
"react-dom": "beta",
"react-scripts": "^5.0.0"
}
}
```

</Sandpack>

Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
Expand Down
Loading
Loading