Using react-router1.0 and react0.14, we were mistakenly serializing our flux object multiple times.
RoutingContext
will call createElement
for every template in your react-router routes. This allows you to inject whatever props you want. We also use flux. We send down a serialized version of a large object. In our case, we were doing flux.serialize()
within createElement. The serialization method could take ~20ms. With 4 templates, that would be an extra 80ms to your renderToString()
method!
Old code:
function createElement(Component, props) {
props = _.extend(props, {
flux: flux,
path: path,
serializedFlux: flux.serialize();
});
return <Component {...props} />;
}
var start = Date.now();
markup = renderToString(<RoutingContext {...renderProps} createElement={createElement} />);
console.log(Date.now() - start);
Easily optimized to this:
var serializedFlux = flux.serialize(); // serialize one time only!
function createElement(Component, props) {
props = _.extend(props, {
flux: flux,
path: path,
serializedFlux: serializedFlux
});
return <Component {...props} />;
}
var start = Date.now();
markup = renderToString(<RoutingContext {...renderProps} createElement={createElement} />);
console.log(Date.now() - start);
In my case this helped reduce the renderToString()
time from ~120ms to ~30ms. (You still need to add the 1x serialize()
‘s ~20ms to the total, which happens before the renderToString()
) It was a nice quick improvement. — It’s important to remember to always do things correctly, even if you don’t know the immediate impact!