Skip to content

Commit

Permalink
Update optimizing-long-running-components.md
Browse files Browse the repository at this point in the history
  • Loading branch information
nogayam authored Mar 27, 2024
1 parent ff0dbe0 commit e793dfa
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions docs/docs/fundamentals/optimizing-long-running-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ The library can only provide you with tripwires that certain screens are not per

However, there is one common category of performance slowdown that is often seen in simple RN apps. If a React component runs for a long time synchronously before returning the renderable JSX, it may cause the navigation to slow down a little.

The `PerformanceMeasureView` can help you optimise such slow navigation animations by delaying the expensive renders until after the animation completes. It can show a lightweight placeholder view while that animation is occuring:
The `PerformanceMeasureView` can help you optimise such slow navigation animations by delaying the expensive renders until after the animation completes. It can show a lightweight placeholder view while that animation is occurring:

```tsx
<PerformanceMeasureView
Expand All @@ -19,6 +19,6 @@ The `PerformanceMeasureView` can help you optimise such slow navigation animatio
</PerformanceMeasureView>
```

It is highly encouraged to not use this flag blindly, since it can only optimize a very specific kind of perfomance slowdowns. Using it unnecessarily might actually slow things down even further, since you're adding 1 extra lightweight render pass before rendering the real expensive UI. Please visually verify thoroughly and monitor the render-time scores before opting in.
It is highly encouraged to not use this flag blindly, since it can only optimize a very specific kind of performance slowdowns. Using it unnecessarily might actually slow things down even further, since you're adding 1 extra lightweight render pass before rendering the real expensive UI. Please visually verify thoroughly and monitor the render-time scores before opting in.

This feature uses a ReactNative [`InteractionManager.runAfterInteractions`](https://reactnative.dev/docs/interactionmanager) call under-the-hood to schedule the real expensive render after all the animations are completed.

0 comments on commit e793dfa

Please sign in to comment.