diff --git a/apps/blueprints/src/components/BookChildTree.tsx b/apps/blueprints/src/components/BookChildTree.tsx
index 41cde5d..f5d4b3c 100644
--- a/apps/blueprints/src/components/BookChildTree.tsx
+++ b/apps/blueprints/src/components/BookChildTree.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { css } from "@emotion/react";
 import Link, { LinkProps } from "next/link";
 import { FactorioIcon } from "./FactorioIcon";
@@ -128,19 +129,17 @@ const InnerBookChildTree: React.FC<BookChildTreeProps> = ({ book_item, base_url,
   );
 };
 
-export const BookChildTree: React.FC<BookChildTreeProps> = ({
-  book_item,
-  base_url,
-  selected_id,
-}) => {
-  return (
-    <div css={componentStyles}>
-      <div className="child-tree-wrapper ">
-        <InnerBookChildTree book_item={book_item} base_url={base_url} selected_id={selected_id} />
+export const BookChildTree: React.FC<BookChildTreeProps> = memo(
+  ({ book_item, base_url, selected_id }) => {
+    return (
+      <div css={componentStyles}>
+        <div className="child-tree-wrapper ">
+          <InnerBookChildTree book_item={book_item} base_url={base_url} selected_id={selected_id} />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 const convertBlueprintDataToTree = (data: BlueprintStringData): TreeItem | null => {
   if (data.blueprint_book) {
diff --git a/apps/blueprints/src/pages/user/blueprint-create.tsx b/apps/blueprints/src/pages/user/blueprint-create.tsx
index 311a96e..edcb12f 100644
--- a/apps/blueprints/src/pages/user/blueprint-create.tsx
+++ b/apps/blueprints/src/pages/user/blueprint-create.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 import {
@@ -71,6 +71,12 @@ const FormContent: React.FC = () => {
   const description =
     blueprintData?.blueprint?.description || blueprintData?.blueprint_book?.description || "";
 
+  const book_item = useMemo(
+    () =>
+      blueprintData?.blueprint_book && convertBlueprintBookDataToTree(blueprintData.blueprint_book),
+    [blueprintData?.blueprint_book]
+  );
+
   useEffect(() => {
     if (values.string) {
       const data = parseBlueprintStringClient(values.string);
@@ -203,11 +209,8 @@ const FormContent: React.FC = () => {
       </Panel>
       <Panel title="Preview">
         <Box>
-          {blueprintData?.blueprint_book ? (
-            <BookChildTree
-              book_item={convertBlueprintBookDataToTree(blueprintData.blueprint_book)}
-              selected_id={null}
-            />
+          {book_item ? (
+            <BookChildTree book_item={book_item} selected_id={null} />
           ) : values.string ? (
             <ImageEditor string={values.string} />
           ) : null}