Automated transformation to reduce re-rendering

src/options/hooks/useHash.ts

@@ -1,21 +1,21 @@
-import { useCallback, useEffect, useState } from 'react'
-
+import { useRef } from "react";
+import { useCallback, useEffect, useState } from 'react';
 export const useHash = () => {
-  const [hashId, setHashId] = useState('')
-  const [hashNewUrl, setHashNewUrl] = useState<string | undefined>()
-
+  const hashId = useRef('');
+  const hashNewUrl = useRef<string | undefined>();
   const handler = useCallback(() => {
-    const h = window.location.hash.substring(1).split('=')
-    setHashId(h[0])
-    setHashNewUrl(h.slice(1).join('=')) // in case the url contains a colon i need to join the rest of the array
-  }, [])
-
+    const h = window.location.hash.substring(1).split('=');
+    hashId.current = h[0];
+    hashNewUrl.current = h.slice(1).join('='); // in case the url contains a colon i need to join the rest of the array
+  }, []);
   useEffect(() => {
-    handler() // run the handler on mount to set the initial state
-
-    window.addEventListener('hashchange', handler)
-    return () => window.removeEventListener('hashchange', handler)
-  }, [])
+    handler(); // run the handler on mount to set the initial state
 
-  return { hashId, hashNewUrl }
-}
+    window.addEventListener('hashchange', handler);
+    return () => window.removeEventListener('hashchange', handler);
+  }, []);
+  return {
+    hashId: hashId.current,
+    hashNewUrl: hashNewUrl.current
+  };
+};

src/options/hooks/useProtos.ts

@@ -1,19 +1,17 @@
-import { useEffect, useState } from 'react'
-import { CSSProto } from '../../types'
-
+import { useRef } from "react";
+import { useEffect, useState } from 'react';
+import { CSSProto } from '../../types';
 export const useProtos = () => {
   // detect chrome.storage.local change callback
 
-  const [protos, setProtos] = useState<CSSProto[]>([])
-
+  const protos = useRef<CSSProto[]>([]);
   useEffect(() => {
     // get protos from storage
     chrome.storage.onChanged.addListener((changes, areaName) => {
       if (areaName == 'local' && changes['css-protos']) {
-        setProtos(changes.protos.newValue)
+        protos.current = changes.protos.newValue;
       }
-    })
-  }, [])
-
-  return protos
-}
+    });
+  }, []);
+  return protos.current;
+};