React Router hook performance [listen+match] vs [Router.onUpdate]
djeeg opened this issue · 1 comments
I am working on a project that makes use of async chunked routes using react-router's getChildRoutes and webpack2's System.import
I am seeing an issue when using this code:
browserHistory.listen(location => {
var time4 = new Date()
//OR match({location, routes}
match({history, routes}, (err, redirectLocation, renderProps: any) => {
console.log("match:second: " + timeSince(time4))
setTimeout(function () {
trigger('loadclientonly', components, getLocals(renderProps))
.then(function () {
});
}, 10);
});
});
The match() causes an additional call to react-router's getChildRoutes, which adds a few hundred milliseconds to route transition time
I am prototyping an alternative way of doing this, and wanted some feedback
Hints taken from this thread #3
<Router onUpdate={RouterOnUpdate} />
With
function RouterOnUpdate() {
let components = this.state ? this.state.components : this.props.components;
let renderProps = this.state ? this.state : this.props;
setTimeout(function () {
trigger('loadclientonly', components, getLocals(renderProps))
.then(function () {
});
}, 10);
}
This approach seems to remove the lag during route transition
This works and should be the 'client' example provided in the README. I don't understand why the example uses the match
method, something recommended by React Router to not be used for much other than server-side rendering.