Skip to content

Commit 64d067f

Browse files
koba04gaearon
andauthored
Remove event pooling and SyntheticEvent#persist from documents (#3207)
* remove event pooling and SyntheticEvent#persist from documents Syntheticevent#event exists in v17, but it does nothing at the version * add a page for legacy event pooling for _redirects * add a warning e.persist() is no longer pooled * Update legacy-event-pooling.md * docs: update a redirect link for event pooling * Update legacy-event-pooling.md * Update legacy-event-pooling.md * Update reference-events.md Co-authored-by: Dan Abramov <[email protected]>
1 parent 433acaa commit 64d067f

File tree

5 files changed

+41
-32
lines changed

5 files changed

+41
-32
lines changed

content/docs/faq-functions.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -289,9 +289,6 @@ class Searchbox extends React.Component {
289289
}
290290

291291
handleChange(e) {
292-
// React pools events, so we read the value before debounce.
293-
// Alternately we could call `event.persist()` and pass the entire event.
294-
// For more info see reactjs.org/docs/events.html#event-pooling
295292
this.emitChangeDebounced(e.target.value);
296293
}
297294

content/docs/legacy-event-pooling.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
id: legacy-event-pooling
3+
title: Event Pooling
4+
permalink: docs/legacy-event-pooling.html
5+
---
6+
7+
>Note
8+
>
9+
>This page is only relevant for React 16 and earlier, and for React Native.
10+
>
11+
>React 17 on the web **does not** use event pooling.
12+
>
13+
>[Read more](/blog/2020/08/10/react-v17-rc.html#no-event-pooling) about this change in React 17.
14+
15+
The [`SyntheticEvent`](/docs/events.html) objects are pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event event handler has been called. For example, this won't work:
16+
17+
```javascript
18+
function handleChange(e) {
19+
// This won't work because the event object gets reused.
20+
setTimeout(() => {
21+
console.log(e.target.value); // Too late!
22+
}, 100);
23+
}
24+
```
25+
26+
If you need to access event object's properties after the event handler has run, you need to call `e.persist()`:
27+
28+
```javascript
29+
function handleChange(e) {
30+
// Prevents React from resetting its properties:
31+
e.persist();
32+
33+
setTimeout(() => {
34+
console.log(e.target.value); // Works
35+
}, 100);
36+
}
37+
```

content/docs/reference-events.md

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -34,36 +34,11 @@ string type
3434

3535
> Note:
3636
>
37-
> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate.
38-
39-
### Event Pooling {#event-pooling}
40-
41-
The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked.
42-
This is for performance reasons.
43-
As such, you cannot access the event in an asynchronous way.
44-
45-
```javascript
46-
function onClick(event) {
47-
console.log(event); // => nullified object.
48-
console.log(event.type); // => "click"
49-
const eventType = event.type; // => "click"
50-
51-
setTimeout(function() {
52-
console.log(event.type); // => null
53-
console.log(eventType); // => "click"
54-
}, 0);
55-
56-
// Won't work. this.state.clickEvent will only contain null values.
57-
this.setState({clickEvent: event});
58-
59-
// You can still export event properties.
60-
this.setState({eventType: event.type});
61-
}
62-
```
37+
> As of v17, `e.persist()` doesn't do anything because the `SyntheticEvent` is no longer [pooled](/docs/legacy-event-pooling.html).
6338
6439
> Note:
6540
>
66-
> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
41+
> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate.
6742
6843
## Supported Events {#supported-events}
6944

static/_redirects

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
/link/dangerously-set-inner-html /docs/dom-elements.html#dangerouslysetinnerhtml
1313
/link/derived-state /blog/2018/06/07/you-probably-dont-need-derived-state.html
1414
/link/error-boundaries /docs/error-boundaries.html
15-
/link/event-pooling /docs/events.html#event-pooling
15+
/link/event-pooling /docs/legacy-event-pooling.html
1616
/link/hooks-data-fetching /docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks
1717
/link/invalid-aria-props /warnings/invalid-aria-prop.html
1818
/link/invalid-hook-call /warnings/invalid-hook-call-warning.html

vercel.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
{ "source": "/link/dangerously-set-inner-html", "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml", "permanent": false },
1616
{ "source": "/link/derived-state", "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html", "permanent": false },
1717
{ "source": "/link/error-boundaries", "destination": "/docs/error-boundaries.html", "permanent": false },
18-
{ "source": "/link/event-pooling", "destination": "/docs/events.html#event-pooling", "permanent": false },
18+
{ "source": "/link/event-pooling", "destination": "/docs/legacy-event-pooling.html", "permanent": false },
1919
{ "source": "/link/hooks-data-fetching", "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks", "permanent": false },
2020
{ "source": "/link/invalid-aria-props", "destination": "/warnings/invalid-aria-prop.html", "permanent": false },
2121
{ "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning.html", "permanent": false },

0 commit comments

Comments
 (0)