Refactor Highlight to be a functional component, fix not re-rendering on content change

Author: ewanharris

Sample-01/src/components/Highlight.js

@@ -1,73 +1,23 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import hljs from "highlight.js";
-import "highlight.js/styles/monokai-sublime.css";
-
-const registeredLanguages = {};
-
-class Highlight extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { loaded: false };
-    this.codeNode = React.createRef();
-  }
-
-  componentDidMount() {
-    const { language } = this.props;
-
-    if (language && !registeredLanguages[language]) {
-      try {
-        const newLanguage = require(`highlight.js/lib/languages/${language}`);
-        hljs.registerLanguage(language, newLanguage);
-        registeredLanguages[language] = true;
-
-        this.setState({ loaded: true }, this.highlight);
-      } catch (e) {
-        console.error(e);
-        throw Error(`Cannot register the language ${language}`);
-      }
-    } else {
-      this.setState({ loaded: true });
-    }
-  }
-
-  componentDidUpdate() {
-    this.highlight();
-  }
-
-  highlight = () => {
-    this.codeNode &&
-      this.codeNode.current &&
-      hljs.highlightBlock(this.codeNode.current);
-  };
-
-  render() {
-    const { language, children } = this.props;
-    const { loaded } = this.state;
-
-    if (!loaded) {
-      return null;
-    }
-
-    return (
-      <pre className="rounded">
-        <code ref={this.codeNode} className={language}>
-          {children}
-        </code>
-      </pre>
-    );
-  }
-}
-
-Highlight.propTypes = {
-  children: PropTypes.node.isRequired,
-  language: PropTypes.string,
-};
-
-Highlight.defaultProps = {
-  language: "json",
+import React, { useEffect, useRef } from 'react';
+
+import hljs from 'highlight.js';
+import 'highlight.js/styles/monokai-sublime.css';
+
+const Highlight = (props) => {
+  const { text, language = 'json' } = props;
+
+  const codeNode = useRef(null);
+  useEffect(() => {
+    hljs.highlightElement(codeNode.current);
+  }, [text]);
+
+  return (
+    <pre className="rounded">
+      <code ref={codeNode} className={language}>
+        {text}
+      </code>
+    </pre>
+  );
 };
 
-export default Highlight;
+export default Highlight;

Sample-01/src/views/ExternalApi.js

@@ -185,9 +185,7 @@ export const ExternalApiComponent = () => {
         {state.showResult && (
           <div className="result-block" data-testid="api-result">
             <h6 className="muted">Result</h6>
-            <Highlight>
-              <span>{JSON.stringify(state.apiMessage, null, 2)}</span>
-            </Highlight>
+            <Highlight text={JSON.stringify(state.apiMessage, null, 2)} />
           </div>
         )}
       </div>

Sample-01/src/views/Profile.js

@@ -24,7 +24,7 @@ export const ProfileComponent = () => {
         </Col>
       </Row>
       <Row>
-        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
+        <Highlight text={JSON.stringify(user, null, 2)} />
       </Row>
     </Container>
   );