diff --git a/index.json b/index.json
index b2968a8..071e060 100644
--- a/index.json
+++ b/index.json
@@ -235,7 +235,7 @@
   },
   "performance-monitor": {
     "react": true,
-    "version": "0.3.0",
+    "version": "0.4.1",
     "style": true,
     "icon": false,
     "test": true,
diff --git a/src/performance-monitor/package.json b/src/performance-monitor/package.json
index dff0b89..3f9c37f 100644
--- a/src/performance-monitor/package.json
+++ b/src/performance-monitor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "performance-monitor",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Realtime counter used for displaying cpu, fps metrics",
   "luna": {
     "react": true
diff --git a/src/performance-monitor/react.tsx b/src/performance-monitor/react.tsx
index e80b558..9187bf0 100644
--- a/src/performance-monitor/react.tsx
+++ b/src/performance-monitor/react.tsx
@@ -1,5 +1,6 @@
 import { FC, useEffect, useRef } from 'react'
 import PerformanceMonitor, { IOptions } from './index'
+import { useNonInitialEffect } from '../share/hooks'
 
 const LunaPerformanceMonitor: FC<IOptions> = (props) => {
   const performanceMonitorRef = useRef<HTMLDivElement>(null)
@@ -17,13 +18,13 @@ const LunaPerformanceMonitor: FC<IOptions> = (props) => {
     return () => performanceMonitor.current?.destroy()
   }, [])
 
-  useEffect(() => {
+  useNonInitialEffect(() => {
     if (performanceMonitor.current) {
       performanceMonitor.current.setOption('theme', props.theme)
     }
   }, [props.theme])
 
-  useEffect(() => {
+  useNonInitialEffect(() => {
     if (performanceMonitor.current) {
       performanceMonitor.current.setOption('color', props.color)
     }
diff --git a/src/performance-monitor/story.js b/src/performance-monitor/story.js
index f8c9cb4..64e34aa 100644
--- a/src/performance-monitor/story.js
+++ b/src/performance-monitor/story.js
@@ -107,7 +107,7 @@ const def = story(
           title="Used JS heap size"
           theme={theme}
           unit="MB"
-          color="#614d82"
+          // color="#614d82"
           smooth={false}
           data={() => {
             return (performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(1)
diff --git a/src/share/hooks.ts b/src/share/hooks.ts
index 60c72e9..d3bc1f5 100644
--- a/src/share/hooks.ts
+++ b/src/share/hooks.ts
@@ -1,6 +1,33 @@
-import { useState } from 'react'
+import {
+  DependencyList,
+  EffectCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 export function useForceUpdate() {
   const [_, setForceUpdateValue] = useState(0)
   return () => setForceUpdateValue((value) => value + 1)
 }
+
+export function useNonInitialEffect(
+  effect: EffectCallback,
+  deps?: DependencyList
+) {
+  const initialRender = useRef(true)
+
+  useEffect(() => {
+    let effectReturns: any = () => {}
+
+    if (initialRender.current) {
+      initialRender.current = false
+    } else {
+      effectReturns = effect()
+    }
+
+    if (effectReturns && typeof effectReturns === 'function') {
+      return effectReturns
+    }
+  }, deps)
+}