react-suspense-playground icon indicating copy to clipboard operation
react-suspense-playground copied to clipboard

Add custom Component class with deferSetState to prevent `An update was suspended for longer than the timeout, but no fallback UI was provided.`

Open JonatanSalas opened this issue 8 years ago • 1 comments

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.

JonatanSalas avatar Mar 08 '18 22:03 JonatanSalas

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?

tonix-tuft avatar Oct 20 '19 20:10 tonix-tuft