React useSyncExternalStore 후크와 RxJS를 함께 사용하는 방법

얼마 전에 useSubscription를 발견하고 RxJS와 함께 사용한 후 Rx.BehaviorSubject와 함께 사용하고 구독 개체를 만든 다음 useSubscription(subscription)를 호출하려면 적어도 두 개의 명령문이 필요했습니다.

// create the subscription object
const subscription = useMemo(
  () => ({
    getCurrentValue: () => behaviorSubject.getValue(),
    subscribe: callback => {
      const subscription = behaviorSubject.subscribe(callback);
      return () => subscription.unsubscribe();
    }
  }),

  // Re-subscribe any time the behaviorSubject changes
  [behaviorSubject]
);
// call the hook
const value = useSubscription(subscription);

자세한 내용은 여기https://www.npmjs.com/package/use-subscription를 참조하십시오.

이 새로운useSyncExternalStore 후크를 사용하면 버전 18.1.0부터 React에 더 간단하고 통합됩니다.

const counter$ = new BehaviorSubject(0);

function useCounter() {
  const count = useSyncExternalStore(
    useCallback(
      (callback) => {
        const subscription = counter$.subscribe(callback);
        return () => subscription.unsubscribe();
      },
      [counter$]
    ),
    () => counter$.getValue()
  );
  return count;
}

우리가 본 것처럼 구독 핸들러 함수를 useCallback 후크로 래핑하여 모든 변경 또는 렌더링에서 재구독 및 구독 취소를 방지해야 합니다.

여기에서 전체 예를 참조하십시오: https://codesandbox.io/s/react18-2-rxjs-s3b781 .