What is useSyncExternalStore, what is "tearing" in concurrent React, and how does this hook guarantee a consistent snapshot from external stores?

Imagine you have a toy box (external store) and you want to show your friend exactly what's inside. useSyncExternalStore is like a magic window that always shows the same toys, even if you and your friend look at the same time. It stops the picture from getting mixed up (tearing) so everyone sees the same thing.