https://github.com/crutchcorn/react-compiler-exploration
A demo of the React Compiler interacting with React Redux
https://github.com/crutchcorn/react-compiler-exploration
Last synced: 3 months ago
JSON representation
A demo of the React Compiler interacting with React Redux
- Host: GitHub
- URL: https://github.com/crutchcorn/react-compiler-exploration
- Owner: crutchcorn
- Created: 2024-05-23T18:58:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-23T19:14:26.000Z (about 1 year ago)
- Last Synced: 2025-03-25T01:35:51.210Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 505 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Compiler Demo
This project demos [the React Compiler](https://react.dev/learn/react-compiler) by featuring:
- A simple +1 counter
- A list of 10,000 items rendering
- A single component to host the state
- Redux to add the 10,000 items using an older `connect` API
## Before React Compiler
If we go through and:
- Add an item 2 times
- Increment the counter 2 timesAnd look at it through the React DevTools profiler, we can see that even when we change state unrelated to the items array, it will still cause a VDOM diff on the 10,000 items, leading to slow(er) performance:

## After React Compiler
Because the React Compiler optimizes state and comp via memoization, it's able to optimize the rendering of the 10,000 items when not interacting with them:

This optimization occured without _any_ code changes on our end in any way.