Understanding UseSyncExternalStore In TipTap Editor

useSyncExternalStore used in TipTap's EditorContent, useEditorState & useEditor to sync editor instance with component state for performance reasons.

In this article, we will review useSyncExternalStore usage in TipTap.

I found useSyncExternalStore is used in 3 files:

EditorContent.tsx
useEditorState.ts
useEditor.ts

Before we look at these files, let’s learn what is useSyncExternalStore.

  
  
  useSyncExternalStore

useSyncExternalStore is a React Hook that lets you subscribe to an external store.
Read more about useSyncExternalStore.

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

    
    

    
    




  
  
  EditorContent.tsx


import { useSyncExternalStore } from 'use-sync-external-store/shim'...

Read the full article