@my-react/react-reconciler-compact 0.0.4 → 0.0.5

package/dist/cjs/index.development.js

@@ -281,6 +281,7 @@ function requireIndex_development_1 () {
 				    HOOK_TYPE[HOOK_TYPE["useInsertionEffect"] = 13] = "useInsertionEffect";
 				    HOOK_TYPE[HOOK_TYPE["useImperativeHandle"] = 14] = "useImperativeHandle";
 				    HOOK_TYPE[HOOK_TYPE["useSyncExternalStore"] = 15] = "useSyncExternalStore";
+				    HOOK_TYPE[HOOK_TYPE["useOptimistic"] = 16] = "useOptimistic";
 				})(exports.HOOK_TYPE || (exports.HOOK_TYPE = {}));
 
 				exports.UpdateQueueType = void 0;
@@ -2711,7 +2712,7 @@ function requireIndex_development_1 () {
 		var enableDebugFiled$8 = react.__my_react_shared__.enableDebugFiled;
 		var currentScheduler$c = react.__my_react_internal__.currentScheduler;
 		// TODO 整合
-		var processClassComponentUpdateQueue = function (renderDispatch, fiber, enableTaskPriority) {
+		var processClassComponentUpdateQueueLatest = function (renderDispatch, fiber, enableTaskPriority) {
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
 		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__class__))
@@ -2902,7 +2903,108 @@ function requireIndex_development_1 () {
 		        }
 		    }
 		};
-		var processFunctionComponentUpdateQueue = function (renderDispatch, fiber, enableTaskPriority) {
+		var processClassComponentUpdateQueueLegacy = function (renderDispatch, fiber) {
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__class__))
+		        throw new Error("[@my-react/react] current fiber is not a class component, look like a bug for @my-react");
+		    var renderScheduler = currentScheduler$c.current;
+		    var allQueue = fiber.updateQueue;
+		    var typedFiber = fiber;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = true;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var callbacks = [];
+		    var processedNodes = [];
+		    var typedInstance = fiber.instance;
+		    var baseState = Object.assign({}, fiber.pendingState);
+		    var baseProps = Object.assign({}, typedInstance.props);
+		    var pendingState = Object.assign({}, fiber.pendingState);
+		    if (node) {
+		        var updater = node.value;
+		        if (updater.type === myreactSharedExports.UpdateQueueType.component) {
+		            if (updater.trigger !== typedInstance)
+		                throw new Error("[@my-react/react] current update not valid, look like a bug for @my-react");
+		            allQueue.delete(node);
+		            {
+		                processedNodes.push(updater);
+		            }
+		            var payLoad_3 = updater.payLoad;
+		            fiber.pendingState = safeCallWithCurrentFiber({
+		                fiber: fiber,
+		                fallback: function safeFallbackForState() {
+		                    return pendingState;
+		                },
+		                action: function safeGetNextState() {
+		                    return Object.assign({}, fiber.pendingState, typeof payLoad_3 === "function" ? payLoad_3(baseState, baseProps) : payLoad_3);
+		                },
+		            });
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            if (enableDebugFiled$8.current) {
+		                var typedNode = updater;
+		                typedNode._debugRunTime = Date.now();
+		                typedNode._debugBeforeValue = pendingState;
+		                typedNode._debugBaseValue = baseState;
+		                typedNode._debugAfterValue = fiber.pendingState;
+		                if (enableDebugUpdateQueue.current) {
+		                    typedFiber._debugUpdateQueue = typedFiber._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                    typedFiber._debugUpdateQueue.push(typedNode);
+		                }
+		            }
+		        }
+		        else {
+		            allQueue.delete(node);
+		            {
+		                processedNodes.push(updater);
+		            }
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            if (enableDebugFiled$8.current) {
+		                var typedNode = updater;
+		                typedNode._debugRunTime = Date.now();
+		                typedNode._debugBeforeValue = pendingState;
+		                typedNode._debugBaseValue = baseState;
+		                typedNode._debugAfterValue = fiber.pendingState;
+		                if (enableDebugUpdateQueue.current) {
+		                    typedFiber._debugUpdateQueue = typedFiber._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                    typedFiber._debugUpdateQueue.push(typedNode);
+		                }
+		            }
+		        }
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            nodes: processedNodes,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
+		var processFunctionComponentUpdateQueueLatest = function (renderDispatch, fiber, enableTaskPriority) {
 		    var _a, _b;
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
@@ -2932,7 +3034,7 @@ function requireIndex_development_1 () {
 		                {
 		                    processedNodes.push(updater);
 		                }
-		                var trigger = updater.trigger, payLoad_3 = updater.payLoad, reducer_1 = updater.reducer;
+		                var trigger = updater.trigger, payLoad_4 = updater.payLoad, reducer_1 = updater.reducer;
 		                var typedTrigger_1 = trigger;
 		                var lastResult_1 = typedTrigger_1.result;
 		                if (typedTrigger_1.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
@@ -2947,10 +3049,10 @@ function requireIndex_development_1 () {
 		                    },
 		                    action: function safeGetNextState() {
 		                        if (reducer_1 && typeof reducer_1 === "function") {
-		                            return reducer_1(lastResult_1, payLoad_3);
+		                            return reducer_1(lastResult_1, payLoad_4);
 		                        }
 		                        else {
-		                            return typedTrigger_1.reducer(lastResult_1, payLoad_3);
+		                            return typedTrigger_1.reducer(lastResult_1, payLoad_4);
 		                        }
 		                    },
 		                });
@@ -3036,7 +3138,7 @@ function requireIndex_development_1 () {
 		                {
 		                    processedNodes.push(updater);
 		                }
-		                var trigger = updater.trigger, payLoad_4 = updater.payLoad, reducer_2 = updater.reducer;
+		                var trigger = updater.trigger, payLoad_5 = updater.payLoad, reducer_2 = updater.reducer;
 		                var typedTrigger_2 = trigger;
 		                var lastResult_2 = typedTrigger_2.result;
 		                if (typedTrigger_2.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
@@ -3051,10 +3153,10 @@ function requireIndex_development_1 () {
 		                    },
 		                    action: function safeGetNextState() {
 		                        if (reducer_2 && typeof reducer_2 === "function") {
-		                            return reducer_2(lastResult_2, payLoad_4);
+		                            return reducer_2(lastResult_2, payLoad_5);
 		                        }
 		                        else {
-		                            return typedTrigger_2.reducer(lastResult_2, payLoad_4);
+		                            return typedTrigger_2.reducer(lastResult_2, payLoad_5);
 		                        }
 		                    },
 		                });
@@ -3124,7 +3226,123 @@ function requireIndex_development_1 () {
 		        }
 		    }
 		};
-		var processNormalComponentUpdate = function (fiber) {
+		var processFunctionComponentUpdateQueueLegacy = function (renderDispatch, fiber) {
+		    var _a;
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    if (myreactSharedExports.exclude(fiber.type, exports.NODE_TYPE.__function__)) {
+		        throw new Error("[@my-react/react] current fiber is not a function component, look like a bug for @my-react");
+		    }
+		    var renderScheduler = currentScheduler$c.current;
+		    var allQueue = fiber.updateQueue;
+		    var typedFiber = fiber;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = false;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var processedNodes = [];
+		    var callbacks = [];
+		    if (node) {
+		        var updater = node.value;
+		        if (updater.type === myreactSharedExports.UpdateQueueType.hook) {
+		            if (getInstanceOwnerFiber(updater.trigger) !== fiber) {
+		                throw new Error("[@my-react/react] current update not valid, look like a bug for @my-react");
+		            }
+		            allQueue.delete(node);
+		            {
+		                processedNodes.push(updater);
+		            }
+		            var trigger = updater.trigger, payLoad_6 = updater.payLoad, reducer_3 = updater.reducer;
+		            var typedTrigger_3 = trigger;
+		            var lastResult_3 = typedTrigger_3.result;
+		            if (typedTrigger_3.type === myreactSharedExports.HOOK_TYPE.useSyncExternalStore) {
+		                lastResult_3 = (_a = trigger.value) === null || _a === void 0 ? void 0 : _a.result;
+		            }
+		            var hasError_3 = false;
+		            typedTrigger_3.result = safeCallWithCurrentFiber({
+		                fiber: fiber,
+		                fallback: function safeFallbackForState() {
+		                    hasError_3 = true;
+		                    return lastResult_3;
+		                },
+		                action: function safeGetNextState() {
+		                    if (reducer_3 && typeof reducer_3 === "function") {
+		                        return reducer_3(lastResult_3, payLoad_6);
+		                    }
+		                    else {
+		                        return typedTrigger_3.reducer(lastResult_3, payLoad_6);
+		                    }
+		                },
+		            });
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            if (!needUpdate && (isForce || hasError_3 || callbacks.length || !Object.is(lastResult_3, typedTrigger_3.result)))
+		                needUpdate = true;
+		            if (enableDebugFiled$8.current) {
+		                var typedNode = updater;
+		                typedNode._debugRunTime = Date.now();
+		                typedNode._debugBeforeValue = lastResult_3;
+		                typedNode._debugAfterValue = typedTrigger_3.result;
+		                if (enableDebugUpdateQueue.current) {
+		                    typedFiber._debugUpdateQueue = typedFiber._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                    typedFiber._debugUpdateQueue.push(typedNode);
+		                    typedTrigger_3._debugUpdateQueue = typedTrigger_3._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                    typedTrigger_3._debugUpdateQueue.push(typedNode);
+		                }
+		            }
+		        }
+		        else {
+		            allQueue.delete(node);
+		            {
+		                processedNodes.push(updater);
+		            }
+		            var payLoad = updater.payLoad;
+		            isSync = isSync || updater.isSync;
+		            isForce = isForce || updater.isForce;
+		            isImmediate = isImmediate || updater.isImmediate;
+		            isRetrigger = isRetrigger || updater.isRetrigger;
+		            updater.callback && callbacks.push(updater.callback);
+		            needUpdate = true;
+		            if (enableDebugFiled$8.current) {
+		                var typedNode = updater;
+		                typedNode._debugRunTime = Date.now();
+		                typedNode._debugBeforeValue = undefined;
+		                typedNode._debugAfterValue = payLoad;
+		                if (enableDebugUpdateQueue.current) {
+		                    typedFiber._debugUpdateQueue = typedFiber._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                    typedFiber._debugUpdateQueue.push(typedNode);
+		                }
+		            }
+		        }
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            nodes: processedNodes,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
+		var processNormalComponentUpdateLatest = function (renderDispatch, fiber) {
 		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
 		        return;
 		    var allQueue = fiber.updateQueue;
@@ -3179,6 +3397,65 @@ function requireIndex_development_1 () {
 		        };
 		    }
 		};
+		var processNormalComponentUpdateLegacy = function (renderDispatch, fiber) {
+		    if (myreactSharedExports.include(fiber.state, myreactSharedExports.STATE_TYPE.__unmount__))
+		        return;
+		    var allQueue = fiber.updateQueue;
+		    var typedFiber = fiber;
+		    var renderScheduler = currentScheduler$c.current;
+		    var node = allQueue === null || allQueue === void 0 ? void 0 : allQueue.head;
+		    var needUpdate = true;
+		    var isSync = false;
+		    var isForce = false;
+		    var isImmediate = false;
+		    var isRetrigger = false;
+		    var processedNodes = [];
+		    var callbacks = [];
+		    if (node) {
+		        var updater = node.value;
+		        allQueue.delete(node);
+		        {
+		            processedNodes.push(updater);
+		        }
+		        var payLoad = updater.payLoad;
+		        isSync = isSync || updater.isSync;
+		        isForce = isForce || updater.isForce;
+		        isImmediate = isImmediate || updater.isImmediate;
+		        isRetrigger = isRetrigger || updater.isRetrigger;
+		        updater.callback && callbacks.push(updater.callback);
+		        if (enableDebugFiled$8.current) {
+		            var typedNode = updater;
+		            typedNode._debugRunTime = Date.now();
+		            typedNode._debugBeforeValue = undefined;
+		            typedNode._debugAfterValue = payLoad;
+		            if (enableDebugUpdateQueue.current) {
+		                typedFiber._debugUpdateQueue = typedFiber._debugUpdateQueue || new myreactSharedExports.ListTree();
+		                typedFiber._debugUpdateQueue.push(typedNode);
+		            }
+		        }
+		    }
+		    if (allQueue.length) {
+		        renderScheduler.microTask(function prepareUpdateOnFiberTask() {
+		            prepareUpdateOnFiber(renderDispatch, fiber, true);
+		        });
+		    }
+		    var invokeCallbackArray = callbacks.length
+		        ? function invokeCallbackArray() {
+		            return callbacks.forEach(function (cb) { return cb === null || cb === void 0 ? void 0 : cb(); });
+		        }
+		        : void 0;
+		    {
+		        return {
+		            needUpdate: needUpdate,
+		            nodes: processedNodes,
+		            isSync: isSync,
+		            isForce: isForce,
+		            isImmediate: isImmediate,
+		            isRetrigger: isRetrigger,
+		            callback: invokeCallbackArray,
+		        };
+		    }
+		};
 		/**
 		 * @deprecated
 		 */
@@ -3192,7 +3469,7 @@ function requireIndex_development_1 () {
 		 * @deprecated
 		 */
 		var syncFlushComponentQueue = function (renderDispatch, fiber) {
-		    var _a = processClassComponentUpdateQueue(renderDispatch, fiber), needUpdate = _a.needUpdate, callback = _a.callback;
+		    var _a = processClassComponentUpdateQueueLatest(renderDispatch, fiber), needUpdate = _a.needUpdate, callback = _a.callback;
 		    needUpdate && syncFiberStateToComponent(renderDispatch, fiber, callback);
 		    syncComponentStateToFiber(fiber);
 		};
@@ -3689,6 +3966,12 @@ function requireIndex_development_1 () {
 		            throw new Error("[@my-react/react] ".concat(myreactSharedExports.HOOK_TYPE[hookNode.type], " initial error"));
 		        }
 		    }
+		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useOptimistic) {
+		        var value = hookNode.value;
+		        if (value.reducer && typeof value.reducer !== 'function') {
+		            throw new Error("[@my-react/react] ".concat(myreactSharedExports.HOOK_TYPE[hookNode.type], " initial error"));
+		        }
+		    }
 		};
 
 		var MyReactInternalInstance$4 = react.__my_react_internal__.MyReactInternalInstance, currentScheduler$8 = react.__my_react_internal__.currentScheduler;
@@ -3759,6 +4042,7 @@ function requireIndex_development_1 () {
 		var defaultReducer = function (state, action) {
 		    return typeof action === "function" ? action(state) : action;
 		};
+		var defaultOptimisticReducer = function (state) { return state; };
 		var createHookNode = function (renderDispatch, _a, fiber) {
 		    var _b;
 		    var type = _a.type, value = _a.value, reducer = _a.reducer, deps = _a.deps;
@@ -3791,7 +4075,7 @@ function requireIndex_development_1 () {
 		        hookNode.result = hookNode.value;
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useId) {
-		        hookNode.result = "_-".concat(currentHookIndex, "-").concat(renderDispatch.uniqueIdCount++, "-_");
+		        hookNode.result = "\u00AB-".concat(currentHookIndex, "-").concat(renderDispatch.uniqueIdCount++, "-\u00BB");
 		        hookNode.cancel = function () { return renderDispatch.uniqueIdCount--; };
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useDebugValue) {
@@ -3876,20 +4160,17 @@ function requireIndex_development_1 () {
 		        hookNode.result = new MyReactSignal(hookNode.value.call(null), renderDispatch);
 		    }
 		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useTransition) {
-		        hookNode.result = [
-		            false,
-		            // TODO
-		            function startTransitionByHook(cb) {
+		        hookNode.result = {
+		            value: false,
+		            start: function startTransitionByHook(cb) {
 		                var loadingCallback = function (cb) {
 		                    react.startTransition(function () {
-		                        hookNode.result[0] = true;
-		                        hookNode._update({ isForce: true, isSync: true, callback: cb });
+		                        hookNode._update({ isForce: true, isSync: true, callback: cb, payLoad: function (last) { return ({ value: true, start: last.start }); } });
 		                    });
 		                };
 		                var loadedCallback = function () {
 		                    react.startTransition(function () {
-		                        hookNode.result[0] = false;
-		                        hookNode._update({ isForce: true, isSync: true });
+		                        hookNode._update({ isForce: true, isSync: true, payLoad: function (last) { return ({ value: false, start: last.start }); } });
 		                    });
 		                };
 		                var taskCallback = function () {
@@ -3900,7 +4181,19 @@ function requireIndex_development_1 () {
 		                };
 		                loadingCallback(taskCallback);
 		            },
-		        ];
+		        };
+		    }
+		    if (hookNode.type === myreactSharedExports.HOOK_TYPE.useOptimistic) {
+		        hookNode.result = {
+		            value: value.value,
+		            start: function startOptimisticByHook(newValue) {
+		                var mergeFunc = hookNode.value.reducer || defaultOptimisticReducer;
+		                var nextValue = mergeFunc(newValue, hookNode.result.value.value);
+		                var payloadRef = { current: function (last) { return ({ value: nextValue, start: last.start }); } };
+		                hookNode._update({ isForce: true, isSync: true, payLoad: function (last) { return payloadRef.current(last); } });
+		                hookNode.cancel = function () { return payloadRef.current = function (last) { return last; }; };
+		            },
+		        };
 		    }
 		    var typedHook = hookNode;
 		    if (enableDebugFiled$6.current) {
@@ -3975,7 +4268,7 @@ function requireIndex_development_1 () {
 		var enableDebugLog = react.__my_react_shared__.enableDebugLog;
 		var currentHookTreeNode$1 = react.__my_react_internal__.currentHookTreeNode, currentScheduler$7 = react.__my_react_internal__.currentScheduler;
 		var updateHookNode = function (renderDispatch, _a, fiber, isHMR) {
-		    var _b, _c;
+		    var _b, _c, _d;
 		    var type = _a.type, value = _a.value, reducer = _a.reducer, deps = _a.deps;
 		    var renderScheduler = currentScheduler$7.current;
 		    var currentHook = (_b = currentHookTreeNode$1.current) === null || _b === void 0 ? void 0 : _b.value;
@@ -4138,12 +4431,19 @@ function requireIndex_development_1 () {
 		        currentHook.value = value;
 		        if (!Object.is(currentHook.value, currentHook.result)) {
 		            currentHook.cancel = renderScheduler.yieldTask(function triggerHookUpdate() {
-		                currentHook.result = currentHook.value;
-		                currentHook._update({ isForce: true });
+		                currentHook._update({ isForce: true, payLoad: function () { return currentHook.value; } });
 		                currentHook.cancel = null;
 		            });
 		        }
 		    }
+		    if (currentHook.type === myreactSharedExports.HOOK_TYPE.useOptimistic) {
+		        (_d = currentHook.cancel) === null || _d === void 0 ? void 0 : _d.call(currentHook);
+		        currentHook.value = value;
+		        if (!Object.is(currentHook.result.value, value.value)) {
+		            currentHook.result.value = value.value;
+		            // currentHook._update({ isForce: true, payLoad: (last) => ({ value: value.value, start: last.start }) });
+		        }
+		    }
 		    if (currentHook.type === myreactSharedExports.HOOK_TYPE.useDebugValue) {
 		        if (!myreactSharedExports.isArrayEquals(currentHook.value, value)) {
 		            currentHook.value = value;
@@ -4265,13 +4565,15 @@ function requireIndex_development_1 () {
 		    var flag = enableConcurrentMode.current;
 		    var updateState = null;
 		    if (myreactSharedExports.include(fiber.type, exports.NODE_TYPE.__class__)) {
-		        updateState = processClassComponentUpdateQueue(renderDispatch, fiber, flag);
+		        updateState = flag ? processClassComponentUpdateQueueLatest(renderDispatch, fiber, flag) : processClassComponentUpdateQueueLegacy(renderDispatch, fiber);
 		    }
 		    else if (myreactSharedExports.include(fiber.type, exports.NODE_TYPE.__function__)) {
-		        updateState = processFunctionComponentUpdateQueue(renderDispatch, fiber, flag);
+		        updateState = flag
+		            ? processFunctionComponentUpdateQueueLatest(renderDispatch, fiber, flag)
+		            : processFunctionComponentUpdateQueueLegacy(renderDispatch, fiber);
 		    }
 		    else {
-		        updateState = processNormalComponentUpdate(fiber);
+		        updateState = flag ? processNormalComponentUpdateLatest(renderDispatch, fiber) : processNormalComponentUpdateLegacy(renderDispatch, fiber);
 		    }
 		    if (updateState === null || updateState === void 0 ? void 0 : updateState.needUpdate) {
 		        safeCallWithCurrentFiber({
@@ -4690,7 +4992,7 @@ function requireIndex_development_1 () {
 		    return createFiberNode(renderDispatch, { parent: parentFiber }, newChild);
 		};
 		var transformChildrenFiber = function (renderDispatch, parentFiber, children) {
-		    var isUpdate = myreactSharedExports.exclude(parentFiber.state, myreactSharedExports.STATE_TYPE.__create__);
+		    var isUpdate = myreactSharedExports.exclude(parentFiber.state, myreactSharedExports.STATE_TYPE.__create__) && renderDispatch.isAppMounted;
 		    var isHMR = myreactSharedExports.include(parentFiber.state, myreactSharedExports.STATE_TYPE.__hmr__);
 		    var isRetrigger = myreactSharedExports.include(parentFiber.state, myreactSharedExports.STATE_TYPE.__retrigger__);
 		    // is current is retrigger update, skip update children
@@ -5775,69 +6077,12 @@ function requireIndex_development_1 () {
 
 		var currentScheduler$2 = react.__my_react_internal__.currentScheduler;
 		var enableScopeTreeLog$2 = react.__my_react_shared__.enableScopeTreeLog;
-		var defaultDispatchMountLegacy = function (_dispatch, _fiber) {
-		    var mountInsertionEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountInsertionEffectList(_fiber.child);
-		        insertionEffect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountInsertionEffectList(_fiber.sibling);
-		    };
-		    var mountCommit = function (_fiber) {
-		        safeCallWithCurrentFiber({
-		            fiber: _fiber,
-		            action: function safeCallCreateAndUpdate() {
-		                _dispatch.commitCreate(_fiber);
-		                _dispatch.commitUpdate(_fiber);
-		            },
-		        });
-		        if (_fiber.child)
-		            mountCommit(_fiber.child);
-		        safeCallWithCurrentFiber({
-		            fiber: _fiber,
-		            action: function safeCallAppendAndSetRef() {
-		                _dispatch.commitAppend(_fiber);
-		                _dispatch.commitSetRef(_fiber);
-		            },
-		        });
-		        if (_fiber.sibling) {
-		            mountCommit(_fiber.sibling);
-		        }
-		    };
-		    var mountLayoutEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountLayoutEffectList(_fiber.child);
-		        layoutEffect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountLayoutEffectList(_fiber.sibling);
-		    };
-		    var mountEffectList = function (_fiber) {
-		        if (_fiber.child)
-		            mountEffectList(_fiber.child);
-		        effect(_dispatch, _fiber);
-		        if (_fiber.sibling)
-		            mountEffectList(_fiber.sibling);
-		    };
-		    var mountLoop = function (_fiber) {
-		        beforeSyncUpdate();
-		        mountInsertionEffectList(_fiber);
-		        afterSyncUpdate();
-		        mountCommit(_fiber);
-		        beforeSyncUpdate();
-		        mountLayoutEffectList(_fiber);
-		        afterSyncUpdate();
-		        var renderScheduler = currentScheduler$2.current;
-		        renderScheduler.microTask(function invokeEffectList() {
-		            enableScopeTreeLog$2.current && setLogScope();
-		            mountEffectList(_fiber);
-		            enableScopeTreeLog$2.current && resetLogScope();
-		        });
-		    };
-		    mountLoop(_fiber);
-		};
 		var defaultDispatchMountLatest = function (_dispatch, _fiber) {
 		    var _list = generateFiberToMountList(_fiber);
 		    beforeSyncUpdate();
+		    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+		        defaultInvokeUnmountList(_dispatch, _fiber);
+		    });
 		    _list.listToFoot(function invokeInsertionEffectList(_fiber) {
 		        insertionEffect(_dispatch, _fiber);
 		    });
@@ -6081,7 +6326,7 @@ function requireIndex_development_1 () {
 		        _this.isAppMounted = false;
 		        _this.isAppCrashed = false;
 		        _this.isAppUnmounted = false;
-		        _this.version = "0.3.12";
+		        _this.version = "0.3.14";
 		        _this.mode = "development" ;
 		        _this.renderMode = "render";
 		        _this.pendingCommitFiberList = null;
@@ -6409,10 +6654,12 @@ function requireIndex_development_1 () {
 		            case myreactSharedExports.HOOK_TYPE.useMemo:
 		            case myreactSharedExports.HOOK_TYPE.useContext:
 		            case myreactSharedExports.HOOK_TYPE.useCallback:
-		            case myreactSharedExports.HOOK_TYPE.useTransition:
 		            case myreactSharedExports.HOOK_TYPE.useDeferredValue:
 		            case myreactSharedExports.HOOK_TYPE.useSyncExternalStore:
 		                return hookNode.result;
+		            case myreactSharedExports.HOOK_TYPE.useOptimistic:
+		            case myreactSharedExports.HOOK_TYPE.useTransition:
+		                return [hookNode.result.value, hookNode.result.start];
 		            case myreactSharedExports.HOOK_TYPE.useSignal:
 		                return [hookNode.result.getValue, hookNode.result.setValue];
 		        }
@@ -6460,12 +6707,10 @@ function requireIndex_development_1 () {
 		    (function finishMount() {
 		        enableScopeTreeLog.current && setLogScope();
 		        renderDispatch.reconcileCommit(fiber);
-		        var commitList = renderDispatch.pendingCommitFiberList;
 		        var changedList = renderDispatch.pendingChangedFiberList;
 		        renderDispatch.resetUpdateFlowRuntimeFiber();
 		        renderDispatch.pendingCommitFiberList = null;
 		        renderDispatch.pendingChangedFiberList = null;
-		        (commitList === null || commitList === void 0 ? void 0 : commitList.length) && renderDispatch.reconcileUpdate(commitList);
 		        enableScopeTreeLog.current && resetLogScope();
 		        (changedList === null || changedList === void 0 ? void 0 : changedList.length) &&
 		            safeCallWithCurrentFiber({
@@ -6492,12 +6737,10 @@ function requireIndex_development_1 () {
 		                (function finishMount() {
 		                    enableScopeTreeLog.current && setLogScope();
 		                    renderDispatch.reconcileCommit(fiber);
-		                    var commitList = renderDispatch.pendingCommitFiberList;
 		                    var changedList = renderDispatch.pendingChangedFiberList;
 		                    renderDispatch.resetUpdateFlowRuntimeFiber();
 		                    renderDispatch.pendingCommitFiberList = null;
 		                    renderDispatch.pendingChangedFiberList = null;
-		                    (commitList === null || commitList === void 0 ? void 0 : commitList.length) && renderDispatch.reconcileUpdate(commitList);
 		                    enableScopeTreeLog.current && setLogScope();
 		                    (changedList === null || changedList === void 0 ? void 0 : changedList.length) &&
 		                        safeCallWithCurrentFiber({
@@ -6514,7 +6757,7 @@ function requireIndex_development_1 () {
 		    });
 		}); };
 
-		var version = "0.3.12";
+		var version = "0.3.14";
 
 		exports.CustomRenderDispatch = CustomRenderDispatch;
 		exports.MyReactFiberNode = MyReactFiberNode;
@@ -6542,7 +6785,6 @@ function requireIndex_development_1 () {
 		exports.defaultDeleteCurrentEffect = defaultDeleteCurrentEffect;
 		exports.defaultDispatchMount = defaultDispatchMount;
 		exports.defaultDispatchMountLatest = defaultDispatchMountLatest;
-		exports.defaultDispatchMountLegacy = defaultDispatchMountLegacy;
 		exports.defaultDispatchUnmount = defaultDispatchUnmount;
 		exports.defaultDispatchUpdate = defaultDispatchUpdate;
 		exports.defaultGenerateEffectMap = defaultGenerateEffectMap;
@@ -6647,13 +6889,16 @@ function requireIndex_development_1 () {
 		exports.processClassComponentMount = processClassComponentMount;
 		exports.processClassComponentUnmount = processClassComponentUnmount;
 		exports.processClassComponentUpdate = processClassComponentUpdate;
-		exports.processClassComponentUpdateQueue = processClassComponentUpdateQueue;
+		exports.processClassComponentUpdateQueueLatest = processClassComponentUpdateQueueLatest;
+		exports.processClassComponentUpdateQueueLegacy = processClassComponentUpdateQueueLegacy;
 		exports.processConsumer = processConsumer;
 		exports.processFunction = processFunction;
-		exports.processFunctionComponentUpdateQueue = processFunctionComponentUpdateQueue;
+		exports.processFunctionComponentUpdateQueueLatest = processFunctionComponentUpdateQueueLatest;
+		exports.processFunctionComponentUpdateQueueLegacy = processFunctionComponentUpdateQueueLegacy;
 		exports.processHook = processHook;
 		exports.processLazy = processLazy;
-		exports.processNormalComponentUpdate = processNormalComponentUpdate;
+		exports.processNormalComponentUpdateLatest = processNormalComponentUpdateLatest;
+		exports.processNormalComponentUpdateLegacy = processNormalComponentUpdateLegacy;
 		exports.processPromise = processPromise;
 		exports.processProvider = processProvider;
 		exports.processState = processState;
@@ -6905,6 +7150,7 @@ function requireIndex_development () {
 		    HOOK_TYPE[HOOK_TYPE["useInsertionEffect"] = 13] = "useInsertionEffect";
 		    HOOK_TYPE[HOOK_TYPE["useImperativeHandle"] = 14] = "useImperativeHandle";
 		    HOOK_TYPE[HOOK_TYPE["useSyncExternalStore"] = 15] = "useSyncExternalStore";
+		    HOOK_TYPE[HOOK_TYPE["useOptimistic"] = 16] = "useOptimistic";
 		})(exports.HOOK_TYPE || (exports.HOOK_TYPE = {}));
 
 		exports.UpdateQueueType = void 0;
@@ -7872,12 +8118,15 @@ var ReconcilerDispatchFiber = function (renderDispatch, fiber) {
     }
 };
 
-var currentScheduler$1 = require$$0.__my_react_internal__.currentScheduler;
-var enableScopeTreeLog$2 = require$$0.__my_react_shared__.enableScopeTreeLog;
+var currentScheduler$2 = require$$0.__my_react_internal__.currentScheduler;
+var enableScopeTreeLog$3 = require$$0.__my_react_shared__.enableScopeTreeLog;
 var ReconcilerDispatchMount = function (_dispatch, _fiber, config) {
     var _list = myreactReconcilerExports.generateFiberToMountList(_fiber);
     var pendingCommitFiberArray = [];
     myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        myreactReconcilerExports.defaultInvokeUnmountList(_dispatch, _fiber);
+    });
     _list.listToFoot(function invokeInsertionEffectList(_fiber) {
         myreactReconcilerExports.insertionEffect(_dispatch, _fiber);
     });
@@ -7931,11 +8180,113 @@ var ReconcilerDispatchMount = function (_dispatch, _fiber, config) {
         myreactReconcilerExports.layoutEffect(_dispatch, _fiber);
     });
     myreactReconcilerExports.afterSyncUpdate();
+    var renderScheduler = currentScheduler$2.current;
+    renderScheduler.microTask(function invokeEffectListTask() {
+        enableScopeTreeLog$3.current && myreactReconcilerExports.setLogScope();
+        _list.listToFoot(function invokeEffectList(_fiber) {
+            myreactReconcilerExports.effect(_dispatch, _fiber);
+        });
+        enableScopeTreeLog$3.current && myreactReconcilerExports.resetLogScope();
+    });
+};
+
+var currentScheduler$1 = require$$0.__my_react_internal__.currentScheduler;
+var enableScopeTreeLog$2 = require$$0.__my_react_shared__.enableScopeTreeLog;
+var ReconcilerDispatchUpdate = function (_dispatch, _list, config) {
+    myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.defaultInvokeUnmountList(_dispatch, _fiber);
+        }
+    });
+    _list.listToFoot(function invokeUnmountPendingAndInsertionEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.insertionEffect(_dispatch, _fiber);
+        }
+    });
+    myreactReconcilerExports.afterSyncUpdate();
+    var pendingCreateFiberArray = [];
+    var pendingCommitFiberArray = [];
+    _list.listToFoot(function invokeCreateAndUpdateList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            var beforeHasNode = _fiber.nativeNode;
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallCreateAndUpdate() {
+                    _dispatch.commitCreate(_fiber);
+                    _dispatch.commitUpdate(_fiber);
+                },
+            });
+            var afterHasNode = _fiber.nativeNode;
+            if (!beforeHasNode && afterHasNode) {
+                pendingCreateFiberArray.push(_fiber);
+            }
+        }
+    });
+    _list.listToHead(function invokePositionList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallPosition() {
+                    _dispatch.commitPosition(_fiber);
+                },
+            });
+        }
+    });
+    _list.listToFoot(function invokeAppendList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallAppendList() {
+                    _dispatch.commitAppend(_fiber);
+                },
+            });
+        }
+    });
+    _list.listToFoot(function invokeSetRefList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.safeCallWithCurrentFiber({
+                fiber: _fiber,
+                action: function safeCallSetRefList() {
+                    _dispatch.commitSetRef(_fiber);
+                },
+            });
+        }
+    });
+    pendingCreateFiberArray.forEach(function invokeFinalizeInitialChildren(_fiber) {
+        if (_fiber.nativeNode) {
+            var node = config.getPublicInstance(_fiber.nativeNode);
+            var type = _fiber.elementType;
+            var props = _fiber.pendingProps;
+            var rootContainerInstance = config.getPublicInstance(_dispatch.rootNode);
+            var hostContext = _dispatch.runtimeDom.hostContextMap.get(_fiber.parent || _fiber);
+            if (config.finalizeInitialChildren(node, type, props, rootContainerInstance, hostContext)) {
+                pendingCommitFiberArray.push(_fiber);
+            }
+        }
+    });
+    pendingCommitFiberArray.forEach(function invokeCommitMount(_fiber) {
+        var _a;
+        var node = config.getPublicInstance(_fiber.nativeNode);
+        var type = _fiber.elementType;
+        var props = _fiber.pendingProps;
+        (_a = config.commitMount) === null || _a === void 0 ? void 0 : _a.call(config, node, type, props, _fiber);
+    });
+    myreactReconcilerExports.beforeSyncUpdate();
+    _list.listToFoot(function invokeLayoutEffectList(_fiber) {
+        if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+            myreactReconcilerExports.layoutEffect(_dispatch, _fiber);
+        }
+    });
+    myreactReconcilerExports.afterSyncUpdate();
     var renderScheduler = currentScheduler$1.current;
+    // TODO before next update flow, make sure all the effect has done
     renderScheduler.microTask(function invokeEffectListTask() {
         enableScopeTreeLog$2.current && myreactReconcilerExports.setLogScope();
         _list.listToFoot(function invokeEffectList(_fiber) {
-            myreactReconcilerExports.effect(_dispatch, _fiber);
+            if (myreactSharedExports.exclude(_fiber.state, myreactSharedExports.STATE_TYPE.__unmount__) && !_dispatch.isAppUnmounted) {
+                myreactReconcilerExports.effect(_dispatch, _fiber);
+            }
         });
         enableScopeTreeLog$2.current && myreactReconcilerExports.resetLogScope();
     });
@@ -8011,7 +8362,22 @@ var createDispatch = function (rootNode, rootFiber, rootElement, config) {
         ReconcilerDispatch.prototype.reconcileUpdate = function (_list) {
             var _a, _b;
             (_a = config.prepareForCommit) === null || _a === void 0 ? void 0 : _a.call(config, rootNode);
-            _super.prototype.reconcileUpdate.call(this, _list);
+            var instance = this;
+            myreactReconcilerExports.safeCall(function safeCallBeforeUpdate() {
+                var _a;
+                (_a = instance.beforeUpdate) === null || _a === void 0 ? void 0 : _a.call(instance);
+            });
+            myreactReconcilerExports.safeCall(function safeCallBeforeUpdateListener() {
+                myreactReconcilerExports.listenerMap.get(instance).beforeUpdate.forEach(function (cb) { return cb(); });
+            });
+            ReconcilerDispatchUpdate(this, _list, config);
+            myreactReconcilerExports.safeCall(function safeCallAfterUpdateListener() {
+                myreactReconcilerExports.listenerMap.get(instance).afterUpdate.forEach(function (cb) { return cb(); });
+            });
+            myreactReconcilerExports.safeCall(function safeCallAfterUpdate() {
+                var _a;
+                (_a = instance.afterUpdate) === null || _a === void 0 ? void 0 : _a.call(instance);
+            });
             (_b = config.resetAfterCommit) === null || _b === void 0 ? void 0 : _b.call(config, rootNode);
         };
         ReconcilerDispatch.prototype.patchToFiberInitial = function (_fiber) {
@@ -8138,6 +8504,7 @@ var enableDebugFiled$1 = require$$0.__my_react_shared__.enableDebugFiled, enable
  * @internal
  */
 var prepareScheduler = function () {
+    // enableConcurrentMode.current = false;
     enableDebugFiled$1.current = true;
     enableScopeTreeLog$1.current = true;
     myreactReconcilerExports.enableFiberForLog.current = true;
@@ -8249,7 +8616,7 @@ var Reconciler = function (_config) {
     };
 };
 
-var version = "0.0.3";
+var version = "0.0.5";
 var createReconciler = Reconciler;
 
 exports.createReconciler = createReconciler;