import { Fragment, type ReactNode, useSyncExternalStore } from 'react';
import { onViewerChange, viewerEpoch } from '../../utils/writeThroughHold';

/** Remounts what it wraps whenever the viewer, acting-as subject or practice changes, so no page keeps the last viewer's state. */
export const ViewerScope = ({ children }: { children: ReactNode }) => {
    const epoch = useSyncExternalStore(onViewerChange, viewerEpoch);
    return <Fragment key={epoch}>{children}</Fragment>;
};