maxwellcohen.bsky.social / react-hooks-order-ts
[READ-ONLY] Mirror of https://github.com/MaxwellCohen/react-hooks-order-ts. react-hooks-order-ts.vercel.app
Star 0
Fork 0
Watch
TypeScript 99%
CSS <1%
JavaScript <1%
3 1 0
.vscode
public
src
.cta.json
.gitignore
.prettierignore
eslint.config.js
package.json
pnpm-lock.yaml
prettier.config.js
README.md
tsconfig.json
vite.config.ts
README.md

React Hooks Execution Order Visualization #

A demonstration project that visualizes the execution order of React hooks in different scenarios, comparing behavior with and without the React Compiler.

Overview #

This project helps developers understand how React hooks execute in a complex component tree. It provides side-by-side comparisons of hook execution order:

  • Without React Compiler: Traditional React hook execution behavior
  • With React Compiler: Hook execution with React Compiler optimizations enabled

The project includes a built-in console log viewer that intercepts and displays console logs in a filterable, searchable interface, making it easy to observe hook execution patterns.

Features #

  • 🔍 Visual comparison of hook execution order with/without React Compiler
  • 📊 Interactive console log viewer with filtering and search
  • 🎯 Demonstrates various React hooks: useState, useEffect, useMemo, useCallback, useReducer, useContext, useRef, useLayoutEffect, use, and more
  • 🌳 Complex component tree with nested components, async components, and Suspense boundaries
  • 🎨 Modern UI with Tailwind CSS and dark mode support

Getting Started #

Prerequisites #

  • Node.js (v18 or higher)
  • pnpm (package manager)

Installation #

pnpm install

Development #

To run the development server:

pnpm dev

The application will be available at http://localhost:4000.

Building For Production #

To build this application for production:

pnpm build

Project Structure #

src/
├── components/
│   ├── compiler/              # Components with React Compiler enabled
│   │   ├── ParentWithCompiler.tsx
│   │   ├── AsyncChildWithCompiler.tsx
│   │   └── ...
│   ├── without-compiler/      # Components without React Compiler
│   │   ├── Parent.tsx
│   │   ├── AsyncChild.tsx
│   │   └── ...
│   ├── ConsoleLogViewer.tsx   # Interactive console log viewer
│   └── consoleInterceptor.ts  # Console log interception
├── routes/
│   ├── index.tsx              # Home page
│   ├── with-compiler.tsx      # Route with React Compiler
│   └── without-compiler.tsx   # Route without React Compiler
└── ...

How It Works #

  1. Component Tree: The project includes a complex component hierarchy with:

    • Parent components
    • Child components (Kid, Kid2)
    • Grandchild components (Grandkid)
    • Async components with Suspense boundaries
    • Components using React Context

  2. Hook Logging: Each component logs hook execution with color-coded emojis:

    • 🟦 Parent components
    • 🟨 AsyncChild components
    • 🟩 Kid components
    • 🟪 Grandkid components
    • And more...

  3. Console Interception: The consoleInterceptor captures all console logs and makes them available to the ConsoleLogViewer component.

  4. React Compiler: The React Compiler is enabled via Babel plugin in vite.config.ts. Components in the compiler/ directory use the compiler, while components in without-compiler/ use the "use no memo" directive to opt out.

Console Log Viewer #

The built-in console log viewer provides:

  • Real-time log capture: All console logs are intercepted and displayed
  • Filtering: Filter logs by level (log, warn, error, info, debug)
  • Search: Search through log messages
  • Auto-scroll: Automatically scrolls to new logs (pauses when you scroll up)
  • Clear logs: Clear all captured logs

Click the "Show Console" button in the bottom-left corner to open the viewer.

Testing #

This project uses Vitest for testing. You can run the tests with:

pnpm test

Styling #

This project uses Tailwind CSS for styling.

Linting & Formatting #

This project uses eslint and prettier for linting and formatting. Eslint is configured using tanstack/eslint-config. The following scripts are available:

pnpm lint
pnpm format
pnpm check

Technologies Used #

  • React 19: Latest React with support for use hook and other modern features
  • React Compiler: Babel plugin for automatic memoization and optimization
  • TanStack Router: File-based routing
  • Vite: Build tool and dev server
  • TypeScript: Type safety
  • Tailwind CSS: Utility-first CSS framework

Learn More #