react-fast-context-demo

This project is a Vite + React + TypeScript teaching demo that compares three ways to move the same data through the same nested Fluent UI application:

• Prop passing
• Vanilla React context
• Fast context backed by useSyncExternalStore

What the app shows

• A route-based tab for each implementation
• The same nested workload table in all three tabs
• Sortable headers, filtering, reset, and target-row updates
• Stress runs at 10/sec or 100/sec for five seconds
• Perf stats for total renders, last stress run, and visible workload summary
• A background-color pulse on each shared component whenever it rerenders

Scripts

• npm run dev
• npm run build
• npm run lint
• npm run test

Notes

• The app uses a hash router so each tab is a real lazy-loaded route without requiring server-side rewrite rules.
• The fast-context implementation keeps the React context-like ergonomics while letting components subscribe to selected slices with equality checks.