reactjs - Prevent react-router re-creating component when switching links -

i have number of nav links @ top level switch page level components in , out when switch between links. pages have complex grid components expensive create. noticed react-router constructs component every time page switched. there way cache component passed route?, i.e positionspage

<route path="/positions" component={positionspage} />

this important performance consideration in react whole (and not react-router).

by default design, react re-renders complete dom tree change in props or state.

here summary of techniques react documentation advanced performance suggests.

use production build

note: correctness of components automatically taken care of. nothing worry.

this should simply. following webpack.config.js plugins section snippet should make sure node_env variable reaches react source code.

  ...   plugins: [     new commonschunkplugin('bundle.js'),     new webpack.defineplugin({       'process.env': {         'node_env': json.stringify(process.env.node_env)       }     })   ]   ... 

now ensure node_env=production webpack -p.

this ensures warnings/errors , proptypes checking skipped.

avoiding reconciling dom

warning: must handle possible condition matrices (if needed) of props , state make sure don't mess correctness of rendering.

this callback signature must implemented. called whenever state or prop value changes.

shouldcomponentupdate: function(nextprops, nextstate) {   // @todo logic here   // return true update, false otherwise   return true; } 

keep in mind react invoke function pretty often, implementation has fast.