Skip to content

Upgrade sandboxes to 19.2#8037

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
rickhanlonii merged 12 commits into from
Oct 2, 2025
Merged

Upgrade sandboxes to 19.2 #8037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
74b67b1
Use stable release in demos with HTML output
eps1lon Oct 2, 2025
d44deae
Fix Activity sandboxes (#8035)
rickhanlonii Oct 1, 2025
609a3bf
Revert "Fix Activity sandboxes (#8035)"
gaearon Oct 1, 2025
27dafc3
Bump to 19.2
gaearon Oct 1, 2025
f16a0cb
cleanup rest of sandpacks
eps1lon Oct 2, 2025
b6a3778
Pin deps
rickhanlonii Oct 2, 2025
6055885
Add back package.json with third-party deps
rickhanlonii Oct 2, 2025
f2b6c8e
"^" should be fixed now
rickhanlonii Oct 2, 2025
31e63de
add back package.json for more toastify deps
rickhanlonii Oct 2, 2025
b1571e3
fuggin whitespace
rickhanlonii Oct 2, 2025
5d487e6
more fuggin whitespace
rickhanlonii Oct 2, 2025
81dccdd
fml like fr fr
rickhanlonii Oct 2, 2025
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 numberDiff line numberDiff line change
Expand Up@@ -35,8 +35,8 @@ root.render(
eject: 'react-scripts eject',
},
dependencies: {
react: '^19.1.0',
'react-dom': '^19.1.0',
react: '^19.2.0',
'react-dom': '^19.2.0',
'react-scripts': '^5.0.0',
},
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/MDX/SandpackWithHTMLOutput.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -56,8 +56,8 @@ export default function formatHTML(markup) {
const packageJSON = `
{
"dependencies": {
"react": "18.3.0-canary-6db7f4209-20231021",
"react-dom": "18.3.0-canary-6db7f4209-20231021",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-scripts": "^5.0.0",
"html-format": "^1.1.2"
},
Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/escape-hatches.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -455,8 +455,8 @@ This is not ideal. You want to re-connect to the chat only if the `roomId` has c
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand Down
40 changes: 4 additions & 36 deletions src/content/learn/removing-effect-dependencies.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1253,22 +1253,6 @@ Is there a line of code inside the Effect that should not be reactive? How can y

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect, useRef } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -1380,22 +1364,6 @@ Your Effect needs to read the latest value of `duration`, but you don't want it

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect, useRef } from 'react';
import { FadeInAnimation } from './animation.js';
Expand DownExpand Up@@ -1819,8 +1787,8 @@ Another of these functions only exists to pass some state to an imported API met
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand DownExpand Up@@ -2114,8 +2082,8 @@ As a result, the chat re-connects only when something meaningful (`roomId` or `i
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand Down
52 changes: 2 additions & 50 deletions src/content/learn/reusing-logic-with-custom-hooks.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1064,8 +1064,8 @@ export function showNotification(message, theme = 'dark') {
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand DownExpand Up@@ -1710,22 +1710,6 @@ html, body { min-height: 300px; }
}
```

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

</Sandpack>

However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
Expand DownExpand Up@@ -2199,22 +2183,6 @@ It looks like your `useInterval` Hook accepts an event listener as an argument.

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useCounter } from './useCounter.js';
import { useInterval } from './useInterval.js';
Expand DownExpand Up@@ -2270,22 +2238,6 @@ With this change, both intervals work as expected and don't interfere with each

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```


```js
import { useCounter } from './useCounter.js';
Expand Down
129 changes: 8 additions & 121 deletions src/content/learn/separating-events-from-effects.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -442,8 +442,8 @@ Verify that the new behavior works as you would expect:
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand DownExpand Up@@ -788,22 +788,6 @@ With `useEffectEvent`, there is no need to "lie" to the linter, and the code wor

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -955,23 +939,6 @@ To fix this code, it's enough to follow the rules.

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```


```js {expectedErrors: {'react-compiler': [14]}}
import { useState, useEffect } from 'react';

Expand DownExpand Up@@ -1025,22 +992,6 @@ If you remove the suppression comment, React will tell you that this Effect's co

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';

Expand DownExpand Up@@ -1103,22 +1054,6 @@ It seems like the Effect which sets up the timer "reacts" to the `increment` val

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -1172,22 +1107,6 @@ To solve the issue, extract an `onTick` Effect Event from the Effect:

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -1254,22 +1173,6 @@ Code inside Effect Events is not reactive. Are there cases in which you would _w

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -1341,22 +1244,6 @@ The problem with the above example is that it extracted an Effect Event called `

<Sandpack>

```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
```

```js
import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';
Expand DownExpand Up@@ -1440,8 +1327,8 @@ Your Effect knows which room it connected to. Is there any information that you
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand DownExpand Up@@ -1581,8 +1468,8 @@ To fix the issue, instead of reading the *latest* `roomId` inside the Effect Eve
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand DownExpand Up@@ -1718,8 +1605,8 @@ To solve the additional challenge, save the notification timeout ID and clear it
```json package.json hidden
{
"dependencies": {
"react": "canary",
"react-dom": "canary",
"react": "latest",
"react-dom": "latest",
"react-scripts": "latest",
"toastify-js": "1.12.0"
},
Expand Down
Loading