useSyncExternalStore

useSyncExternalStore

외부 스토어를 구독할 수 있는 React Hook

React는 기본적으로 관심사 밖에서 동작하는 External Store의 상태 흐름을 관찰하지 않는다.

그러나 useSyncExternalStore 훅을 사용하면 External Store를 구독(관찰)하여 상태 변화에 대한 알림을 제공 받는다.

해당 훅이 나오게된 이유

• concurrent feature의 tearing 현상을 해결하기 위해 필요하다.

• Extenral Store의 변경사항을 구독하고, tearing이 발생하지 않도록 Extenral Store의 변경사항을 감지하여 리렌더링을 시켜주는 역할을 한다.

작동 방식

function useSyncExternalStore<Snapshot>(
  subscribe: (onStoreChange: () => void) => () => void,
  getSnapshot: () => Snapshot,
  getServerSnapshot?: () => Snapshot
}: Snapshot

subscribe

스토어에 변경사항을 구독하기 위한 콜백함수

• 전달된 콜백함수를 통해 React에게 스토어가 변경되었으므로 리렌더링이 필요하다고 알린다.

함수 컴포넌트는 매 렌더링마다 내부 함수를 다시 선언하게 되어서, 구독 함수도 매 렌더링마다 달라지게 되는데 이로 인해 리액트는 새로 전달된 구독 함수로 스토어를 다시 구독하는 side-effect가 발생하게 된다.

이러한 불필요한 스토어 구독을 방지하기 위해서는 useCallback을 사용하여 함수를 메모이제이션하거나, 클래스를 사용하여 항상 같은 메서드를 참조하도록 만드는 방법이 있다.

getSnapshot

스토어의 값을 반환하는 콜백함수

React가 스토어에서 값을 가져오는 방법을 제공한다.

• 특정 시점의 스토어의 상태를 가져오기 떄문에 snapshot이란 네이밍을 사용한다.

• subscribe에 등록한 콜백함수가 호출될 때마다 리엑트는 getSnapshot 콜백함수를 호출하여 최신 스토어 상태를 가져오고 리렌더링 시킨다.

• 리액트는 컴포넌트가 렌더링이 시작될 때 getSnapshot 함수를 호출하여 반환된 값(스토어의 상태)를 캐싱하고, 렌더링 이후 스토어가 변경되지 않았는지 확인하기 위해 한번 더 호출해서 이전에 캐시한 스토어 상태와 비교해 다른 경우에만 컴포넌트를 다시 리렌더링한다.

• 즉, 렌더링이 시작될 때와 렌더링 이후에 한 번더 getSanpshot을 호출하여 최신 스토어 상태와 Sync(동기화)시킨다.

스토어의 상태를 캐싱할 때는 값을 복사하는 대신 그대로 저장하며, 이전 스토어의 상태와 비교할 때는 얕은 비교(Object.is)를 사용한다.

따라서 스토어의 상태를 불변(immutable)하게 유지해야 리엑트가 스토어의 변경사항을 감지할 수 있다.

getSnapshot 콜백 함수는 원본 데이터를 반환해야 한다.

만약 항상 새로운 값을 반환한다면 무한 리렌더링이 발생할 수 있으므로 주의

// getSnapshot이 항상 새로운 객체를 반환하므로 무한 리렌더링 발생
const snapshot = useSyncExternalStore(subscribe, () => ({newValue: store.value}))

getServerSnapshot

옵셔널한 값으로, 컴포넌트가 서버에서 렌더링될 때 호출되는 getSnapshot

• 컴포넌트가 SSR 환경에서 렌더링될 때 올바른 HTML을 제공하기 위해 사용된다.

• getSnapshot의 SSR 버전

Tearing

의도치 않은 상태 불일치 시점에서 UI가 렌더링되는 것을 의미

conccurrent 기능을 적용하면 렌더링 작업이 다른 작업(사용자 인터렉션)과 동시에 실행될 수 있는데 렌더링 작업이 완료되기 전에 다른 작업(상태 변경)이 실행되면서 화면의 일부분만 업데이트되거나 깨지는 현상, 즉 변경된 상태에 대한 불일치에 의해 발생하는 문제이다.

External Store에만 Tearing Issue가 발생한다?

리엑트 내부적으로 상태관리를 하면 우선순위가 같은 것들끼리 묶어 일괄적으로 처리하므로 tearing 현상을 방지할 수 있다.

하지만, 리액트 관심사 밖인 외부 스토어를 사용하면 관심사 밖인 외부 상태 변경의 우선순위를 정할 수 없기 때문에 데이터 변경과 렌더링 작업이 충돌하여 tearing 현상이 발생할 수 있다.

Concurrent feature

빠르게 렌더링되는 부분을 차단하지 않고 느린 부분을 (웹 워커)백그라운드에 렌더링시킴으로써 빠른 부분과 느린 부분을 분리하여 각 부분이 자신의 속도로 사용자의 인터렉션에 즉각 반응할 수 있도록 사용성을 높힌 것

React는 기본적으로 컴포넌트를 동기적으로 렌더링한다. 즉, 한번 렌더링이 시작되면 예외를 제외하고 렌더링을 중단시킬 수 없어, 렌더링이 끝난 후에만 다른 작업을 할 수 있다.

느린 컴포넌트를 렌더링하면 해당 렌더링이 끝나야지만 UI의 다른 부분에 대한 새로운 업데이트를 처리할 수 있기 때문에 느린 컴포넌트 렌더링이 다른 UI의 빠른 부분을 차단하게 된다.

우선 순위 업데이트

React Concurrent는 우선순위가 높은 업데이트와 낮은 업데이트로 나뉜다.

업데이트는 리렌더링이 발생하는 모든 것을 의미한다.

• 우선순위가 높은 업데이트 → useState, useReducer 등, 일반적으로익숙한 방식을 사용하면 높은 우선순위 업데이트가 발생한다.

• 우선순위가 낮은 업데이트 →startTransition, useDefferedValue 호출로 인해 발생한다.

  • 우선순위가 높은 업데이트가 완료된 후에만 실행된다.

  • 중간에 우선순위가 높은 업데이트에 의해 중단되면 기다린다음 처음부터 다시 렌더링한다.

업데이트는 같은 우선순위의 업데이트를 모두 한번에 일괄처리한다.

startTransition

useTransition과 독립형 startTransition을 이용해서 Concurrent 기능을 사용할 수 있다.

• startTransition을 감싸면 특정 업데이트를 우선순위가 낮은 업데이트로 변경 가능

• startTransition의 콜백 내부의 상태 업데이트는 반드시 콜백 내의 스코프에서 호출해야 한다.

• startTransition은 상태만 적용 가능하다. (ref는 해당 ❌)

// import {startTransition} from 'react'; 독립적으로 사용 가능
import {useTransition} from 'react';

//...
const [isPending, startTransition] = useTransition();

<input
  value={filter}
  onChange={(e) => {
    setFilter(e.target.value);
      startTransition(() => {
      // 여기서 `delayedFilter`의 값을 변경하는 우선순위가 낮은 업데이트를 발생
      setDelayedFilter(e.target.value);
    });
  }}
/>
//isPending을 사용해 트랜지션이 보류 중임을 알릴 수 있다.
{isPending && 'Recalculating...'}

useDefferedValue

명령형 방식인 startTransition와 달리 선언형으로 동시성 기능을 사용할 수 있다.

• 우선순위가 낮은 업데이트의 결과를 반환하며, 이 상태는 인자로 전달된 값이다.

export default function App() {
  // 이 상태는 우선순위가 "높은" 업데이트에 의해 업데이트된다.
  const [filter, setFilter] = useState('');
  // 이 상태는 우선순위가 "낮은" 업데이트에 의해 업데이트된다.
  const deferredFilter = useDeferredValue(filter);

  return (
    <div className="container">
      <input
        value={filter}
        onChange={(e) => {
          setFilter(e.target.value);
        }}
      />
      <List filter={deferredFilter} />
    </div>
  );
}

Suspense 활용

서스펜스를 사용하면 렌더링 이후에 실행되는 useEffect 내부에서 데이터 패칭하는 대신 렌더링 도중에 데이터 패칭을 가능하게 해준다.

• 데이터를 패칭하는 동안 사용자에게 지정한 Fallback UI를 표시한다.

• Suspense를 사용한 컴포넌트가 데이터 패칭을 시도할 때마다 fallback을 표시한다. (캐싱전략을 사용하지 않을경우)

• 서스펜스와 함께 stale-while-revalidate 전략을 사용하려면 concurrent 기능을 사용해야한다.

stale-while-revalidate란?

• 사용자 경험을 향상시키기 위한 HTTP 캐싱 전략, 사용자에게 캐시된 데이터를 반환하고 동시에 백그라운드에서 새로운 데이터를 가져와 캐시를 갱신한다.

• 즉, 페이지를 변경할 때 로딩 상태로 돌아가지 않고, 새 데이터를 표시할 수 있을 때 까지 이전 데이터를 표시하는 방식