React-select: Warning: setState(...)

[jefftune]

I am getting the following warning from react-select:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Select component.

[billyvg]

I'm also getting this warning

[damassi]

@jefftune / @billyvg Can you provide more information? Its good to provide some context in order to help debug.

I believe this occurs when you make a page transition during an async operation. By the time the component is unmounted, the callback is fired and thus triggers a state change on an unmounted component.

[billyvg]

Yeah sorry for the lack of information in the previous post, I didn't spend too much time looking into what's causing it. I'm using React 0.13.3 w/ Meteor, so maybe its either the react version, or it could be related to Meteor. When I get some more time I'll see if I can figure out what's causing it.

[kabbi]

Yes, this really happens, as of react 1.14.1 and react-select 0.9.1. React-select doesn't forget about async options fetchers when unmounted, and thus triggers this warning. As a workaround you can check if the component is still mounted in your async options fetcher, and don't trigger the callback (or resolve a promise) if it is no longer needed.

[jozan]

I'm also getting this error with React 0.14.2 and react-select 0.9.1.

[kevinsqi]

confirmed with react 0.14.3 and react-select 0.9.1 as well.

@kabbi's workaround seems like it could work, but I'm using ES6 classes and unfortunately isMounted isn't even supported, so I'm hoping there can be a fix in react-select itself.

[chandlervdw]

@kabbi can you help me understand how to do that exactly? My asyncOptions is getShelfOptions(). The function getOptions() inside of it returns an imported function from another file, which returns a promise.

This doesn't work:

componentWillMount() {
  this.isUnmounted = true;
}
componentDidMount() {
  this.isUnmounted = false;
}
componentWillUnmount() {
  this.isUnmounted = true;
}
getShelfOptions(input) {
  if (this.isUnmounted) return;
  return getOptions(input, {
    indexName: 'shelves',
    initialOption: this.props.Shelf.Title || '',
    startEmpty: true
  });
}

[kabbi]

@chandlervdw sorry, but my approach only works for callback-based async options, or when you resolve promise in the same component (and can check that the component was unmounted). Unfortunately, es6 promises cannot be cancelled once they are resolved, and in your case you cannot prevent promise resolution.
The workaround for you I can think of may be like this:

getShelfOptions(input, callback) {
  getOptions(input, {
    indexName: 'shelves',
    initialOption: this.props.Shelf.Title || '',
    startEmpty: true
  }).then(options => {
    if (this.isUnmounted) return;
    callback(null, options);
  });
}

[dmk23]

Is there any update/progress on solving this?

Just ran into this warning on React 15.6.1. Was just fine on 14.9

[p10ns11y]

It is due to autoload prop, when it is true it fires the loadOptions('') and if your Aysnc
Component is somewhere in the tree, where the component parent switches conditionally between empty render (false or null) to resolved element, may be due to data fetching.
Because cancelling promise is not straight forward.

Either set autoload based on the prop that controls parent render (isFetching) or fix the parent that render only after all the data fetched.