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

![](./assets/main_screen.png)

## Before React Compiler

If we go through and:

- Add an item 2 times

- Increment the counter 2 times

And 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:

![](./assets/before_compiler.png)

## 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:

![](./assets/after_compiler.png)

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