React Perf Scenarios

[sebmarkbage]

Just wanted to write down some perf scenarios that I think might be important for incremental/Fiber.

Avoiding unscheduled work

Unscheduled work is synchronous and can easily lead to dropped frames.

• Any synchronous work.
• setState in componentDidMount/Update causing synchronous work.
• Life-cycles doing a lot of work rather than doing minimal work to schedule follow up work.
• Event handlers doing all their processing in the handler rather than deferring to doing work in the component or rIC.

Starvation

If we hit the starvation deadline (expiration time) then something has gone wrong because we weren't able to do it in idle cycles. Some reasons can be:

• Too much work is done in animations which leaves us too little time in idle. Might be React animations, other JS animations, CSS animations or even GIFs.
• Too much work is done on the main thread and parallelism can be better utilized with a worker. E.g. for video processing etc.
• High priority updates happen to high in the tree so we end up rerendering the whole tree.
• There are not enough shouldComponentUpdate/PureComponents so that high priority updates don't bail out and cause the whole tree to rerender. High priority updates should touch only a small part of the tree.
• There are not enough shouldComponentUpdate/PureComponents so that we can't reuse enough work safely when we resume a tree. Causing resumes to rerender everything.
• Something is causing new trees to get dropped and not resumed. Probably because of a bad Fiber heuristic for when to keep a started tree and when to throw it away.