Skip to content

Documentation / @finchart/react / usePluginState

Function: usePluginState()

usePluginState<TApi, T>(api, subscribe, read, fallback): T

Defined in: hooks/use-plugin-state.ts:28

플러그인의 스냅샷+구독 상태를 React 상태로 — 명령 차선의 구독 관용구다.

drawingToolsmode()/selection()처럼 "지금 값을 읽는 문 + 바뀌면 알리는 문"의 짝이 대상이다. api가 바뀌면(포커스 전환 등) 구독도 같이 갈아탄다.

tsx
const mode = usePluginState(tools, subscribeMode, readMode, null);
// 모듈 상수: const subscribeMode = (t, cb) => t.modeChanges.subscribe(cb);
//           const readMode = (t) => t.mode();

계약 둘.subscribe·read는 안정 참조여야 한다(모듈 상수나 useCallback) — 렌더마다 새 함수를 주면 매 렌더 구독을 다시 맺는다. ② read는 프리미티브나 안정 참조를 돌려줘야 한다 — 호출마다 새 객체를 만들면 useSyncExternalStore가 끝없이 다시 읽는다.

getServerSnapshot을 준다. 없으면 renderToString이 *"Missing getServerSnapshot"*으로 던진다 — <ChartContainer> 밖에서 이 훅을 부르면 (도구 모드를 부모로 올린 툴바 같은 경우) 서버 렌더가 통째로 죽는다. 서버에는 api가 없으므로 클라이언트용과 같은 함수가 그대로 답이다.

fallback은 첫 렌더의 것으로 고정한다getSnapshotuseCallback으로 안정시키면 커밋마다 도는 저장소 일치 검사·passive effect도 같이 사라진다.

Type Parameters

TApi

TApi

T

T

Parameters

api

TApi | null

subscribe

(api, onChange) => () => void

read

(api) => T

fallback

T

api가 아직 없을 때의 값.

첫 렌더의 것이 계속 쓰인다 — 뒤에 다른 값을 줘도 무시된다. 바뀔 수 있는 값을 넣으면 api가 붙기 전까지 첫 값이 그대로 보이므로, 그런 경우엔 상수를 주고 바깥에서 갈아 끼운다.

Returns

T