Skip to content

Commit d76e2e4

Browse files
committed
Merge branch 'main' into fix-suspense-throttling
2 parents b1062aa + e0160d5 commit d76e2e4

File tree

54 files changed

+3523
-1816
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3523
-1816
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ You can improve it by sending pull requests to [this repository](https://github.
4040
We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
4141

4242
```jsx
43+
import { createRoot } from 'react-dom/client';
44+
4345
function HelloMessage({ name }) {
4446
return <div>Hello {name}</div>;
4547
}
4648

47-
ReactDOM.render(
48-
<HelloMessage name="Taylor" />,
49-
document.getElementById('container')
50-
);
49+
const root = createRoot(document.getElementById('container'));
50+
root.render(<HelloMessage name="Taylor" />);
5151
```
5252

5353
This example will render "Hello Taylor" into a container on the page.

fixtures/attribute-behavior/AttributeTableSnapshot.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9787,14 +9787,14 @@
97879787
| `src=(integer)`| (changed)| `"http://localhost:3000/1"` |
97889788
| `src=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
97899789
| `src=(float)`| (changed)| `"http://localhost:3000/99.99"` |
9790-
| `src=(true)`| (initial, warning)| `<empty string>` |
9790+
| `src=(true)`| (changed, warning, ssr mismatch)| `"http://localhost:3000/true"` |
97919791
| `src=(false)`| (initial, warning)| `<empty string>` |
97929792
| `src=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
97939793
| `src=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
97949794
| `src=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
97959795
| `src=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
9796-
| `src=(symbol)`| (initial, warning)| `<empty string>` |
9797-
| `src=(function)`| (initial, warning)| `<empty string>` |
9796+
| `src=(symbol)`| (changed, error, warning, ssr mismatch)| `` |
9797+
| `src=(function)`| (changed, warning, ssr mismatch)| `"http://localhost:3000/function%20f()%20%7B%7D"` |
97989798
| `src=(null)`| (initial)| `<empty string>` |
97999799
| `src=(undefined)`| (initial)| `<empty string>` |
98009800

@@ -11980,21 +11980,21 @@
1198011980
| `value=(empty string)`| (initial)| `<empty string>` |
1198111981
| `value=(array with string)`| (changed)| `"string"` |
1198211982
| `value=(empty array)`| (initial)| `<empty string>` |
11983-
| `value=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
11983+
| `value=(object)`| (changed)| `"result of toString()"` |
1198411984
| `value=(numeric string)`| (changed)| `"42"` |
1198511985
| `value=(-1)`| (changed)| `"-1"` |
1198611986
| `value=(0)`| (changed)| `"0"` |
1198711987
| `value=(integer)`| (changed)| `"1"` |
1198811988
| `value=(NaN)`| (changed, warning)| `"NaN"` |
1198911989
| `value=(float)`| (changed)| `"99.99"` |
11990-
| `value=(true)`| (changed, ssr mismatch)| `"true"` |
11991-
| `value=(false)`| (changed, ssr mismatch)| `"false"` |
11990+
| `value=(true)`| (changed)| `"true"` |
11991+
| `value=(false)`| (changed)| `"false"` |
1199211992
| `value=(string 'true')`| (changed)| `"true"` |
1199311993
| `value=(string 'false')`| (changed)| `"false"` |
1199411994
| `value=(string 'on')`| (changed)| `"on"` |
1199511995
| `value=(string 'off')`| (changed)| `"off"` |
11996-
| `value=(symbol)`| (initial, warning)| `<empty string>` |
11997-
| `value=(function)`| (initial, warning)| `<empty string>` |
11996+
| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
11997+
| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
1199811998
| `value=(null)`| (initial, warning)| `<empty string>` |
1199911999
| `value=(undefined)`| (initial)| `<empty string>` |
1200012000

@@ -12018,7 +12018,7 @@
1201812018
| `value=(string 'false')`| (changed)| `"false"` |
1201912019
| `value=(string 'on')`| (changed)| `"on"` |
1202012020
| `value=(string 'off')`| (changed)| `"off"` |
12021-
| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
12021+
| `value=(symbol)`| (initial, warning)| `<empty string>` |
1202212022
| `value=(function)`| (initial, warning)| `<empty string>` |
1202312023
| `value=(null)`| (initial)| `<empty string>` |
1202412024
| `value=(undefined)`| (initial)| `<empty string>` |

packages/create-subscription/README.md

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,8 @@
11
# create-subscription
22

3-
`create-subscription` is a utility for subscribing to external data sources inside React components. It is officially supported and maintained by the React team.
3+
`create-subscription` is a utility for subscribing to external data sources inside React components.
44

5-
## When should you NOT use this?
6-
7-
This utility should be used for subscriptions to a single value that are typically only read in one place and may update frequently (e.g. a component that subscribes to a geolocation API to show a dot on a map).
8-
9-
Other cases have **better long-term solutions**:
10-
* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
11-
* I/O subscriptions (e.g. notifications) that update infrequently should use [`react-cache`](https://github.com/facebook/react/blob/main/packages/react-cache/README.md) instead.
12-
* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
13-
14-
## Limitations in async mode
15-
16-
The main motivation for `create-subscription` is to provide a way for library authors to ensure compatibility with React's upcoming asynchronous rendering mode. `create-subscription` guarantees correctness in async mode, accounting for the subtle bugs and edge cases that a library author might otherwise miss.
17-
18-
However, [it achieves correctness by sometimes de-opting to synchronous mode](https://github.com/facebook/react/issues/13186#issuecomment-403959161), obviating the benefits of async rendering. This is an inherent limitation of storing state outside of React's managed state queue and rendering in response to a change event.
19-
20-
The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
21-
22-
For **full compatibility** with asynchronous rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
23-
24-
## What types of subscriptions can this support?
25-
26-
This abstraction can handle a variety of subscription types, including:
27-
* Event dispatchers like `HTMLInputElement`.
28-
* Custom pub/sub components like Relay's `FragmentSpecResolver`.
29-
* Observable types like RxJS `BehaviorSubject` and `ReplaySubject`. (Types like RxJS `Subject` or `Observable` are not supported, because they provide no way to read the "current" value after it has been emitted.)
30-
* Native Promises.
5+
**It is no longer maintained and will not be updated. Use the built-in [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore) instead.**
316

327
# Installation
338

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,75 @@ const tests = {
325325
useHook();
326326
}
327327
`,
328+
`
329+
// Valid because the neither the conditions before or after the hook affect the hook call
330+
// Failed prior to implementing BigInt because pathsFromStartToEnd and allPathsFromStartToEnd were too big and had rounding errors
331+
const useSomeHook = () => {};
332+
333+
const SomeName = () => {
334+
const filler = FILLER ?? FILLER ?? FILLER;
335+
const filler2 = FILLER ?? FILLER ?? FILLER;
336+
const filler3 = FILLER ?? FILLER ?? FILLER;
337+
const filler4 = FILLER ?? FILLER ?? FILLER;
338+
const filler5 = FILLER ?? FILLER ?? FILLER;
339+
const filler6 = FILLER ?? FILLER ?? FILLER;
340+
const filler7 = FILLER ?? FILLER ?? FILLER;
341+
const filler8 = FILLER ?? FILLER ?? FILLER;
342+
343+
useSomeHook();
344+
345+
if (anyConditionCanEvenBeFalse) {
346+
return null;
347+
}
348+
349+
return (
350+
<React.Fragment>
351+
{FILLER ? FILLER : FILLER}
352+
{FILLER ? FILLER : FILLER}
353+
{FILLER ? FILLER : FILLER}
354+
{FILLER ? FILLER : FILLER}
355+
{FILLER ? FILLER : FILLER}
356+
{FILLER ? FILLER : FILLER}
357+
{FILLER ? FILLER : FILLER}
358+
{FILLER ? FILLER : FILLER}
359+
{FILLER ? FILLER : FILLER}
360+
{FILLER ? FILLER : FILLER}
361+
{FILLER ? FILLER : FILLER}
362+
{FILLER ? FILLER : FILLER}
363+
{FILLER ? FILLER : FILLER}
364+
{FILLER ? FILLER : FILLER}
365+
{FILLER ? FILLER : FILLER}
366+
{FILLER ? FILLER : FILLER}
367+
{FILLER ? FILLER : FILLER}
368+
{FILLER ? FILLER : FILLER}
369+
{FILLER ? FILLER : FILLER}
370+
{FILLER ? FILLER : FILLER}
371+
{FILLER ? FILLER : FILLER}
372+
{FILLER ? FILLER : FILLER}
373+
{FILLER ? FILLER : FILLER}
374+
{FILLER ? FILLER : FILLER}
375+
{FILLER ? FILLER : FILLER}
376+
{FILLER ? FILLER : FILLER}
377+
{FILLER ? FILLER : FILLER}
378+
{FILLER ? FILLER : FILLER}
379+
{FILLER ? FILLER : FILLER}
380+
{FILLER ? FILLER : FILLER}
381+
{FILLER ? FILLER : FILLER}
382+
{FILLER ? FILLER : FILLER}
383+
{FILLER ? FILLER : FILLER}
384+
{FILLER ? FILLER : FILLER}
385+
{FILLER ? FILLER : FILLER}
386+
{FILLER ? FILLER : FILLER}
387+
{FILLER ? FILLER : FILLER}
388+
{FILLER ? FILLER : FILLER}
389+
{FILLER ? FILLER : FILLER}
390+
{FILLER ? FILLER : FILLER}
391+
{FILLER ? FILLER : FILLER}
392+
{FILLER ? FILLER : FILLER}
393+
</React.Fragment>
394+
);
395+
};
396+
`,
328397
`
329398
// Valid because the neither the condition nor the loop affect the hook call.
330399
function App(props) {

packages/eslint-plugin-react-hooks/src/RulesOfHooks.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
/* global BigInt */
89
/* eslint-disable no-for-of-loops/no-for-of-loops */
910

1011
'use strict';
@@ -175,7 +176,7 @@ export default {
175176
cyclic.add(cyclicSegment);
176177
}
177178

178-
return 0;
179+
return BigInt('0');
179180
}
180181

181182
// add the current segment to pathList
@@ -187,19 +188,19 @@ export default {
187188
}
188189

189190
if (codePath.thrownSegments.includes(segment)) {
190-
paths = 0;
191+
paths = BigInt('0');
191192
} else if (segment.prevSegments.length === 0) {
192-
paths = 1;
193+
paths = BigInt('1');
193194
} else {
194-
paths = 0;
195+
paths = BigInt('0');
195196
for (const prevSegment of segment.prevSegments) {
196197
paths += countPathsFromStart(prevSegment, pathList);
197198
}
198199
}
199200

200201
// If our segment is reachable then there should be at least one path
201202
// to it from the start of our code path.
202-
if (segment.reachable && paths === 0) {
203+
if (segment.reachable && paths === BigInt('0')) {
203204
cache.delete(segment.id);
204205
} else {
205206
cache.set(segment.id, paths);
@@ -246,7 +247,7 @@ export default {
246247
cyclic.add(cyclicSegment);
247248
}
248249

249-
return 0;
250+
return BigInt('0');
250251
}
251252

252253
// add the current segment to pathList
@@ -258,11 +259,11 @@ export default {
258259
}
259260

260261
if (codePath.thrownSegments.includes(segment)) {
261-
paths = 0;
262+
paths = BigInt('0');
262263
} else if (segment.nextSegments.length === 0) {
263-
paths = 1;
264+
paths = BigInt('1');
264265
} else {
265-
paths = 0;
266+
paths = BigInt('0');
266267
for (const nextSegment of segment.nextSegments) {
267268
paths += countPathsToEnd(nextSegment, pathList);
268269
}

packages/react-devtools-core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-devtools-core",
3-
"version": "4.24.3",
3+
"version": "4.24.4",
44
"description": "Use react-devtools outside of the browser",
55
"license": "MIT",
66
"main": "./dist/backend.js",

packages/react-devtools-extensions/chrome/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"manifest_version": 2,
33
"name": "React Developer Tools",
44
"description": "Adds React debugging tools to the Chrome Developer Tools.",
5-
"version": "4.24.3",
6-
"version_name": "4.24.3",
5+
"version": "4.24.4",
6+
"version_name": "4.24.4",
77
"minimum_chrome_version": "60",
88
"icons": {
99
"16": "icons/16-production.png",

packages/react-devtools-extensions/edge/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"manifest_version": 2,
33
"name": "React Developer Tools",
44
"description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
5-
"version": "4.24.3",
6-
"version_name": "4.24.3",
5+
"version": "4.24.4",
6+
"version_name": "4.24.4",
77
"minimum_chrome_version": "60",
88
"icons": {
99
"16": "icons/16-production.png",

packages/react-devtools-extensions/firefox/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 2,
33
"name": "React Developer Tools",
44
"description": "Adds React debugging tools to the Firefox Developer Tools.",
5-
"version": "4.24.3",
5+
"version": "4.24.4",
66
"applications": {
77
"gecko": {
88
"id": "@react-devtools",

packages/react-devtools-inline/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-devtools-inline",
3-
"version": "4.24.3",
3+
"version": "4.24.4",
44
"description": "Embed react-devtools within a website",
55
"license": "MIT",
66
"main": "./dist/backend.js",

0 commit comments

Comments
 (0)