Prevent React hydration on specific element (HACK)

NoHydrate.tsx

/**
 * Render a div which preserves its server-side content on browser hydration.
 */
function NoHydrate(props: { id?: string; children: React.ReactNode }) {
    const id = props.id ?? "no-hydrate";
    const container = useRef<HTMLDivElement>(null);
    const save = useRef<Node[]>();

    // During the first render capture clones of the children. Reading the DOM
    // during React render is a hack but the only way to access the DOM before
    // React destroys it.
    if (typeof window !== "undefined" && !save.current) {
        const style = document.getElementById(id);
        if (style && !save.current) {
            save.current = Array.from(style.childNodes).map((child) =>
                child.cloneNode(true),
            );
        }
    }

    // After the React render React has potentially destoyed the children so we
    // restore them
    useLayoutEffect(() => {
        if (save.current) {
            for (const node of save.current) {
                container.current?.appendChild(node);
            }
        }
    }, []);

    return useMemo(
        () => (
            <div id={id} ref={container} suppressHydrationWarning>
                {props.children}
            </div>
        ),
        [id],
    );
}