diff --git a/src/camera/palette.ts b/src/camera/palette.ts
index 51187ce..f817f83 100644
--- a/src/camera/palette.ts
+++ b/src/camera/palette.ts
@@ -53,12 +53,13 @@ export const getCurrentPalette = () => currentPalette;
  * presetに登録してあるPaletteを選択する
  */
 export const changePaletteFromPresets = (index: number) => {
+  let newPalette = currentPalette;
+
   if (palettePresets[index]) {
-    currentPalette = palettePresets[index];
-  } else {
-    currentPalette = palettePresets[0];
+    newPalette = palettePresets[index];
   }
-  markNeedsRerender();
+
+  setPalette(newPalette);
 };
 
 /**
diff --git a/src/color/color-chromajs.ts b/src/color/color-chromajs.ts
index b412b24..6d25bf6 100644
--- a/src/color/color-chromajs.ts
+++ b/src/color/color-chromajs.ts
@@ -26,7 +26,6 @@ export class ChromaJsPalette extends BasePalette {
     }
 
     this.buildColors();
-    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {
@@ -37,6 +36,7 @@ export class ChromaJsPalette extends BasePalette {
     this.colors = chroma
       .scale(this.colorConstructor)
       .colors(this.colorLength, null);
+    this.fillCache();
   }
 
   serialize(): string {
diff --git a/src/color/color-d3-chromatic.ts b/src/color/color-d3-chromatic.ts
index 1fd149f..aed2b15 100644
--- a/src/color/color-d3-chromatic.ts
+++ b/src/color/color-d3-chromatic.ts
@@ -59,7 +59,6 @@ export class D3ChromaticPalette extends BasePalette {
     this.interpolator = interpolator;
 
     this.buildColors();
-    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {
@@ -70,6 +69,7 @@ export class D3ChromaticPalette extends BasePalette {
     this.colors = samples(this.colorLength)
       .map((t) => color(this.interpolator(t)))
       .filter((v): v is NonNullable<typeof v> => v != null);
+    this.fillCache();
   }
 
   serialize(): string {
diff --git a/src/color/color-others.ts b/src/color/color-others.ts
index c329e1e..d25f0e4 100644
--- a/src/color/color-others.ts
+++ b/src/color/color-others.ts
@@ -55,13 +55,13 @@ export class OthersPalette extends BasePalette {
     this.interpolator = interpolator;
 
     this.buildColors();
-    this.fillCache();
   }
 
   buildColors(): void {
     this.colors = samples(this.colorLength)
       .map((t) => this.interpolator(t))
       .filter((v): v is NonNullable<typeof v> => v != null);
+    this.fillCache();
   }
 
   getRGBFromColorIndex(index: number): RGB {
diff --git a/src/color/color.ts b/src/color/color.ts
index 7045eaa..7df68b7 100644
--- a/src/color/color.ts
+++ b/src/color/color.ts
@@ -22,7 +22,11 @@ export class BasePalette implements Palette {
   }
 
   fillCache(): void {
-    console.log("Fill cache: ", this.colorLength);
+    console.log(
+      "Fill palette cache:",
+      this.colorLength,
+      `(${this.serialize()})`,
+    );
 
     for (let i = 0; i < this.colorLength; i++) {
       const rgb = this.getRGBFromColorIndex(i);
diff --git a/src/store/store.ts b/src/store/store.ts
index 925bc84..3cc4468 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,3 +1,4 @@
+import BigNumber from "bignumber.js";
 import { eventmit } from "eventmit";
 import { useEffect, useState } from "react";
 import {
@@ -20,6 +21,11 @@ export const getStore = (key: string) => store[key];
 
 export const updateStore = (key: string, value: any) => {
   if (store[key] === value) return;
+  // BigNumberはeqで比較
+  if (value instanceof BigNumber && value.eq(store[key])) return;
+  // progressがobjectなので、totalが同じなら更新しない
+  if (value != null && value.total != null && value.total === store[key].total)
+    return;
 
   store[key] = value;
 
@@ -55,7 +61,7 @@ export const useStoreValue = <T = any>(key: string) => {
     return () => {
       event.off(handler);
     };
-  }, []);
+  }, [key]);
 
   return value as T;
 };
diff --git a/src/view/right-sidebar/palette-editor.tsx b/src/view/right-sidebar/palette-editor.tsx
index ceae11e..9f16a16 100644
--- a/src/view/right-sidebar/palette-editor.tsx
+++ b/src/view/right-sidebar/palette-editor.tsx
@@ -4,8 +4,8 @@ import {
 } from "@/camera/palette";
 import { ValueSlider } from "@/components/slider-wrapper";
 import { Slider } from "@/components/ui/slider";
-import { getStore, updateStore } from "@/store/store";
-import { useState } from "react";
+import { getStore, updateStore, useStoreValue } from "@/store/store";
+import { useEffect, useState } from "react";
 
 const paletteLengthValues = [
   "4",
@@ -31,6 +31,16 @@ export const PaletteEditor = () => {
     getStore("paletteOffset"),
   );
 
+  // subscribe
+  const paletteLength = useStoreValue("paletteLength");
+  useEffect(() => {
+    setPaletteLengthValue(paletteLength);
+  }, [paletteLength]);
+  const paletteOffset = useStoreValue("paletteOffset");
+  useEffect(() => {
+    setPaletteOffsetValue(paletteOffset);
+  }, [paletteOffset]);
+
   return (
     <div className="flex max-w-80 flex-col gap-6">
       <div>