Fix React Hydration Errors

react-hydration.md

Fix React Hydration Errors

Remove content from initial render (WORKS BEST)

export default function NoFirstRender({ theDate }) {
	const [hydrated, setHydrated] = React.useState(false);
	React.useEffect(() => {
		// This forces a rerender, so the date is rendered
		// the second time but not the first
		setHydrated(true);
	}, []);
	if (!hydrated) {
		// Returns null on first render, so the client and server match
		return null;
	}

	const formatted_date = new Date(theDate).toLocaleDateString();
	return <div>{formatted_date}</div>;
}