Add custom Component class with deferSetState to prevent `An update was suspended for longer than the timeout, but no fallback UI was provided.`
When running the example everything goes fine, but, sometimes you can see the following error when trying to transition between routes: An update was suspended for longer than the timeout, but no fallback UI was provided.
To prevent this issue, you have to defer the state update for location in your Router component. In his talk, Dan Abramov uses a method called deferSetState, it isn't implemented yet, but you can do it on your own if you extend React.Component and use ReactDOM.unstable_deferredUpdates in this way:
import React from 'react';
import ReactDOM from 'react-dom';
export default class Component extends React.Component {
deferSetState(state, sideEffects) {
ReactDOM.unstable_deferredUpdates(() => this.setState(state, sideEffects));
}
}
Well, that's all.
If I understood correctly, deferSetState is needed so that React stops committing the rendered component until the eventually thrown promises (through the fetcher.read() method) inside component's render() method are resolved. Is my assumption correct?