fix: rename useEffect to useWatch and add useMount

cam-inc · Sep 6, 2022 · e5d9edf · e5d9edf
1 parent 6f37750
commit e5d9edf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/packages/core/__tests__/smoke/dev-server/src/plugins.tsx b/packages/core/__tests__/smoke/dev-server/src/plugins.tsx
@@ -6,7 +6,7 @@ import EditorJS, {
   InlineToolConstructorOptions,
   ToolConfig,
 } from '@editorjs/editorjs';
-import { h, useState, useEffect, createPlugin } from '../../../../src';
+import { h, useState, useWatch, createPlugin, useMount } from '../../../../src';
 import type { PDJSX } from '../../../../src/';
 
 const WithHooks = () => {
@@ -18,21 +18,20 @@ const WithHooks = () => {
   const [api, setApi] = useState<API | null>(null);
   const [config, setConfig] = useState<ToolConfig | null>(null);
 
-  useEffect(() => {
-    // FIXME: In this useEffect(called useMount), it rewrite state each state updater executed.
+  useMount(() => {
     setText('Pong');
-  }, []);
+  });
 
-  useEffect(() => {
-    console.log('[useEffect] show changed!: ', show);
+  useWatch(() => {
+    console.log('[useWatch] show changed!: ', show);
   }, [show]);
 
-  useEffect(() => {
-    console.log('[useEffect] value changed!: ', value);
+  useWatch(() => {
+    console.log('[useWatch] value changed!: ', value);
   }, [value]);
 
-  useEffect(() => {
-    console.log('[useEffect] api changed!: ', api);
+  useWatch(() => {
+    console.log('[useWatch] api changed!: ', api);
   }, [api]);
 
   const initializer = ({ api, config }: InlineToolConstructorOptions) => {
@@ -114,8 +113,8 @@ const WithContentEdiable = () => {
   const initializer = ({ data }: BlockToolConstructorOptions) => {
     setData(data);
   };
-  useEffect(() => {
-    console.log('[useEffect data] ', data?.value);
+  useWatch(() => {
+    console.log('[useWatch data] ', data?.value);
   }, [data]);
   return (
     <tool

diff --git a/packages/core/src/hooks.ts b/packages/core/src/hooks.ts
@@ -305,7 +305,7 @@ export const useState = <S = undefined>(initialState: S) => {
   return useReducer<S>(invokeOrReturn, initialState) as [S, StateUpdater<S>];
 };
 
-export const useEffect = (callback: Effect, args: any[]) => {
+export const useWatch = (callback: Effect, args: any[]) => {
   const state = getHookState(currentIndex++, 3);
   /**
    * NOTE: We suppress to call useEffect(cb, []) twice through calledUseMount.
@@ -319,13 +319,26 @@ export const useEffect = (callback: Effect, args: any[]) => {
 
       currentComponent?.renderCallbacks.push(state as Component);
     } else {
-      if (!options.calledUseMount) {
-        state.value = callback;
-        state.pendingArgs = args;
-
-        currentComponent?.renderCallbacks.push(state as Component);
-        options.calledUseMount = true;
-      }
+      throw new Error(
+        'args should be array with at least one element. Use `useMount` instead.'
+      );
     }
   }
 };
+
+export const useMount = (callback: Effect) => {
+  const state = getHookState(currentIndex++, 4);
+  let called = !!state?.value;
+
+  if (state && !called) {
+    state.value = callback;
+    state.pendingArgs = [];
+
+    currentComponent?.renderCallbacks.push(state as Component);
+    currentComponent?.forceUpdate();
+
+    called = true;
+  }
+};
+
+export const useConstruct = () => {};