React Performance Optimization for YIcon: Reducing Re‑renders and Boosting Speed

In 2015 the author joined Qunar and later worked on the mobile architecture team (YMFE) as a frontend engineer, deciding to build the new YIcon project with React to improve development efficiency.

During development the team noticed severe UI lag when rendering thousands of icons; a click that should respond instantly incurred a 450‑500 ms delay due to repeated rendering of every component.

To stop unnecessary re‑renders they introduced shouldComponentUpdate(nextProps, nextState) , returning false for components that did not need updating.

They then refactored the icon list by extracting a parent IconButtons component that receives an icons array and decides whether to re‑render, reducing the per‑icon render cost and cutting the delay to 90‑100 ms.

Further gains came from component splitting: instead of applying shouldComponentUpdate inside each IconButton , they moved the logic to the container component, which reduced the number of checks dramatically and lowered the delay to 20‑30 ms.

The team also adopted immutable data structures, which create new objects on every change but share unchanged branches, allowing shallow reference checks to replace deep diffing and work seamlessly with Redux/Flux.

Another performance pitfall was using the array index as the key in list rendering; after deleting an icon the entire list re‑rendered. Switching to a stable id key limited updates to the single removed element.

When adjusting icon size via a slider, the virtual‑DOM diff became a bottleneck. Bypassing React and manipulating the DOM directly proved smoother, highlighting that providing new keys for every render can skip diffing altogether.

Before production release the team applied several webpack optimizations: new webpack.optimize.UglifyJsPlugin({output:{comments:false},compress:{warnings:false}}) to strip comments and warnings, ExtractTextPlugin.extract('style-loader/useable','css-loader?minimize!postcss-loader!less-loader?...') to extract and minify CSS, and new webpack.DefinePlugin({'process.env':{'NODE_ENV':JSON.stringify('production')}}) to enable React's production mode.

Finally, they summarized key tips: use shouldComponentUpdate to avoid duplicate renders, combine Redux with immutable for large apps, keep components small, profile with react-addons-perf , provide stable keys for list components, bind methods in constructors, and avoid overusing the spread operator.