[FIX] component: missing renderings in some cases

src/component/component_node.ts

@@ -107,8 +107,14 @@ export function component<P extends object>(
 
   const parentFiber = ctx.fiber!;
   if (node) {
-    const currentProps = node.component.props[TARGET];
-    if (parentFiber.deep || arePropsDifferent(currentProps, props)) {
+    let shouldRender = node.forceNextRender;
+    if (shouldRender) {
+      node.forceNextRender = false;
+    } else {
+      const currentProps = node.component.props[TARGET];
+      shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
+    }
+    if (shouldRender) {
       node.updateAndRender(props, parentFiber);
     }
   } else {
@@ -143,6 +149,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   component: Component<P, E>;
   bdom: BDom | null = null;
   status: STATUS = STATUS.NEW;
+  forceNextRender: boolean = false;
 
   renderFn: Function;
   parent: ComponentNode | null;

src/component/fibers.ts

@@ -43,7 +43,15 @@ function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
     fiber.node.fiber = null;
-    if (!fiber.bdom) {
+    if (fiber.bdom) {
+      // if fiber has been rendered, this means that the component props have
+      // been updated. however, this fiber will not be patched to the dom, so
+      // it could happen that the next render compare the current props with
+      // the same props, and skip the render completely. With the next line,
+      // we kindly request the component code to force a render, so it works as
+      // expected.
+      fiber.node.forceNextRender = true;
+    } else {
       result++;
     }
     result += cancelFibers(fiber.children);