chore: Update useFormattedCode to useShallowMemo

src/hooks/useFormattedCode.js

@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
+import useShallowMemo from './useShallowMemo';
 import formatCode from '../utils/formatCode';
 
 const useFormattedCode = (code, options) => {
-  return useMemo(() => {
+  return useShallowMemo(() => {
     try {
       return formatCode(code, options);
     } catch (e) {

src/hooks/useShallowMemo.js

@@ -0,0 +1,17 @@
+import { useMemo, useRef } from 'react';
+import shallowEqual from '../utils/shallowEqual';
+
+const useShallowMemo = (callback, deps) => {
+  const depsRef = useRef([]);
+  const previous = depsRef.current;
+  const equal = deps.every((dep, idx) => shallowEqual(dep, previous[idx]));
+
+  if (!equal) {
+    depsRef.current = deps;
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(callback, depsRef.current);
+};
+
+export default useShallowMemo;