# fre | frejs | Knowledge Base | Instagit

:ghost: Tiny Concurrent UI library with Fiber.

GitHub Stars: 3.8k

Repository: https://github.com/frejs/fre

---

## Articles

### [How Fre Tracks Promises for Suspense Boundaries: WeakMap and Fiber Architecture](/frejs/fre/fre-track-promises-suspense-boundaries)

Discover how Fre tracks promises for Suspense boundaries using WeakMap and Fiber architecture. Learn about the efficient promise handling in Frejs.

- Tags: internals
- Published: 2026-03-02

### [What Is the Typical Time Slicing Threshold in Fre's Concurrent Mode?](/frejs/fre/fre-time-slicing-threshold-concurrent-mode)

Discover Fre's concurrent mode time slicing threshold. Learn how its fixed 5 ms slice ensures UI responsiveness during intensive tasks and improves user experience.

- Tags: internals
- Published: 2026-03-02

### [How Fre Uses a bMap in Its Diff Algorithm for Fast Key Lookup](/frejs/fre/fre-diff-algorithm-bmap-key-lookup)

Discover how Fre uses a bMap for O(1) key lookup in its diff algorithm, optimizing keyed list reconciliation and avoiding slow O(n²) scans.

- Tags: internals
- Published: 2026-03-02

### [What Operations Does Fre’s Diff Algorithm Support? UPDATE, INSERT, MOVE, and REMOVE Explained](/frejs/fre/fre-diff-algorithm-operations-move-insert-remove-update)

Discover the operations Fre's diff algorithm supports: UPDATE, INSERT, MOVE, and REMOVE. Learn how Fre handles each efficiently for better performance.

- Tags: internals
- Published: 2026-03-02

### [How Fre's Diff Algorithm Optimizes Head and Tail Matching](/frejs/fre/fre-diff-algorithm-head-tail-matching-optimization)

Learn how Fre's diff algorithm optimizes head and tail matching to speed up reconciliation by comparing only the middle section of child fiber arrays.

- Tags: deep-dive
- Published: 2026-03-02

### [Fre's Offscreen Mode: How It Powers Suspense in the Fre Framework](/frejs/fre/fre-offscreen-mode-suspense)

Discover Fre's Offscreen mode for creating suspenseful UIs. Render subtrees without DOM commit, allowing background content preparation with Suspense.

- Tags: deep-dive
- Published: 2026-03-02

### [How Fre's `memo()` HOC Optimizes Component Rendering: A Deep Dive into the Source Code](/frejs/fre/fre-memo-hoc-optimize-component-rendering)

Discover how Fre's memo() HOC optimizes rendering by preventing re-renders when props don't change. Explore shallow comparison and custom equality functions.

- Tags: deep-dive
- Published: 2026-03-02

### [How Fre Implements useContext for Context Propagation: A Deep Dive into the Source Code](/frejs/fre/fre-usecontext-context-propagation)

Learn how Fre implements useContext for context propagation. Explore source code and discover its subscriber-based notification and fiber tree traversal techniques. Optimize your Fre.js apps today.

- Tags: deep-dive
- Published: 2026-03-02

### [Fre's useMemo and useCallback Hooks: A Deep Dive into Memoization](/frejs/fre/fre-memoization-hooks-usememo-usecallback)

Master Fre's useMemo and useCallback hooks. Learn how these memoization techniques optimize performance by caching computations and stable function references.

- Tags: deep-dive
- Published: 2026-03-02

### [How Side Effects Are Managed in Fre Using useEffect and useLayoutEffect](/frejs/fre/fre-side-effects-management-useeffect-uselayouteffect)

Learn how Fre manages side effects with useEffect and useLayoutEffect. Understand their timing for DOM painting and asynchronous updates to optimize your Fre apps.

- Tags: deep-dive
- Published: 2026-03-02

### [State Management Hooks in Fre: useState and useReducer Explained](/frejs/fre/fre-state-management-hooks-usestate-usereducer)

Discover Frejs state management hooks useState and useReducer. Learn how to manage simple and complex component states effectively with these React-compatible tools.

- Tags: deep-dive
- Published: 2026-03-02

### [What Is the Fre bubble() Function? Processing Hook Effects in the Reconciler](/frejs/fre/fre-bubble-function-process-effects)

Discover how Fre's bubble() function processes component side-effects. Learn about layout and normal effects running synchronously and after DOM commit for efficient reconciliation.

- Tags: internals
- Published: 2026-03-02

### [How Fre's `sibling()` Function Traverses Sibling Fibers in the Reconciliation Loop](/frejs/fre/fre-sibling-function-traverse-sibling-fibers)

Discover how Fre's sibling() function traverses sibling fibers using post-order depth-first traversal to commit dirty fibers and find the next work unit.

- Tags: internals
- Published: 2026-03-02

### [How Fre's diff() Algorithm Handles Keyed Reconciliation in the Virtual DOM](/frejs/fre/fre-diff-algorithm-keyed-reconciliation-operations)

Discover how Fre's diff() algorithm achieves O(N) keyed reconciliation. Learn about its double-ended pointers and key-index map for efficient DOM mutations like insert, move, update, and remove.

- Tags: deep-dive
- Published: 2026-03-02

### [How Fre's capture() Function Processes Fibers During Reconciliation](/frejs/fre/fre-capture-function-process-fiber-reconciliation)

Discover how Fre's capture() function processes fibers during reconciliation. Learn how it identifies fiber types, executes logic, and updates DOM nodes for efficient rendering.

- Tags: internals
- Published: 2026-03-02

### [How Fre's reconcile() Function Performs Work with Time Slicing](/frejs/fre/fre-reconcile-function-work-time-slicing)

Discover how Fre's reconcile() function leverages time slicing. Learn how it breaks down tasks into chunks, yields to the browser, and resumes work efficiently for smoother UI performance.

- Tags: internals
- Published: 2026-03-02

### [What Is Fre's update() Function? Scheduling Reconciliation in the Fre Framework](/frejs/fre/fre-update-function-scheduling-reconciliation)

Discover how Fre's update() function schedules reconciliation efficiently. Learn to defer UI updates for optimal responsiveness with this key Fre.js feature.

- Tags: internals
- Published: 2026-03-02

### [How Fre's render() Function Works: A Deep Dive into the Main Entry Point](/frejs/fre/fre-render-function-entry-point)

Understand how Fre's render() function bootstraps the rendering process. Learn about virtual nodes, DOM containers, Fiber trees, and reconciliation tasks.

- Tags: deep-dive
- Published: 2026-03-02

### [Core Components of the Fre Library: Architecture and Functions Explained](/frejs/fre/fre-core-components-functions)

Explore the core components of the Fre library its architecture and functions Discover how seven modules deliver a React-like API in under 7 KB

- Tags: architecture
- Published: 2026-03-02

### [How Fre's ErrorBoundary Catches and Handles Rendering Errors](/frejs/fre/fre-errorboundary-catch-handle-rendering-errors)

Discover how Fre's ErrorBoundary uses a try catch mechanism to find and recover from rendering errors smoothly, ensuring a better user experience.

- Tags: internals
- Published: 2026-03-02

### [How Fre Implements Suspense for Asynchronous Operations: A Deep Dive into the 2KB Framework](/frejs/fre/fre-suspense-support-asynchronous-operations)

Discover how Fre implements Suspense for async operations. Learn how Fre catches Promises, renders fallback UI, and swaps content upon completion for a seamless user experience.

- Tags: deep-dive
- Published: 2026-03-02

### [Fre Keyed Reconciliation Algorithm: How Fre Diffs and Optimizes the Virtual DOM](/frejs/fre/fre-keyed-reconciliation-algorithm-optimizations)

Discover Fre's keyed reconciliation algorithm. Learn how diffing child fibers with four phases optimizes DOM updates, achieves O(1) lookups, and preserves component state.

- Tags: internals
- Published: 2026-03-02

### [How Fre's Fiber Architecture Enables Concurrent Rendering with Time Slicing](/frejs/fre/fre-fiber-architecture-concurrent-rendering-time-slicing)

Learn how Fre's Fiber architecture uses time slicing to break rendering into small units, keeping your browser responsive even during complex updates.

- Tags: internals
- Published: 2026-03-02