인프런 커뮤니티 질문&답변

음...그럼 getViewportRect()와 같이 값을 넘겨서 일부러 리렌더링을 막는 효과를 내는 것이 의도였을까요?

제가 useSyncExternalStore() 동작방식을 잘 못 알고 있는건지,
제가 강의 코드를 잘 못 이해한 부분이 있는건지,
번거로우시겠지만, 아래 내용 한번만 더 확인 부탁드리겠습니다. 🙇‍♀

제가 알기로 useSyncExternalStore의 동작 방식은...
1. useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)에서
getSnapshot은 렌더링전에 값 계산해서 초기 렌더링시 싱크맞춰서 적용됨
2. 이후 subscribe가 외부상태변화 구독하다가 scroll, resize와 같은 이벤트 발생하면 callback()실행.
3. callback을 받은 react는 getSnapshot을 다시 호출하여 이전값과 비교하고,
- 이전vs현재값이 변경되었으면 리렌더링 발생
- 이전vs현재값이 동일하면 아무일 없음
4. 세번째 인자값(getServerSnapshot)은 서버사이드렌더링때 초기값 설정으로 작동.

excerpt) https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js

function mountSyncExternalStore<T>( //1. 초기 렌더링시 실행
  subscribe: (() => void) => () => void,
  getSnapshot: () => T,
  getServerSnapshot?: () => T,
): T {
 ...
    }
function updateSyncExternalStore<T>( //2. 구독의 callback받았을 때 실행
      subscribe: (() => void) => () => void,
      getSnapshot: () => T,
      getServerSnapshot?: () => T,
    ): T {
      const fiber = currentlyRenderingFiber;
      const hook = updateWorkInProgressHook();
      let nextSnapshot;

      const isHydrating = getIsHydrating();
      if (isHydrating) {
      ...
        nextSnapshot = getServerSnapshot();
      } else {
        nextSnapshot = getSnapshot(); //현재 업데이트값 가져옴
       ...
      }
      const prevSnapshot = (currentHook || hook).memoizedState; //이전getSnapshot값
      const snapshotChanged = !is(prevSnapshot, nextSnapshot); //이전-현재값비교      
        if (snapshotChanged) {
            hook.memoizedState = nextSnapshot;
            markWorkInProgressReceivedUpdate(); //리렌더링 예약
          }
      const inst = hook.queue;
    
      updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [
        subscribe,
      ]);
    


function subscribeToStore<T>(
  fiber: Fiber,
  inst: StoreInstance<T>,
  subscribe: (() => void) => () => void,
): any {
  const handleStoreChange = () => {
    // The store changed. Check if the snapshot changed since the last time we
    // read from the store.
    if (checkIfSnapshotChanged(inst)) {
      // Force a re-render.
      startUpdateTimerByLane(SyncLane, 'updateSyncExternalStore()');
      forceStoreRerender(fiber);
    }
  };
  // Subscribe to the store and return a clean-up function.
  return subscribe(handleStoreChange);
}

react의 useSync...()는 두가지 방식 모두 리렌더링을 해야되는지 확인을 위해,
2번째 인자를 먼저 실행해보고 최신 값으로 갱신해주기 때문에
값을 넘겨도, 참조를 넘겨도 둘 다 동일하게 잘 동작 합니다.

그래서 ... ㅎㅎ 이렇게까지 질문할 일은 아니었던 것 같지만...ㅎㅎㅎ;;;;

제가 질문했던 의도는 stored 변수가 리렌더마다 초기화 될 가능성, 그래서 의도한대로 동작하지 않을 수 있다는 생각이 들어서였습니다.

강의 코드대로라면 클로저로 작성했지만 stored가 초기화 될 수 있고, 이에 대한 오버헤드가 아주 조금 더 들지 않을까... 하는 생각이 들어 질문하게 되었고,

동작에 유의미한 차이는 전혀 없다고 생각됩니다.

실험) stored는 정말 초기화 되는가?
stored와 같은 스코프를 가지도록 count 변수를 만들고, count++해서 출력해보았을 때...

ㄱ.즉시실행함수로 바꾸고 useSync...()의 인자로 참조를 넘길 때

const getViewportRect = (() => {  //즉시실행함수
  let stored: Rect = DefaultRect;
  let count: number = 0;
  return () => {
    ....

    count++;
    console.log(`${count}번째 랜더링중 top:${stored.top}`);
    return stored;
  };
})();

useSyncExternalStore(subscribe, getViewportRect);//참조

ㄴ. 클로저 함수 그대로, useSync..()의 인자로 함수 실행 값 넘길 때

const getViewportRect = () => { //클로저 함수 그대로
  let stored: Rect = DefaultRect; 
  let count: number = 0;
  return () => {
     .... 
    count++;
    console.log(`${count}번째 랜더링중 top:${stored.top}`);
    return stored;
  };
};
useSyncExternalStore(subscribe, getViewportRect()); //실행값넘기기

ㄱ. count++가 누적 연산이 되고, 뷰포트 연산값도 잘 계산해서 가져옴

ㄴ. count++가 1,2,3,4이후 초기화 되어 1,2,3,4로 반복됨.
하지만 뷰포트 연산값은 위와 동일하게 잘 가져옴

제가 잘 못 이해하고 잘 못 생각한 지점이 있는지 확인부탁드립니다. 🙏

말씀하신 내용 읽고 저도 다시 테스트해보니, 말씀하신게 맞네요.
제가 틀렸습니다.
안이하게 '당연히 그렇다'고 생각하고 깊이 고민하지 않은 채 답변 한 점 사과드립니다. (_ _)

리렌더링을 최소화하기 위해서는 처음부터 '완성된 함수'를 전달하는 것이 맞겠네요.

덕분에 작동 원리를 조금 더 이해할 수 있게 되었네요. 감사합니다!

과분하게 사과의 말씀까지 전해주시니 송구스러운 마음입니다. 부족한 글에 시간 할애해 읽어주시고, 빠르게 답변까지 주신 점 감사합니다.

덕분에 저 역시 항상 많이 배우고 있습니다. 감사합니다🙇‍♀

답변 주셔서 감사드립니다. 강의자료 완성본은 덕분에 잘 찾았습니다 ㅎㅎ

1. useSyncExternalStore의 두번째 인자(getViewportRect)를 참조로 바꾸고자 했던 사유는
함수의 실행값으로 인자를 넘기게 되면 리렌더시 매번 새로운 클로저 함수가 생성될테니(=stored 변수가 계속 초기화 될테니) 생각하지 못한 sideeffect가 있지 않을까? 해서 였습니다.

그래서 초기 실행은 필요하니 즉시실행함수로 바꾸고, 참조만 넘기는 것을 생각했습니다.

그런데 ? 생각해보니 tooltip을 사용할 때 해당 컴포넌트의 리렌더가 빈번할까... 고려했을 때는 유의미한 차이는 없을 것 같단 생각이 드네요! ㅎㅎ 말씀 주신 것처럼 초기 실행시엔 두 부분 거의 유사한 점 잘 확인했습니다.

2. 이건 꽤 오랫동안 한 켠에서 고민하던 부분인데 답변으로 많은 도움이 되었습니다 감사합니다!