Most underrated react hook: useSyncExternalStore. Subscribe to external store changes and extract values in sync with react rendering. Ideal for things like event listeners 💯

TIL you can avoid hydratation mismatch error by using React.useSyncExternalStore.

Pay attention on how you use useSyncExternalStore 👀. 👉 The subscription function should be defined outside of the component. This avoids unnecessary un-subscribe and re-renders

Worked on <@DrizzleORM Play> today. I use @remix_run for this project and ended up with something that feels really smooth: non-blocking UI while the app is booting the playground. What you see here is a mix of clientLoader and useSyncExternalStore. clientLoader boots a

New local-first experiment with @loro_dev . Achieved live sync in react.👉 `useSyncExternalStore` subscribe to changes.👉 Extract latest data. Loro supports export/import in Uint8Array, so it should be possible to sync with http 🔜

Subscribing to an external store using useSyncExternalStore() hook 🪝 in ReactJS. Checkout the full video on my YouTube channel: CodEd by Om. #useSyncExternalStore #reactjs #reactplaylist #reactjsomlondhe #omlondhe

How would you build useOnlineStatus()?. If you said useState/useEffect, you really need to read this: If you've ever struggled with useSyncExternalStore, check that out because we go through common mistakes and questions!

❌ Don't use React Query to read what's synchronous. It's not because you can use React Query that you should. This includes localStorage, but many other cases as well. Can read synchronously & subscribe to changes?.➡️ useSyncExternalStore(). No loading/error state to handle

Small experiment that I did: two-way JSI Brownfield data store in C++ which uses useSyncExternalStore to reflect changes. On the top we have a React Native view and on the bottom a native one. You can easily update the store from both JS and native components.

Good session on @uidotdev with @tylermcginnis . covered REFERENTIAL EQUALITY, useLayoutEffect, useSyncExternalStore and useEffectEvent. Having issues with a particular test case in the DATA TABLE challenge. Can't wait to start with the rebuilding useHooks chapter. till

I've been using the useSyncExternalStore hook a lot for the data fetching library/tool I'm working on and I would say, this is definitely the most unused hook according to blog posts and YT vids out there. Perfect for my use case though 😁

#100DaysOfCode (56/100).➡️Learning how the existing usehooks library was built. ➡️Learned about useSyncExternalStore hook. ✅Created usePreferredLanguage hook. ✅Created useFavicon hook. #buildinginpublic #React

I'm learning about the useSyncExternalStore hook. Very cool. So many ideas just got to my head.

🚀 Next.js Weekly #42:. → Instant Search with `useOptimistic`.→ Vercel: Attack Challenge Mode.→ useSyncExternalStore.→ Self-Hosted OAuth Authz.→ React Will Be Compiled. and more

React Componentのclientかserverかの判定、現代だと.const isClient = useSyncExternalStore(() => () => { }, () => true, () => false).↑これになりそうなんだけど、マジであってんのか？.

We are back! Today Max Zauner explains and demos plenty of React hooks like useSyncExternalStore, useTransition, useDeferredValue and more 👏

TIL: useSyncExternalStore runs subscribe not synchronously, but asynchronously. 😕. Based on Sync in the name, I assumed it would have run synchronously. Output is 1, 3, 2, but I need 1, 2, 3.

Ok time's up! The answer is useSyncExternalStore. The part I didn't show was the onChange function, which triggers an update to an external store in a parent component. This causes React to re-render synchronously, but the setState in the Value component still runs

@chribjel @firatoezcan @tan_stack There are dozens of articles online on this topic and a few oss libs implementing useLocalStorage() using useSyncExternalStore. Last newsletter issue had one BTW:.

.@kentcdodds finally made useSyncExternalStore click for me. It stops UI tearing when React meets browser APIs or custom stores, and the real trick is keeping subscribe and getSnapshot stable outside the component