--- robots: noindex, nofollow tags: pitch --- For instructions on shaping a project see here: [Shaping a Project](/kX02SXVbS6KzMOQd56i6Cg) # Improve render performance (for V7) ### Problem Runtime style calculation/registration is costly. Currently in V7 code, re-calculation can happen with component prop (styleProps or styles prop) change. If we can make perf better for existing V7 users while we working on our long-term style solution, we should. ### Appetite - Tackle low hanging fruits first (e.g. bad cache key). - No breaking changes. (maybe ok if we have huge gain??) - Improvement can directly be made on V7 code; no forking or rewriting lots of existing code. ### Solution #### Reduce style calculation - Reduce cache miss which leads to `mergeCssSets` [here](https://github.com/microsoft/fluentui/blob/e487b3d53cb4cf4afe76ddf9e2e16fc010d4b3d0/packages/utilities/src/classNamesFunction.ts#L84) 1. bad cache key: similar to [this](https://github.com/microsoft/fluentui/pull/12509) 2. smaller cache key: currently the cache key is commonly to be [theme + style props](https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/components/Label/Label.base.tsx#L13) *(This can bring the most perf gain. But need more investigation on how to achieve this.)* - *Need investgation:* Potential change in merge-styles (`mergeCssSets`) to improve perf #### Profiling *Ensure changes can be measured.* - Baseline perf measurements in place for all components. - Currently we measure render perf on mount, not re-renders, unmounting. We should measure both. - Partner up with Kushal (Deniz)? ### Risks (Rabbit holes) Once more investigations on the [solution](https://hackmd.io/QNWExhGfTr2TFZueZCH47A?both#Solution) is done, I will have a better picture on the cost vs. gain ratio. If we can't justify the work, it's possible to pivot away from this work. ### Out of scope (No-gos) This work is for V7, not [moving away from css-in-js](https://hackmd.io/gLhhtNFOQh6pydpYDpIV4g?both).