Skip to content

async-safe, static lifecycle hooks #6

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
acdlite merged 22 commits into from
Jan 19, 2018
Merged

async-safe, static lifecycle hooks #6

Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
9818f57
Initial proposal for async-friendly, static lifecycle hooks
bvaughn Dec 8, 2017
839547f
Added a note about the prefix
bvaughn Dec 8, 2017
b7189cc
Made deprecation/rename clearer
bvaughn Dec 8, 2017
aad6845
Hopefully clarified the computeMemoizeData() placeholder example
bvaughn Dec 8, 2017
99988da
Renamed example method for improved clarity
bvaughn Dec 9, 2017
4a34d25
Added note about aEL being unsafe in cWM
bvaughn Dec 9, 2017
902d4b3
Fixed typo
bvaughn Dec 9, 2017
3df7ce6
Fixing typo
bvaughn Dec 9, 2017
1864c93
Removed Facebook-specific terminology
bvaughn Dec 9, 2017
428758b
Tweaked wording for clarity
bvaughn Dec 9, 2017
cfcb7e8
Reorganization (part 1, more to come)
bvaughn Dec 9, 2017
536084d
Added some more focused examples
bvaughn Dec 9, 2017
a1431a4
Added a comment about calling setState on a possibly unmounted component
bvaughn Dec 9, 2017
3c6132e
Cancel async request on unmount in example
bvaughn Dec 9, 2017
4425dbe
Tweaking examples based on Dan's feedback
bvaughn Dec 9, 2017
67272ce
Renamed deriveStateFromProps to getDerivedStateFromNextProps
bvaughn Dec 13, 2017
c7f6728
Renamed prefetch to optimisticallyPrepareToRender
bvaughn Dec 13, 2017
bb2d246
Added `render` to a list
bvaughn Dec 14, 2017
8618f70
Removed static optimisticallyPrepareToRender() in favor of render()
bvaughn Dec 19, 2017
8f6c20e
Renamed getDerivedStateFromNextProps to getDerivedStateFromProps
bvaughn Jan 18, 2018
e05e317
Updated when getDerivedStateFromProps is called and what its argument…
bvaughn Jan 18, 2018
7042a2a
Renamed unsafe_* to UNSAFE_*
bvaughn Jan 18, 2018
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
Prev Previous commit
Next Next commit
Cancel async request on unmount in example
  • Loading branch information
@bvaughn
bvaughn committed Dec 9, 2017
commit 3c6132edfa004458460eeaefd383f592feb1b004
22 changes: 16 additions & 6 deletions text/0000-static-lifecycle-methods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,8 @@ class ExampleComponent extends React.Component {

```js
class ExampleComponent extends React.Component {
_asyncRequest = null;

state = {
externalData: null,
};
Expand All @@ -122,12 +124,20 @@ class ExampleComponent extends React.Component {
componentDidMount() {
// Wait for earlier pre-fetch to complete and update state.
// (This assumes some kind of cache to avoid duplicate requests.)
asyncLoadData(props.someId).then(externalData => {
// Note that if the component unmounts before this request completes,
// It will trigger a warning, "cannot update an unmounted component".
// You can avoid this by tracking mounted state with an instance var if desired.
this.setState({ externalData });
});
this._asyncRequest = asyncLoadData(props.someId)
.then(externalData => {
this._asyncRequest = null;

this.setState({ externalData });
});
}

componentWillUnmount() {
// Note that cancelling on unmount is not really related to this proposal.
// I'm just showing it to avoid calling setState on an unmounted component.
if (this._asyncRequest !== null) {
this._asyncRequest.cancel();
}
Copy link
Member

@gaearon gaearon Dec 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typically this doesn’t work because there’s no cancel on Promise. The fetch() API is going to use something similar to cancellation tokens for that. However to store a token you need an instance. Does this mean cancelling of prefetches would need to be done on a different level (e.g. together with cache?)

Copy link
Collaborator Author

@bvaughn bvaughn Dec 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know. I was just trying to show the idea of cancelling a request. 😄 If you have a specific syntax/example you think would be better, that'd be great.

Copy link
Collaborator Author

@bvaughn bvaughn Dec 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TBH I wonder sometimes if we should re-add isMounted. We removed it because it could be an indication that a component didn't cleanup after itself properly and may have a memory leak, but I think use-cases like I originally showed in this examples are common and it makes them more awkward to handle.

Copy link

@markerikson markerikson Dec 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll admit I've found the advice on that kinda confusing. "Yeah, we're removing it ourselves. Instead, you can either go through some complicated steps to cancel requests (if your async API even supports that), or add your own this._isMounted flag".

}

render() {
Expand Down