release(performance-monitor): v0.4.1

index.json

@@ -235,7 +235,7 @@
   },
   "performance-monitor": {
     "react": true,
-    "version": "0.3.0",
+    "version": "0.4.1",
     "style": true,
     "icon": false,
     "test": true,

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

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)
     }

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)

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)
+}