3.1.10 useDebugValue

커스텀 훅에 디버그 값을 달아둘 수 있다.
DevTools 화면에서 나옴

https://react-ko.dev/reference/react/useDebugValue
https://codesandbox.io/p/devbox/react-dev-forked-7k2h9z?file=%2Fsrc%2FuseOnlineStatus.js%3A28%2C1&welcome=true

import { useSyncExternalStore, useDebugValue } from "react";

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(
    subscribe,
    () => navigator.onLine,
    () => true,
  );

  const sampleObject = {
    name: "sampleName",
    id: 12,
    skills: ["react", "redux"],
  };
  useDebugValue(isOnline ? "Online2" : "Offline2");
  useDebugValue(isOnline ? sampleObject : "Offline3");
  return isOnline;
}

function subscribe(callback) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

표시

• devtools의 hooks 부분에 표시
• Custom Hook의 이름 아래로
• 입력 순서대로 값이 표시됨

Code Sandbox 엄청 발전했다.

• VS Code Remote 추가됐는데
• yarn install 이랑
• vite 실행까지 자동으로 해줌
• vite 겁나 빠르다.

useSyncExternalStore

• https://react-ko.dev/reference/react/useSyncExternalStore#subscribing-to-a-browser-api
  대부분의 React 컴포넌트는 props, state, context에서만 데이터를 읽습니다. 하지만 때로는 컴포넌트가 시간이 지남에 따라 변경되는 React 외부의 저장소에서 데이터를 읽어야 하는 경우도 있습니다. 여기에는 다음이 포함됩니다:

위 사용 예시

• 변이 가능한 값을 노출하는 브라우저 API와 그 변이 사항을 구독하는 이벤트.

외부 스토어 구독

• react-redux도 저걸로 하는게 아닐지?
• https://velog.io/@jay/useSyncExternalStore

• 문제가 되는 상황은 이런걸 말하는 듯
• https://www.youtube.com/watch?v=oPfSC5bQPR8&t=694s

• 미니 구현내용
  • https://junghyeonsu.com/posts/react-use-sync-external-store/
  • 외부 스토어에 대해서 리액트의 내부 훅들을 사용해서 리액트의 렌더링 시스템에 올라타게 해줍니다.

export function useSyncExternalStore<T>(
	subscribe: (() => void) => () => void,
	getSnapshot: () => T,
	getServerSnapshot?: () => T,
): T {
	const value = getSnapshot();
	const [{inst}, forceUpdate] = useState({inst: {value, getSnapshot}});
	
	useLayoutEffect(() => {
		inst.value = value;
		inst.getSnapshot = getSnapshot;
		
		if (checkIfSnapshotChanged(inst)) {
			forceUpdate({inst});
		}
	}, [subscribe, value, getSnapshot]);
	
	useEffect(() => {
		if (checkIfSnapshotChanged(inst)) {
			forceUpdate({inst});
		}
		const handleStoreChange = () => {
			if (checkIfSnapshotChanged(inst)) {
				forceUpdate({inst});
			}
		};
		return subscribe(handleStoreChange);
	}, [subscribe]);

	useDebugValue(value);
	return value;
}