Senior LevelReact JS & React 19
What is visual tearing in concurrent rendering and how does React prevent it?
❓ Interview Prompt: Explain Visual Tearing, concurrent rendering interruptions, external store updates mid-render, and `useSyncExternalStore` solution.
Visual Tearing occurs when an external mutable state store updates in the middle of an interrupted concurrent render pass:
How Tearing Happens:
React 18 Concurrent Mode can pause rendering a component tree to process an urgent input event. If an external store updates during that pause, components rendered BEFORE the pause show old data, while components rendered AFTER show new data (Tearing!).
•
Fix: Using 'useSyncExternalStore' forces React to read store snapshots synchronously, preventing tearing.
Code Implementation Example
jsx
// Tearing is prevented by useSyncExternalStore synchronizing external reads
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);💡Preventing visual tearing in concurrent rendering with useSyncExternalStore.
🎯 Interview Key Takeaway
Visual tearing occurs when external state updates mid-render; useSyncExternalStore prevents it by synchronizing store reads.
#Tearing#Concurrent React#useSyncExternalStore#Senior
Back to all React JS & React 19 Questions→