fix(event): timing of event subscribe

example/src/services/TodoService.ts

@@ -18,7 +18,7 @@ export class TodoService {
             state: 'todo',
           },
         ]);
-      }, 500);
+      }, 1);
     });
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stated-bean",
-  "version": "0.1.2-RC",
+  "version": "0.1.2-RC.1",
   "repository": "git@github.com:mjolnirjs/stated-bean.git",
   "license": "MIT",
   "main": "dist/cjs",

src/hooks/useContainer.ts

@@ -12,12 +12,11 @@ export function useContainer(
   const context = useContext(StatedBeanContext);
 
   const [container] = useState(() => {
-    const c = new StatedBeanContainer(context.container, application);
-    c.register(...types);
-    return c;
+    return new StatedBeanContainer(context.container, application);
   });
 
   useEffect(() => {
+    console.log('stated-bean register,', (types || []).map(t => t.name));
     container.register(...types);
   }, [container, types]);
   return container;

src/hooks/useStatedBean.ts

@@ -18,8 +18,25 @@ export function useStatedBean<T extends ClassType>(
 ): InstanceType<T> {
   const StateBeanContext = getStatedBeanContext();
   const context = useContext(StateBeanContext);
+  const [, setVersion] = useState(0);
+  const [changeEvent] = useState(Symbol.for(type.name + '_changed'));
+
+  const beanChangeListener = useCallback(
+    (effect: EffectContext) => {
+      // console.log('receive change event', effect);
+      const field = effect.fieldMeta.name;
+      if (
+        option.dependentFields == null ||
+        option.dependentFields.length === 0 ||
+        option.dependentFields.includes(field)
+      ) {
+        setVersion(prev => prev + 1);
+      }
+    },
+    [option.dependentFields],
+  );
 
-  const getContainer = useCallback(() => {
+  const [container] = useState<StatedBeanContainer | undefined>(() => {
     let container;
 
     if (option.scope === StatedBeanScope.CONTEXT) {
@@ -32,52 +49,28 @@ export function useStatedBean<T extends ClassType>(
       container.register(type);
     }
 
+    if (container !== undefined) {
+      container.on(changeEvent, beanChangeListener);
+    }
     return container;
-  }, [option.scope, context.container, type]);
-  const [container, setContainer] = useState<StatedBeanContainer | undefined>(
-    () => getContainer(),
-  );
+  });
 
   if (container === undefined) {
     throw new Error('not found container');
   }
 
-  const [bean, setBean] = useState(() =>
-    container.getBean<InstanceType<T>>(type),
-  );
-
-  useEffect(() => {
-    const container = getContainer();
-
-    if (container) {
-      setContainer(container);
-      container.register(type);
-      setBean(container.getBean<InstanceType<T>>(type));
-    }
-  }, [getContainer, type]);
+  const [bean] = useState(() => {
+    return container.getBean<InstanceType<T>>(type);
+  });
 
   if (bean === undefined) {
     throw new Error(`get bean[${type.name}] error`);
   }
 
-  const [, setVersion] = useState(0);
-
   useEffect(() => {
-    const changeEvent = Symbol.for(bean.constructor.name + '_changed');
-    const beanChangeListener = (effect: EffectContext) => {
-      // console.log('receive change event', effect);
-      const field = effect.fieldMeta.name;
-      if (
-        option.dependentFields == null ||
-        option.dependentFields.length === 0 ||
-        option.dependentFields.includes(field)
-      ) {
-        setVersion(prev => prev + 1);
-      }
-    };
-    container.on(changeEvent, beanChangeListener);
     return () => container.off(changeEvent, beanChangeListener);
-  }, [container, bean, option.dependentFields]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return bean;
 }

tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "stated-bean": ["src"]
     },
-    "sourceMap": true,
+    "inlineSourceMap": true,
     "strict": true,
     "stripInternal": true,
     "target": "es5"