What are low and high-priority updates?
In Fiber, there are two trees: the current tree and the work-in-progress tree.
- 1
Background Tasks: Updates related to non-critical components (e.g., off-screen elements, data fetching) fall into this category.
- 2
Idle Time Tasks: Work that can be deferred during idle periods, such as preloading data or optimising performance, is considered low priority.
- 1
User Interactions: Updates triggered by user actions like clicks, and keyboard input receive high priority to maintain responsiveness.
- 2
Animations: Smooth animations like scrolling, and transitions require timely updates for a pleasant user experience.
Scenario Questions
- 1
You need a button click to update a counter instantly, without any delay. How would you make sure that update is treated as high priority in a functional component?
- 2
If you wrap a state update inside startTransition, what change would you notice in the UI compared to a normal setState call?
- 1
While typing in a search box, the UI feels sluggish because a large list is being filtered on each keystroke. How would you diagnose whether the filtering is running as a low‑priority update and fix the lag?
- 2
Your team added a background data sync that uses useDeferredValue, but now a modal that depends on that data sometimes shows stale information. What could be causing this and how would you address it?
- 1
Design a component that fetches data in the background (low priority) but also handles user‑initiated refreshes (high priority). Explain the APIs you would use and the trade‑offs involved.
- 2
You have a dashboard with many widgets that update every second. Some widgets are critical for the user, others are decorative. How would you structure the updates to keep the critical ones high priority while deferring the rest?
- 1
Your organization is migrating a large legacy codebase to React 18 with concurrent features. How would you plan the rollout of low‑ vs high‑priority updates across multiple teams to minimize regressions and maintain performance?
- 2
When introducing startTransition across a suite of micro‑frontends, what architectural considerations do you need to address to ensure consistent scheduling behavior and avoid priority inversion?
Follow-up Questions
- ❓What happens if you accidentally treat a user‑initiated update as low priority?
- ❓Can you combine high‑ and low‑priority updates in the same render cycle? How?
- ❓How does this priority model interact with React.memo or useCallback?