diff --git a/src/components/ui/Colorbar.tsx b/src/components/ui/Colorbar.tsx
index 561423e30..28482a548 100644
--- a/src/components/ui/Colorbar.tsx
+++ b/src/components/ui/Colorbar.tsx
@@ -281,4 +281,4 @@ const Colorbar = ({units, metadata, valueScales} : {units: string, metadata: Rec
     )
 }
 
-export default Colorbar
\ No newline at end of file
+export default React.memo(Colorbar)
\ No newline at end of file
diff --git a/src/components/ui/ExportExtent.tsx b/src/components/ui/ExportExtent.tsx
index a51dda305..0c39dba08 100644
--- a/src/components/ui/ExportExtent.tsx
+++ b/src/components/ui/ExportExtent.tsx
@@ -4,7 +4,7 @@ import { useGlobalStore } from '@/GlobalStates/GlobalStore';
 import React from 'react'
 import { useShallow } from 'zustand/shallow'
 
-export const ExportExtent = () => {
+export const ExportExtent = React.memo(function ExportExtent(){
     const {customRes, previewExtent} = useImageExportStore(useShallow(state=> ({
         customRes:state.customRes, previewExtent:state.previewExtent
     })))
@@ -81,4 +81,4 @@ export const ExportExtent = () => {
 
   )
 }
-
+)
diff --git a/src/components/ui/ShaderEditor.tsx b/src/components/ui/ShaderEditor.tsx
index bc6c1240f..5f0376d38 100644
--- a/src/components/ui/ShaderEditor.tsx
+++ b/src/components/ui/ShaderEditor.tsx
@@ -116,7 +116,7 @@ const ConfigureUniforms = ({variables} : {variables:string[]})=>{
     )
 }
 
-export const ShaderEditor = ({visible} : {visible: boolean}) => {
+const ShaderEditor = React.memo(function ShaderEditor ({visible} : {visible: boolean}){
     const [shader, setShader] = useState<string | undefined>()
     const [showUniforms, setShowUniforms] = useState(false)
     const [newDim, setNewDim] = useState(0)
@@ -268,5 +268,6 @@ export const ShaderEditor = ({visible} : {visible: boolean}) => {
         </div>
 
     )
-}
+})
 
+export {ShaderEditor}