diff --git a/src/ValueNodes.tsx b/src/ValueNodes.tsx
index c8e1387..8152596 100644
--- a/src/ValueNodes.tsx
+++ b/src/ValueNodes.tsx
@@ -143,58 +143,56 @@ export const StringEdit: React.FC<StringEditProps> = ({
   )
 }
 
-export const StringValue: React.FC<InputProps & { value: string; enumType?: EnumDefinition }> = ({
-  isEditing,
-  path,
-  enumType,
-  ...props
-}) => {
-  const { getStyles } = useTheme()
+export const StringValue: React.FC<InputProps & { value: string; enumType?: EnumDefinition }> =
+  React.memo(({ isEditing, path, enumType, ...props }) => {
+    const { getStyles } = useTheme()
 
-  const pathString = toPathString(path)
-
-  const { value, setValue, nodeData, handleEdit, handleKeyboard, keyboardCommon } = props
-
-  if (isEditing && enumType) {
-    return (
-      <div className="jer-select jer-select-enums">
-        <select
-          name={`${pathString}-value-select`}
-          className="jer-select-inner"
-          onChange={(e) => setValue(e.target.value)}
-          value={value}
-          autoFocus
-          onKeyDown={(e: React.KeyboardEvent) => {
-            handleKeyboard(e, {
-              stringConfirm: handleEdit,
-              ...keyboardCommon,
-            })
-          }}
-        >
-          {enumType.values.map((val) => {
-            return (
-              <option value={val} key={val}>
-                {val}
-              </option>
-            )
-          })}
-        </select>
-        <span className="focus"></span>
-      </div>
+    const pathString = toPathString(path)
+
+    const { value, setValue, nodeData, handleEdit, handleKeyboard, keyboardCommon } = props
+
+    if (isEditing && enumType) {
+      return (
+        <div className="jer-select jer-select-enums">
+          <select
+            name={`${pathString}-value-select`}
+            className="jer-select-inner"
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            autoFocus
+            onKeyDown={(e: React.KeyboardEvent) => {
+              handleKeyboard(e, {
+                stringConfirm: handleEdit,
+                ...keyboardCommon,
+              })
+            }}
+          >
+            {enumType.values.map((val) => {
+              return (
+                <option value={val} key={val}>
+                  {val}
+                </option>
+              )
+            })}
+          </select>
+          <span className="focus"></span>
+        </div>
+      )
+    }
+
+    return isEditing ? (
+      <StringEdit
+        styles={getStyles('input', nodeData)}
+        pathString={pathString}
+        {...props}
+        setValue={props.setValue as React.Dispatch<React.SetStateAction<string>>}
+      />
+    ) : (
+      <StringDisplay pathString={pathString} styles={getStyles('string', nodeData)} {...props} />
     )
-  }
+  })
 
-  return isEditing ? (
-    <StringEdit
-      styles={getStyles('input', nodeData)}
-      pathString={pathString}
-      {...props}
-      setValue={props.setValue as React.Dispatch<React.SetStateAction<string>>}
-    />
-  ) : (
-    <StringDisplay pathString={pathString} styles={getStyles('string', nodeData)} {...props} />
-  )
-}
+StringValue.displayName = 'StringValue'
 
 export const NumberValue: React.FC<InputProps & { value: number }> = ({
   value,