diff --git a/.storybook/stories/UseBrush.tsx b/.storybook/stories/UseBrush.tsx
index 16d3bd7b..a548c0ed 100644
--- a/.storybook/stories/UseBrush.tsx
+++ b/.storybook/stories/UseBrush.tsx
@@ -36,8 +36,9 @@ const setConfig = () => {
 export const UseBrush = (args: BrushParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateBrush] = useBrush({ size, dpr });
    useFrame((props) => {
       const fx = updateBrush(props, setConfig());
@@ -57,8 +58,9 @@ export const UseBrushWithTexture = (args: BrushParams) => {
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateBrush] = useBrush({ size, dpr });
 
diff --git a/.storybook/stories/UseDuoTone.tsx b/.storybook/stories/UseDuoTone.tsx
index caf41a22..f70d1820 100644
--- a/.storybook/stories/UseDuoTone.tsx
+++ b/.storybook/stories/UseDuoTone.tsx
@@ -29,8 +29,9 @@ export const UseDuoTone = (args: DuoToneParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateDuoTone] = useDuoTone({ size, dpr });
 
diff --git a/.storybook/stories/UseFluid.tsx b/.storybook/stories/UseFluid.tsx
index 788cb987..d4ae3c78 100644
--- a/.storybook/stories/UseFluid.tsx
+++ b/.storybook/stories/UseFluid.tsx
@@ -39,8 +39,9 @@ export const UseFluid = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFluid] = useFluid({ size, dpr });
 
    useFrame((props) => {
@@ -60,8 +61,9 @@ export const UseFluid = (args: FluidParams) => {
 export const UseFluidWithTexture = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFluid] = useFluid({ size, dpr });
 
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
diff --git a/.storybook/stories/UseFogProjection.tsx b/.storybook/stories/UseFogProjection.tsx
index d390ba8a..50816ffe 100644
--- a/.storybook/stories/UseFogProjection.tsx
+++ b/.storybook/stories/UseFogProjection.tsx
@@ -40,8 +40,9 @@ export const UseFogProjection = (args: FogProjectionParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateNoise] = useNoise({ size, dpr });
    const [updateFogProjection] = useFogProjection({ size, dpr });
diff --git a/.storybook/stories/UseFxTexture.tsx b/.storybook/stories/UseFxTexture.tsx
index fd1bbe4b..8b81c247 100644
--- a/.storybook/stories/UseFxTexture.tsx
+++ b/.storybook/stories/UseFxTexture.tsx
@@ -39,8 +39,9 @@ export const UseFxTexture = (args: FxTextureParams) => {
       "momo.jpg",
    ]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateNoise] = useNoise({ size, dpr });
 
diff --git a/.storybook/stories/UseNoise.tsx b/.storybook/stories/UseNoise.tsx
index 03ce82b6..76a93ae1 100644
--- a/.storybook/stories/UseNoise.tsx
+++ b/.storybook/stories/UseNoise.tsx
@@ -32,8 +32,9 @@ export const UseNoise = (args: NoiseParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateNoise] = useNoise({ size, dpr });
 
    useFrame((props) => {
diff --git a/.storybook/stories/UseRipple.tsx b/.storybook/stories/UseRipple.tsx
index a3883c26..9f51452c 100644
--- a/.storybook/stories/UseRipple.tsx
+++ b/.storybook/stories/UseRipple.tsx
@@ -58,8 +58,9 @@ export const UseRippleWithTexture = (args: RippleParams) => {
    ]);
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateRipple] = useRipple({ size, texture: ripple });
 
diff --git a/.storybook/stories/UseSimpleBlur.tsx b/.storybook/stories/UseSimpleBlur.tsx
index 357bdc41..416f66cf 100644
--- a/.storybook/stories/UseSimpleBlur.tsx
+++ b/.storybook/stories/UseSimpleBlur.tsx
@@ -30,8 +30,9 @@ export const UseSimpleBlur = (args: SimpleBlurParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateSimpleBlur] = useSimpleBlur({ size, dpr });
 
diff --git a/.storybook/stories/UseWave.tsx b/.storybook/stories/UseWave.tsx
index f13f1ddb..2d4dc4bd 100644
--- a/.storybook/stories/UseWave.tsx
+++ b/.storybook/stories/UseWave.tsx
@@ -46,8 +46,9 @@ export const UseWave = (args: WaveParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateWave] = useWave({ size, dpr });
 
    useFrame((props) => {
@@ -67,8 +68,9 @@ export const UseWave = (args: WaveParams) => {
 export const UseWaveWithTexture = (args: WaveParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
 
    const [updateWave] = useWave({ size, dpr });
    const [updateFxTexture] = useFxTexture({ size, dpr });
diff --git a/app/_home/index.tsx b/app/_home/index.tsx
index 7c83ca8c..76efb1eb 100644
--- a/app/_home/index.tsx
+++ b/app/_home/index.tsx
@@ -19,8 +19,9 @@ export const Home = () => {
    const updateGUI = useGUI(setGUI);
    const mainShaderRef = useRef<FxTransparentMaterialProps>();
 
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
 
    const [updateNoise] = useNoise({ size, dpr });
 
diff --git a/app/domSyncer/DomSyncer.tsx b/app/domSyncer/DomSyncer.tsx
index f783165e..d67e5a92 100644
--- a/app/domSyncer/DomSyncer.tsx
+++ b/app/domSyncer/DomSyncer.tsx
@@ -34,8 +34,9 @@ export const DomSyncer = ({ state }: { state: number }) => {
 
    const [momo] = useLoader(THREE.TextureLoader, ["momo.jpg"]);
 
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
 
    const [updateFxTexture, , fxTextureObj] = useFxTexture({ size, dpr });
    const [updateWave] = useWave({ size, dpr });