Recoil은 Context API를 어떻게 사용하길래 상태 변경이 일어나도 RecoilRoot의 자식 컴포넌트들에 대한 불필요한 리렌더링을 유발하지 않을까?

// Context API를 사용하는 경우

const Context = createContext(0);
const useGetContextState = () => useContext(Context);

const App = () => {
  const [state, setState] = useState(0);

  return (
    <Context.Provider value={state}>
      <button onClick={() => setState((prev) => prev + 1)}>+</button>
      <PassingComp />
    </Context.Provider>
  );
}

const PassingComp = () => {
  console.log('Component A is rendered')
  // state를 사용하지 않지만 state의 상태가 바뀔때마다 리렌더링 됩니다.

  return <DestinationComp />
}

const DestinationComp = () => {
  const state = useGetContextState()

  return <div>{state}</div>
}

// Recoil_RecoilRoot.js
// 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.

const defaultStore = Object.freeze({
  storeID: getNextStoreID(),
  getState: notInAContext,
  replaceState: notInAContext,
  getGraph: notInAContext,
  subscribeToTransactions: notInAContext,
  addTransactionMetadata: notInAContext,
});

const AppContext = React.createContext({ current: defaultStore });
const useStoreRef = () => useContext(AppContext);

const RecoilRoot = () => {
  storeRef = ... // 스토어 생성

  return (
    <AppContext.Provider value={storeRef}>
      {children}
    </AppContext.Provider>
  );
}

// Recoil_Hooks.js

function useRecoilValue(recoilValue) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.

  const storeRef = useStoreRef();
  const loadable = useRecoilValueLoadable(recoilValue);
  return handleLoadable(loadable, recoilValue, storeRef);
}

// Recoil_Hooks.js

function useRecoilValueLoadable(recoilValue) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.

  return {
    CONCURRENT_LEGACY: useRecoilValueLoadable_CONCURRENT_LEGACY,
    SYNC_EXTERNAL_STORE: useRecoilValueLoadable_SYNC_EXTERNAL_STORE,
    MUTABLE_SOURCE: useRecoilValueLoadable_MUTABLE_SOURCE,
    LEGACY: useRecoilValueLoadable_LEGACY,
  }[reactMode().mode](recoilValue);
}

// Recoil_Hooks.js

function useRecoilValueLoadable_LEGACY(recoilValue) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.
  
  const [, forceUpdate] = useState([]);

  useEffect(() => {
    const subscription = subscribeToRecoilValue(
      _state => {
        const newLoadable = getLoadable();
        forceUpdate(newLoadable);
      },
      ...,
    );  
  }, [...])

  return loadable
}

// Recoil_Hooks.js

function useSetRecoilState(recoilState) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.
 
  const storeRef = useStoreRef();

  return useCallback(
    (newValueOrUpdater) => {
      setRecoilValue(storeRef.current, recoilState, newValueOrUpdater);
    },
    [storeRef, recoilState],
  );
}

// Recoil_RecoilValueInterface.js

function setRecoilValue(store, recoilValue, valueOrUpdater) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.
 
  queueOrPerformStateUpdate(store, {
    type: 'set',
    recoilValue,
    valueOrUpdater,
  });
}

// Recoil_RecoilValueInterface.js

function queueOrPerformStateUpdate(store, action) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.
 
  if (batchStack.length) {
    const actionsByStore = batchStack[batchStack.length - 1];
    let actions = actionsByStore.get(store);
    if (!actions) {
      actionsByStore.set(store, (actions = []));
    }
    actions.push(action);
  } else {
    applyActionsToStore(store, [action]);
  }
}

// Recoil_RecoilValueInterface.js

function applyActionsToStore(store, actions) {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.
  
  store.replaceState(state => {
    const newState = copyTreeState(state);

    for (const action of actions) {
      applyAction(store, newState, action);
    }

    return newState;
  });
}

// Recoil_RecoilRoot.js

const replaceState = replacer => {
  // 이해의 편의를 위해 실제 소스코드에서 설명에 필요한 부분만 발췌해왔습니다.

  const nextTree = storeStateRef.current.nextTree
  let replaced;
  
  replaced = replacer(nextTree);

  storeStateRef.current.nextTree = replaced;
  
  if (reactMode().early) { // true
    notifyComponents(storeRef.current, storeStateRef.current, replaced);
  }
  
  notifyBatcherOfChange.current();
};