Description

Currently, YorkieProvider in @yorkie-js/react wraps the entire document state using React Context. This could cause unnecessary re-renders of all child components when only a small part of the document changes.

Steps to Reproduce

1. Wrap a component tree with YorkieProvider and pass a document.
2. Update a small part of the document (e.g., a single field in a deeply nested object).
3. Use tools like React Scan or React DevTools Profiler to observe re-renders.
4. Notice that all components consuming the context may be re-rendered unnecessarily.

Expected Behavior

• Only the components that depend on the updated part of the document should re-render.
  Possible Solution Ideas.
• Context Splitting: Instead of passing the entire document.root, split the context into smaller parts (e.g., document.selection, document.content).
• Selector-based Context: Implement a mechanism similar to Redux’s useSelector, where components subscribe only to specific parts of the state.
• Memoization & Optimization: Use React.memo and useMemo to prevent unnecessary re-renders.

Environment

• @yorkie-js/react version: [0.6.1]
• React version: [18.X.X]
• Browser: [Chrome/Firefox/Other]

Would love to hear thoughts on this and discuss possible solutions! 🚀

Why