chore: address coderabbit feedback

Author: MarcelOlsen

docs/README.md

@@ -6,7 +6,7 @@ Welcome to the MiniReact design docs. These documents dive deep into how the fib
 
 MiniReact is a simplified React clone built with a modern fiber architecture. It's not trying to be a production framework - it's an educational project that demonstrates how React works under the hood.
 
-The codebase is fully functional with 484 passing tests covering all major features. It's a great way to understand React's internals without getting lost in production complexity.
+The codebase is fully functional with 539 passing tests covering all major features. It's a great way to understand React's internals without getting lost in production complexity.
 
 ## Documentation Structure
 
@@ -19,6 +19,7 @@ The docs are organized to build understanding progressively:
 Start here. This covers the fundamental concepts: what fibers are, why we have two trees, how the render and commit phases work, and how we traverse the tree without recursion.
 
 Key topics:
+
 - Fiber data structure
 - Double-buffer pattern
 - Render vs commit phases
@@ -30,6 +31,7 @@ Key topics:
 The work loop is the engine that drives everything. It schedules updates, builds the work-in-progress tree, and coordinates between phases.
 
 Key topics:
+
 - Processing units of work
 - Depth-first traversal
 - Effect collection
@@ -41,6 +43,7 @@ Key topics:
 Reconciliation is the diffing algorithm. It figures out what changed between renders and computes the minimal DOM operations needed.
 
 Key topics:
+
 - Key-based reconciliation
 - Movement detection
 - Handling mixed keyed/unkeyed children
@@ -54,6 +57,7 @@ Key topics:
 Events in MiniReact use delegation for efficiency. One listener at the root handles everything and routes events through the React tree.
 
 Key topics:
+
 - Event delegation
 - Synthetic events
 - Portal event bubbling
@@ -65,6 +69,7 @@ Key topics:
 Hooks let functional components have state and side effects. They're implemented as an array on each fiber with order maintained by a cursor.
 
 Key topics:
+
 - Hook storage and context
 - useState and useReducer
 - useEffect and cleanup
@@ -193,7 +198,7 @@ Current bottlenecks and future work:
 
 ## Testing
 
-The test suite has 484 passing tests covering:
+The test suite has 539 passing tests covering:
 
 - Core rendering and reconciliation
 - All hooks (useState, useEffect, useRef, etc.)
@@ -259,6 +264,6 @@ MiniReact implements:
 - Fragment support
 - Component memoization
 
-All in about 3000 lines of readable TypeScript with 100% test coverage.
+All in about 3000 lines of readable TypeScript with comprehensive test coverage.
 
 The goal is understanding, not production use. Fork it, break it, learn from it.

example/src/server.ts

@@ -3,7 +3,7 @@ import { Elysia } from "elysia";
 const PORT = Number(process.env.PORT) || 3000;
 
 const app = new Elysia()
-	.get("/app.js", async () => {
+	.get("/app.js", () => {
 		const file = Bun.file("./public/app.js");
 		return new Response(file, {
 			headers: {
@@ -12,13 +12,18 @@ const app = new Elysia()
 			},
 		});
 	})
-	.get("/", async () => {
+	.get("/", () => {
 		const file = Bun.file("./src/templates/index.html");
-		return new Response(file, {
-			headers: {
-				"Content-Type": "text/html",
-			},
-		});
+		const headers: Record<string, string> = {
+			"Content-Type": "text/html",
+		};
+
+		// Add caching in production
+		if (process.env.NODE_ENV === "production") {
+			headers["Cache-Control"] = "public, max-age=3600";
+		}
+
+		return new Response(file, { headers });
 	})
 	.listen(PORT);
 

src/fiber/beginWork.ts

@@ -17,6 +17,7 @@
 import type { AnyMiniReactElement, FunctionalComponent } from "../core/types";
 import { FRAGMENT, PORTAL, TEXT_ELEMENT } from "../core/types";
 import { cloneChildFibers } from "./fiberCreation";
+import { Deletion } from "./fiberFlags";
 import { setCurrentRenderingFiber } from "./fiberHooks";
 import { reconcileChildren } from "./reconcileChildren";
 import type { Fiber } from "./types";
@@ -245,6 +246,12 @@ function updatePortal(
 				workInProgress.deletions = workInProgress.deletions || [];
 				let child: Fiber | null = current.child;
 				while (child !== null) {
+					// Mark for deletion and clear effect pointers
+					child.effectTag = Deletion;
+					child.nextEffect = null;
+					child.firstEffect = null;
+					child.lastEffect = null;
+
 					workInProgress.deletions.push(child);
 					child = child.sibling;
 				}

src/fiber/fiberCreation.ts

@@ -9,7 +9,7 @@
 import type { AnyMiniReactElement, ElementType } from "../core/types";
 import { FRAGMENT, PORTAL, TEXT_ELEMENT } from "../core/types";
 import { NoEffect, NoLanes } from "./fiberFlags";
-import type { Fiber, Props } from "./types";
+import { FIBER_BRAND, type Fiber, type Props } from "./types";
 
 /**
  * Create a new Fiber instance
@@ -28,6 +28,9 @@ export function createFiber(
 	key: string | null,
 ): Fiber {
 	const fiber: Fiber = {
+		// Brand for runtime type checking
+		[FIBER_BRAND]: true,
+
 		// Identity
 		type,
 		key,

src/fiber/fiberFlags.ts

@@ -36,29 +36,49 @@ export const Update = UpdateEffect;
 export const Deletion: EffectTag = 0b0100;
 
 // ===== LANES (Priority System) =====
+// Using bitwise flags for fine-grained priority control
+// Lower bit position = higher priority
 
 /**
  * No lanes - no work scheduled
  */
-export const NoLanes: Lanes = 0;
+export const NoLanes: Lanes = 0b00000000;
 
 /**
  * Sync lane - highest priority, must complete immediately
- * Used for user interactions (clicks, typing, etc)
+ * Used for controlled inputs, urgent user interactions
  */
-export const SyncLane: Lanes = 1;
+export const SyncLane: Lanes = 0b00000001;
 
 /**
- * Default lane - normal priority
- * Used for data fetches, most updates
+ * Input lane - high priority for discrete user input
+ * Used for clicks, key presses, focus changes
  */
-export const DefaultLane: Lanes = 2;
+export const InputLane: Lanes = 0b00000010;
 
 /**
- * Idle lane - lowest priority
- * Used for non-critical updates that can be delayed
+ * Default lane - normal priority for most updates
+ * Used for data fetches, network responses, regular state updates
  */
-export const IdleLane: Lanes = 4;
+export const DefaultLane: Lanes = 0b00000100;
+
+/**
+ * Transition lane - lower priority for transitions
+ * Used for startTransition(), loading states, animations
+ */
+export const TransitionLane: Lanes = 0b00001000;
+
+/**
+ * Retry lane - for retrying failed updates
+ * Used internally for suspense and error boundaries
+ */
+export const RetryLane: Lanes = 0b00010000;
+
+/**
+ * Idle lane - lowest priority for non-critical updates
+ * Used for analytics, prefetching, offscreen rendering
+ */
+export const IdleLane: Lanes = 0b00100000;
 
 // ===== HELPER FUNCTIONS =====
 
@@ -106,9 +126,20 @@ export function isSubsetOfLanes(set: Lanes, subset: Lanes): boolean {
 
 /**
  * Get the highest priority lane from a set
+ *
+ * Uses two's complement negation to isolate the lowest-order (rightmost) set bit.
+ * In two's complement, -x = ~x + 1. When we AND x with -x, all bits cancel except
+ * the rightmost set bit.
+ *
+ * Example: lanes = 0b0110 (InputLane | DefaultLane)
+ *   lanes:      0b0110
+ *   -lanes:     0b1010  (two's complement)
+ *   lanes & -lanes: 0b0010  (isolates rightmost set bit = InputLane)
+ *
+ * Since lower bit positions represent higher priority (SyncLane = 0b00000001 is highest),
+ * the rightmost set bit is the highest priority lane.
  */
 export function getHighestPriorityLane(lanes: Lanes): Lanes {
-	// Return the rightmost (highest priority) bit
 	return lanes & -lanes;
 }
 

src/fiber/fiberRoot.ts

@@ -6,7 +6,7 @@
  */
 
 import { NoLanes } from "./fiberFlags";
-import type { Fiber, FiberRoot } from "./types";
+import { FIBER_BRAND, type Fiber, type FiberRoot } from "./types";
 
 /**
  * WeakMap to track FiberRoots by their container elements
@@ -67,6 +67,9 @@ export function createFiberRoot(containerInfo: HTMLElement): FiberRoot {
  */
 function createHostRootFiber(): Fiber {
 	return {
+		// Brand for runtime type checking
+		[FIBER_BRAND]: true,
+
 		// Identity
 		type: null, // Root has no type
 		key: null,

src/fiber/index.ts

@@ -42,9 +42,13 @@ export {
 	Deletion,
 	NoLanes,
 	SyncLane,
+	InputLane,
 	DefaultLane,
+	TransitionLane,
+	RetryLane,
 	IdleLane,
 	isEffectTagMutation,
+	hasEffectTag,
 	includesSomeLane,
 	mergeLanes,
 	removeLanes,

src/fiber/reconcileChildren.ts

@@ -501,6 +501,13 @@ function deleteChild(returnFiber: Fiber, childToDelete: Fiber): void {
 	// Mark fiber for deletion
 	childToDelete.effectTag = Deletion;
 
+	// Clear effect pointers to prevent stale chains
+	// This ensures the deleted fiber doesn't keep pointing to old neighbors
+	// which could resurrect stale effect chains or cause memory leaks
+	childToDelete.nextEffect = null;
+	childToDelete.firstEffect = null;
+	childToDelete.lastEffect = null;
+
 	// Add to parent's deletion list
 	if (!returnFiber.deletions) {
 		returnFiber.deletions = [];

src/fiber/types.ts

@@ -7,8 +7,16 @@
  */
 
 import type { AnyMiniReactElement, ElementType } from "../core/types";
+import { FRAGMENT, PORTAL, TEXT_ELEMENT } from "../core/types";
 import type { StateOrEffectHook } from "../hooks/types";
 
+/**
+ * Unique symbol used to brand Fiber objects for stronger runtime type checking.
+ * This prevents false positives in isFiber() by ensuring the object was actually
+ * created as a Fiber, not just any object with similar properties.
+ */
+export const FIBER_BRAND = Symbol.for("mini.react.fiber");
+
 /**
  * Ref types for fiber
  */
@@ -17,15 +25,29 @@ export type RefCallback<T> = (instance: T | null) => void;
 export type Ref = RefObject<unknown> | RefCallback<unknown> | null;
 
 /**
- * Props type for fiber
- * Represents any props object that can be passed to a component
+ * Base props that every component/element can have
  */
-export type Props = {
+export interface BaseProps {
 	children?: AnyMiniReactElement[];
 	key?: string | number | null;
 	ref?: Ref;
-	[key: string]: unknown;
-};
+}
+
+/**
+ * Props type for fiber
+ *
+ * Combines base React props (children, key, ref) with arbitrary attributes.
+ * The Record<string, unknown> allows:
+ * - DOM attributes (id, className, style, etc.)
+ * - Event handlers (onClick, onChange, etc.)
+ * - Data attributes (data-*, aria-*)
+ * - Custom component props
+ *
+ * Note: While this allows any string key, values should be serializable
+ * or functions (for event handlers). Avoid passing complex objects or
+ * circular references that can't be compared for reconciliation.
+ */
+export type Props = BaseProps & Record<string, unknown>;
 
 /**
  * Effect tags indicate what kind of DOM operation needs to be performed
@@ -141,6 +163,12 @@ export interface UpdateQueue<State> {
  */
 export interface Fiber {
 	// ===== IDENTITY =====
+	/**
+	 * Brand symbol for runtime type checking
+	 * This ensures the object was created as a Fiber, not just duck-typed
+	 */
+	readonly [FIBER_BRAND]: true;
+
 	/**
 	 * The type of this fiber's element
 	 * - string: host component (div, span, etc)
@@ -402,13 +430,25 @@ export interface FiberRoot {
 
 /**
  * Type guard to check if a value is a Fiber
+ *
+ * Checks for the FIBER_BRAND first for strong typing, then falls back to
+ * structural property checks for compatibility with older code or testing.
  */
 export function isFiber(value: unknown): value is Fiber {
+	// Quick null/primitive check
+	if (value == null || typeof value !== "object") {
+		return false;
+	}
+
+	// Primary check: verify the brand symbol (strongest guarantee)
+	if (FIBER_BRAND in value && value[FIBER_BRAND] === true) {
+		return true;
+	}
+
+	// Fallback: structural duck-typing for compatibility
+	// This handles fibers created before the brand was added, or in tests
 	return (
-		value !== null &&
-		typeof value === "object" &&
 		"type" in value &&
-		"props" in value &&
 		"return" in value &&
 		"child" in value &&
 		"sibling" in value
@@ -433,29 +473,21 @@ export function isFiberFunctionComponent(fiber: Fiber): boolean {
  * Type guard to check if a fiber represents text content
  */
 export function isFiberText(fiber: Fiber): boolean {
-	return fiber.type === "TEXT_ELEMENT";
+	return fiber.type === TEXT_ELEMENT;
 }
 
 /**
  * Type guard to check if a fiber represents a fragment
  */
 export function isFiberFragment(fiber: Fiber): boolean {
-	// Import FRAGMENT symbol when needed
-	return (
-		typeof fiber.type === "symbol" &&
-		fiber.type.toString() === "Symbol(react.fragment)"
-	);
+	return fiber.type === FRAGMENT;
 }
 
 /**
  * Type guard to check if a fiber represents a portal
  */
 export function isFiberPortal(fiber: Fiber): boolean {
-	// Import PORTAL symbol when needed
-	return (
-		typeof fiber.type === "symbol" &&
-		fiber.type.toString() === "Symbol(react.portal)"
-	);
+	return fiber.type === PORTAL;
 }
 
 /**