memoize components

src/components/Sidebar/index.tsx

@@ -123,7 +123,7 @@ function getLayoutIcon(layout: CanvasDirection) {
 }
 
 const Sidebar: React.FC<{
-  setJson: React.Dispatch<React.SetStateAction<string>>;
+  setJson: (json: string) => void;
 }> = ({ setJson }) => {
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
   const [config, setConfig] = useLocalStorage<StorageConfig>(
@@ -269,4 +269,4 @@ const Sidebar: React.FC<{
   );
 };
 
-export default Sidebar;
+export default React.memo(Sidebar);

src/containers/LiveEditor/index.tsx

@@ -48,14 +48,25 @@ const StyledControls = styled.div`
 
 export const LiveEditor: React.FC<{
   json: string;
-  setJson: React.Dispatch<React.SetStateAction<string>>;
+  setJson: (json: string) => void;
-}> = ({ json }) => {
+}> = React.memo(({ json }) => {
   const pageLoaded = useLoading();
   const canvasRef = React.useRef<CanvasRef | null>(null);
   const wrapperRef = React.useRef<ReactZoomPanPinchRef | null>(null);
   const [config] = useLocalStorage<StorageConfig>("config", defaultConfig);
+  const [data, setData] = React.useState({
+    nodes: [],
+    edges: [],
+  });
 
-  const { nodes, edges } = getEdgeNodes(json, config.expand);
+  React.useEffect(() => {
+    const { nodes, edges } = getEdgeNodes(json, config.expand);
+
+    setData({
+      nodes,
+      edges,
+    });
+  }, [json, config.expand]);
 
   React.useEffect(() => {
     if (wrapperRef.current) wrapperRef.current?.resetTransform();
@@ -109,16 +120,14 @@ export const LiveEditor: React.FC<{
             <TransformComponent>
               <Canvas
                 ref={canvasRef}
-                nodes={nodes}
+                nodes={data.nodes}
                 node={CustomNode}
-                edges={edges}
+                edges={data.edges}
                 maxWidth={20000}
                 maxHeight={20000}
                 center={false}
                 zoomable={false}
-                layoutOptions={{
+                direction={config.layout}
-                  "elk.direction": config.layout,
-                }}
                 fit
                 readonly
                 animated
@@ -146,4 +155,4 @@ export const LiveEditor: React.FC<{
     );
 
   return null;
-};
+});