move mode loading into useEffect

components/Carbon.js

@@ -30,25 +30,10 @@ function searchLanguage(l) {
 }
 
 class Carbon extends React.PureComponent {
-  static modesLoaded = new Set()
   static defaultProps = {
     onChange: () => {}
   }
 
-  componentDidMount() {
-    LANGUAGES.filter(language => language.mode !== 'auto' && language.mode !== 'text').forEach(
-      language => {
-        if (language.mode && !Carbon.modesLoaded.has(language.mode)) {
-          // TODO useLayoutEffect
-          language.custom
-            ? require(`../lib/custom/modes/${language.mode}`)
-            : require(`codemirror/mode/${language.mode}/${language.mode}`)
-          Carbon.modesLoaded.add(language.mode)
-        }
-      }
-    )
-  }
-
   handleLanguageChange = debounce(
     (newCode, language) => {
       if (language === 'auto') {
@@ -279,11 +264,25 @@ class Carbon extends React.PureComponent {
   }
 }
 
-function LineNumbersCarbon(props, ref) {
+const modesLoaded = new Set()
+function CarbonContainer(props, ref) {
   const [selectedLines, setSelected] = React.useState({})
   const editorRef = React.useRef(null)
   const prevLine = React.useRef(null)
 
+  React.useEffect(() => {
+    LANGUAGES.filter(language => language.mode !== 'auto' && language.mode !== 'text').forEach(
+      language => {
+        if (language.mode && !modesLoaded.has(language.mode)) {
+          language.custom
+            ? require(`../lib/custom/modes/${language.mode}`)
+            : require(`codemirror/mode/${language.mode}/${language.mode}`)
+          modesLoaded.add(language.mode)
+        }
+      }
+    )
+  }, [])
+
   function onGutterClick(editor, lineNumber, gutter, e) {
     setSelected(currState => {
       const newState = {}
@@ -330,4 +329,4 @@ function LineNumbersCarbon(props, ref) {
   return <Carbon {...props} innerRef={ref} editorRef={editorRef} onGutterClick={onGutterClick} />
 }
 
-export default React.forwardRef(LineNumbersCarbon)
+export default React.forwardRef(CarbonContainer)