---
# System prepended metadata

title: Improve render performance (for V7)
tags: [pitch]

---

---
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).