https://github.com/ythecombinator/workshop-react-internals-and-advanced-performance-patterns
🎙️ Demos for my workshop: "React: Internals & Advanced Performance Patterns Workshop".
https://github.com/ythecombinator/workshop-react-internals-and-advanced-performance-patterns
jquery preact react scheduling virtualization
Last synced: 3 months ago
JSON representation
🎙️ Demos for my workshop: "React: Internals & Advanced Performance Patterns Workshop".
- Host: GitHub
- URL: https://github.com/ythecombinator/workshop-react-internals-and-advanced-performance-patterns
- Owner: ythecombinator
- License: mit
- Created: 2025-04-23T11:25:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-16T11:32:46.000Z (3 months ago)
- Last Synced: 2026-04-16T13:29:12.188Z (3 months ago)
- Topics: jquery, preact, react, scheduling, virtualization
- Language: TypeScript
- Homepage: https://react-internals-and-advanced-perf.netlify.app
- Size: 230 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React: Internals & Advanced Performance Patterns Workshop
Welcome to the `React: Internals & Advanced Performance Patterns` workshop!
This workshop is designed to help you understand the inner workings of React and
master advanced performance optimization techniques.
## 📋 Overview
This workshop explores React's internal architecture and mechanisms through
interactive examples and exercises. You'll gain insights into:
- Scheduling, parallelism and concurrency in React and on the web
- Compilers, the React Compiler, Million Lint and related static analysis case
studies
- Measurement with timing, profiling and sensor APIs + crafting custom metrics
- Other performance optimization techniques, like resource hints, priority
hints, lazy-loading, windowing and Preact.
## 🚀 Getting Started
### Prerequisites
- Node.js
- Yarn package manager
- Basic knowledge of React
### Installation
1. Clone the repository:
```sh
git clone https://github.com/ythecombinator/workshop-react-internals-and-advanced-performance-patterns.git
cd workshop-react-internals-and-advanced-performance-patterns
```
2. Install dependencies using Yarn:
```sh
yarn
```
3. Start the development server:
```sh
yarn dev
```
4. Open your browser and navigate to `http://localhost:5173`
## 🛠️ React DevTools
React DevTools is an essential browser extension for React development and will
be particularly useful for this workshop.
### Installing React DevTools
- [Chrome Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Firefox Add-on](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
- [Edge Extension](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
### Using React DevTools in this Workshop
React DevTools will be particularly useful for:
- **Components Tab**: Inspect the component tree, props, state, and hooks
- **Profiler Tab**: Measure rendering performance and identify bottlenecks
## 📖 Additional Resources
> This is an everliving section and I'll keep adding more content here.
- [React Documentation](https://react.dev)
- [React Source Code](https://github.com/facebook/react)
- [Build Your Own React](https://pomb.us/build-your-own-react/)
- [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/)
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for
details.