fix: react hydration mismatches (#1198)

[![PR App][icn]][demo] | Fix CX-2284
:-------------------:|:----------:

We've got a few markdown components that are causing hydration
mismatches when they get rendered in the Hub.
This PR patches them up!

## 🧰 Changes
1. Wait until after hydration to apply syntax highlighting to
the`<Code>` component
2. Prevent mermaid's default initialization on module load from racing
with the client side render in `<CodeTabs>`

I tried to comb through all of our custom blocks to find any others that
cause these errors and only found the code blocks, mermaid charts and
custom components causing issues. Fix for the custom components
hydration is [up in this
PR](readmeio/readme#15890) on the monorepo.


## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

---------

Co-authored-by: Kelly Joseph Price <[email protected]>

Author: kevinports

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-callout-tests-without-surprises-2-snap.png

@@ -5,10 +5,16 @@ const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 describe('visual regression tests', () => {
   describe('rdmd syntax', () => {
+    beforeAll(async () => {
+      // try warming up the browser???
+      const uri = 'http://localhost:9966/#/callouts?ci=true&darkModeDataAttribute=true';
+      await page.goto(uri, { waitUntil: 'networkidle0' });
+    });
+
     beforeEach(async () => {
       // The ToC disappears somewhere below 1200, 1175-ish?
       await page.setViewport({ width: 1400, height: 800 });
-    });
+    }, 10000);
 
     const docs = [
       'callouts',

__tests__/browser/__image_snapshots__/markdown-test-js-visual-regression-tests-rdmd-syntax-renders-code-blocks-without-surprises-2-snap.png

@@ -3,6 +3,7 @@ import React, { createRef, useContext } from 'react';
 
 import CodeOptsContext from '../../contexts/CodeOpts';
 import ThemeContext from '../../contexts/Theme';
+import useHydrated from '../../hooks/useHydrated';
 
 // Only load CodeMirror in the browser, for SSR
 // apps. Necessary because of people like this:
@@ -57,8 +58,9 @@ const Code = (props: CodeProps) => {
   const { children, lang, value } = props;
   const theme = useContext(ThemeContext);
   const copyButtons = useContext(CodeOptsContext) || props.copyButtons;
+  const isHydrated = useHydrated();
 
-  const language = canonicalLanguage(lang);
+  const language = isHydrated ? canonicalLanguage(lang) : '';
 
   const codeRef = createRef<HTMLElement>();
 
@@ -71,7 +73,7 @@ const Code = (props: CodeProps) => {
   const code = value ?? (Array.isArray(children) ? children[0] : children) ?? '';
 
   const highlightedCode =
-    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code
+    syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
       ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
       : code;
 
@@ -86,7 +88,6 @@ const Code = (props: CodeProps) => {
         ref={codeRef}
         className={['rdmd-code', `lang-${language}`, `theme-${theme}`].join(' ')}
         data-lang={language}
-        suppressHydrationWarning={true}
       >
         {highlightedCode}
       </code>

__tests__/browser/markdown.test.js

@@ -22,9 +22,12 @@ const CodeTabs = (props: Props) => {
       import('mermaid').then(module => {
         mermaid = module.default;
         mermaid.initialize({
+          startOnLoad: false,
           theme: theme === 'dark' ? 'dark' : 'default',
         });
-        mermaid.contentLoaded();
+        mermaid.run({
+          nodes: document.querySelectorAll('.mermaid-render'),
+        });
       });
     }
   }, [hasMermaid, theme]);
@@ -44,7 +47,7 @@ const CodeTabs = (props: Props) => {
   // render single Mermaid diagram
   if (hasMermaid) {
     const value = children.props.children.props.value;
-    return <pre className="mermaid mermaid_single">{value}</pre>;
+    return <pre className="mermaid-render mermaid_single">{value}</pre>;
   }
 
   return (

components/Code/index.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * A hook that returns whether or not the component has been hydrated.
+ * Useful for components that should only render in the browser, and not during SSR.
+ * Waiting to render until after hydration avoids React hydration mismatches.
+ */
+export default function useHydrated(): boolean {
+  const [isHydrated, setIsHydrated] = useState(false);
+  useEffect(() => setIsHydrated(true), []);
+  return isHydrated;
+}

components/CodeTabs/index.tsx

@@ -11,7 +11,7 @@ const mermaidTransformer = () => (tree: Node) => {
     if (child.type === 'element' && child.tagName === 'code' && child.properties.lang === 'mermaid') {
       node.properties = {
         ...node.properties,
-        className: ['mermaid', ...((node.properties.className as string[]) || [])],
+        className: ['mermaid-render', ...((node.properties.className as string[]) || [])],
       };
     }
   });