برای درک کارکرد این هوک باید با ساختار state manager هایی مانند ریداکس آشنا باشید.
از هوک useSyncExternalStore برای خواندن مقدار استیت در store های خارجی مانند ریداکس استفاده میشود:
هوک useSyncExternalStore سه مقدار ورودی دارد و مقدار state را برمیگرداند:
تابع subscribe: اولین ورودی تابع subscribe مربوط به store است. تابع subscribe میبایست تابع unsubscribe را برگشت دهد.
تابع getSnapshot: دومین ورودی تابعی است که مقدار استیت را برمیگرداند. با هربار تغییر مقدار استیت کامپوننت ریرندر میشود، بنابراین فقط مقداری که در کامپوننت نیاز دارید برگردانید.
تابع getServerSnapshot: سومین ورودی که اختیاری است، تابعی است که برای ارسال مقدار اولیه استیت از سرور به کلاینت استفاده میگردد.
هوک useSyncExternalStore دیتای تابع getSnapshot را برمیگرداند و با هربار تغییر خروجی این تابع، کامپوننت ریرندر خواهد شد.
برای نمونه، با استفاده از createStore در ریداکس، store خود را ایجاد کردیم. میتوانیم مانند نمونه با استفاده از تابع subscribe تغییرات دیتای ریداکس را دنبال و مقدار counter در ریداکس را دریافت و استیت counter کامپوننت App را آپدیت کرده و نمایش دهیم:
اما کد بالا مشکلاتی مانند tearing به همراه دارد، پیشنهاد ریکت، برای استفاده از دیتای store های خارجی مانند redux، استفاده از هوک useSyncExternalStore مانند زیر است:
این هوک در ورودی اول تابع subscribe و در ورودی دوم تابعی که مقدار counter را برمیگرداند، دریافت کرده و همواره آخرین مقدار counter را برای کامپوننت نمایش میدهد.