Accept multiple observers per fragment

Author: jackpope

fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js

@@ -54,6 +54,7 @@ export default function IntersectionObserverCase() {
     const lastFragmentRefValue = fragmentRef.current;
     return () => {
       lastFragmentRefValue.unobserveUsing(observerRef.current);
+      observerRef.current = null;
     };
   }, []);
 

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2186,7 +2186,7 @@ type StoredEventListener = {
 export type FragmentInstanceType = {
   _fragmentFiber: Fiber,
   _eventListeners: null | Array<StoredEventListener>,
-  _observer: null | IntersectionObserver | ResizeObserver,
+  _observers: null | Set<IntersectionObserver | ResizeObserver>,
   addEventListener(
     type: string,
     listener: EventListener,
@@ -2205,7 +2205,7 @@ export type FragmentInstanceType = {
 function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) {
   this._fragmentFiber = fragmentFiber;
   this._eventListeners = null;
-  this._observer = null;
+  this._observers = null;
 }
 // $FlowFixMe[prop-missing]
 FragmentInstance.prototype.addEventListener = function (
@@ -2293,14 +2293,10 @@ FragmentInstance.prototype.observeUsing = function (
   this: FragmentInstanceType,
   observer: IntersectionObserver | ResizeObserver,
 ): void {
-  if (this._observer !== null && this._observer !== observer) {
-    throw new Error(
-      'You are attaching an observer to a fragment instance that already has one. Fragment instances ' +
-        'can only have one observer. Use multiple fragment instances or first call unobserveUsing() to ' +
-        'remove the previous observer.',
-    );
+  if (this._observers === null) {
+    this._observers = new Set();
   }
-  this._observer = observer;
+  this._observers.add(observer);
   traverseFragmentInstanceChildren(
     this,
     this._fragmentFiber.child,
@@ -2320,21 +2316,21 @@ FragmentInstance.prototype.unobserveUsing = function (
   this: FragmentInstanceType,
   observer: IntersectionObserver | ResizeObserver,
 ): void {
-  if (this._observer === null || this._observer !== observer) {
+  if (this._observers === null || !this._observers.has(observer)) {
     if (__DEV__) {
       console.error(
         'You are calling unobserveUsing() with an observer that is not being observed with this fragment ' +
           'instance. First attach the observer with observeUsing()',
       );
     }
   } else {
+    this._observers.delete(observer);
     traverseFragmentInstanceChildren(
       this,
       this._fragmentFiber.child,
       unobserveChild,
       observer,
     );
-    this._observer = null;
   }
 };
 function unobserveChild(
@@ -2403,8 +2399,10 @@ export function commitNewChildToFragmentInstance(
       childElement.addEventListener(type, listener, optionsOrUseCapture);
     }
   }
-  if (fragmentInstance._observer !== null) {
-    fragmentInstance._observer.observe(childElement);
+  if (fragmentInstance._observers !== null) {
+    fragmentInstance._observers.forEach(observer => {
+      observer.observe(childElement);
+    });
   }
 }
 

packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js

@@ -693,34 +693,6 @@ describe('FragmentRefs', () => {
       expect(logs).toEqual([]);
     });
 
-    // @gate enableFragmentRefs
-    it('errors when observeUsing() is called with multiple observers', async () => {
-      const fragmentRef = React.createRef();
-      const observer = new IntersectionObserver(() => {});
-      const observer2 = new IntersectionObserver(() => {});
-      function Test() {
-        return (
-          <React.Fragment ref={fragmentRef}>
-            <div />
-          </React.Fragment>
-        );
-      }
-
-      const root = ReactDOMClient.createRoot(container);
-      await act(() => root.render(<Test />));
-      fragmentRef.current.observeUsing(observer);
-      // Same observer doesn't throw
-      fragmentRef.current.observeUsing(observer);
-      // Different observer throws
-      expect(() => {
-        fragmentRef.current.observeUsing(observer2);
-      }).toThrowError(
-        'You are attaching an observer to a fragment instance that already has one. Fragment instances ' +
-          'can only have one observer. Use multiple fragment instances or first call unobserveUsing() to ' +
-          'remove the previous observer.',
-      );
-    });
-
     // @gate enableFragmentRefs
     it('warns when unobserveUsing() is called with an observer that was not observed', async () => {
       const fragmentRef = React.createRef();

scripts/error-codes/codes.json

@@ -537,6 +537,5 @@
   "549": "Cannot start a gesture with a disconnected AnimationTimeline.",
   "550": "useSwipeTransition is not yet supported in react-art.",
   "551": "useSwipeTransition is not yet supported in React Native.",
-  "552": "Cannot use a useSwipeTransition() in a detached root.",
-  "553": "You are attaching an observer to a fragment instance that already has one. Fragment instances can only have one observer. Use multiple fragment instances or first call unobserveUsing() to remove the previous observer."
-}
+  "552": "Cannot use a useSwipeTransition() in a detached root."
+}