Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

React warns about memory leak in Search/SelectControl component. #6883

Closed
tomalec opened this issue Apr 26, 2021 · 1 comment
Closed

React warns about memory leak in Search/SelectControl component. #6883

tomalec opened this issue Apr 26, 2021 · 1 comment
Labels
focus: components Issues for woocommerce components type: bug The issue is a confirmed bug.

Comments

@tomalec
Copy link
Member

tomalec commented Apr 26, 2021

Describe the bug
Context: I discovered this bug fixing #6061

When the Search component is disconnected/unmounted before options promise is resolved, React throws a warning:

    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.
        in SelectControl (created by WithFocusOutside(SelectControl))
        in div (created by WithFocusOutside(SelectControl))
        in WithFocusOutside(SelectControl) (created by WithInstanceId(WithFocusOutside(SelectControl)))
        in WithInstanceId(WithFocusOutside(SelectControl)) (created by WithSpokenMessages(WithInstanceId(WithFocusOutside(SelectControl))))
        in WithSpokenMessages(WithInstanceId(WithFocusOutside(SelectControl))) (created by Search)
        in div (created by Search)
        in Search

That issue probably didn't surface before because the Search component has a single test that creates an instance, and the suite was probably finished before the promise resolves. However, it gets clearly visible, when you add a little bit of delay in the second test:

it( 'returns an object with decoded text', async () => {
	await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
	const decodedText = computeSuggestionMatch(

See this commit/branch: https://github.com/woocommerce/woocommerce-admin/compare/bug/6883-Search-mem-leak

To Reproduce
Steps to reproduce the behavior:

  1. Stamp <Search type="products" />
  2. Type something in it.
  3. Remove the component before the options promise is resolved.

Alternatively:

  1. Do the change suggested above / checkout branch
git checkout bug/6883-Search-mem-leak
npm run test -- packages/components/src/search/test/index.js

Expected behavior
No warning should be thrown, no memory leak should be indicated.

Screenshots
Screenshot of the warning mentioned above

Desktop (please complete the following information):

  • OS: Ubuntu 20.04.2 LTS
  • Browser CLI

Smartphone (please complete the following information):
n/a

@tomalec tomalec added the focus: components Issues for woocommerce components label Apr 26, 2021
tomalec added a commit that referenced this issue Apr 26, 2021
@samueljseay samueljseay added the type: bug The issue is a confirmed bug. label May 13, 2021
@joelclimbsthings
Copy link
Contributor

Closing this in preparation for The Merge. Feel free to reopen afterwards in the core repo if it's still an issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: components Issues for woocommerce components type: bug The issue is a confirmed bug.
Projects
None yet
Development

No branches or pull requests

4 participants