Podcast Player - make feed fetch call cancellable and cancel on Block removal.

[getdave]

Currently the Podcast Player Block uses apiFetch to trigger a Ajax request for the feed data. Once it [the fetch promise] resolves then state and attributes updates are triggered.

If, whilst the network request is in progress, the Block is "unmounted" then the console will show an error along the lines of

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

This is because the .then handler on the fetch still triggers even though the Block no longer exists. As the handler updates state and attributes the console triggers the above error regarding state updates on unmounted components.

To fix this we make the apiFetch call cancell-able (via a wrapper util) and then ensure we cancel and do not update state if the Block has been unmounted.

Fixes #15214

Changes proposed in this Pull Request:

• Wrap apiFetch to make it possible to cancel it.
• Add ref to track cancellable promise instance.
• Add useEffect to .cancel() the fetch promise if the Block unmounts.
• Add conditional to the .catch() handler to check for .isCancelled and terminate handler execution early to avoid state updates.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Fixes existing bug in Podcast Player Block

Testing instructions:

Annoyingly there seems to be a bug in Gutenberg with the Popover component. Therefore when "removing" the BLock below you will need to click to place the cursor in the editor immediate following the Block and then hit the BACKSPACE key to remove the block. Removing using the dropdown many on the Block itself will trigger a warning which is unrelated to this Block.

On Feature Branch

• Insert Podcast Block.
• In Network Tools switch to "Slow 3G mode".
• Add a valid feed URL and submit.
• Immediately (before the fetch request resolves) delete the Block (see notes above).
• See error in console relating to state updates on unmounted component.

On This Branch

• Insert Podcast Block.
• In Network Tools switch to "Slow 3G mode".
• Add a valid feed URL and submit.
• Immediately (before the fetch request resolves) delete the Block (see notes above).
• See no errors.

If you enable debug mode you will also see a notice informing you that:

Block was unmounted during fetch

Proposed changelog entry for your changes:

• Fix React error regarding state updates on unmounted component if Block is removed during the fetching of the Podcast feed.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello getdave! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D41206-code before merging this PR. Thank you!

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: April 7, 2020.
Scheduled code freeze: March 31, 2020

Generated by 🚫 dangerJS against 173c8d5

[retrofox]

I left only one comment about checking the isCancel state. Maybe it doesn't make sense, though.

Tested and it works as expected.

Nice improvement, Dave. 💯

We can wait for more feedback from other folks.

[matticbot]

getdave, Your synced wpcom patch D41206-code has been updated.

[matticbot]

getdave, Your synced wpcom patch D41206-code has been updated.

[getdave]

As this is merging into the feature branch we won't wait on Jetpack Crew.