mirror of
https://github.com/enricoros/big-AGI.git
synced 2026-05-11 06:00:15 -07:00
Enrico Ros
21 lines
712 B
TypeScript
21 lines
712 B
TypeScript
import React, { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Prevents the children from being rendered on the server.
|
|
*
|
|
* This is vital for using localStorage, which is not available on the server, and which
|
|
* state is loaded synchronously on the client.
|
|
*
|
|
* The discrepancy between server and client state can cause hydration errors for React,
|
|
* and we avoid those by using this wrapper.
|
|
*
|
|
* Suggestion: use sparingly, to show you are aware of the root causes of hydration errors.
|
|
*/
|
|
export const NoSSR = ({ children }: { children: any }): JSX.Element | null => {
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => setIsMounted(true), []);
|
|
|
|
return isMounted ? children : null;
|
|
};
|