Files
react/compiler/apps/playground
mofeiZandGitHub 5f31228d7d [compiler][playground] Upgrade to Next 15.2.0-canary.64 (#32428)
Upgrade compiler playground to use the newest nextjs release, which
includes react compiler transform pipeline optimizations
https://github.com/vercel/next.js/pull/75676/.

Also made a drive-by fix to avoid the error `Cannot update a component
('Router') while rendering a different component ('StoreProvider'). To
locate the bad setState() call inside 'StoreProvider', follow the stack
trace as described in https://react.dev/link/setstate-in-render`. The
bad setState came from `history.replaceState({}, '', \`#${hash}\`);`.

Prior to this, playground ran side effects in a reducer (i.e. during
render). These have now been moved an effect.
2025-02-20 12:28:34 -05:00
..

React Compiler Playground

An interactive playground to demonstrate, test, and have fun with React Compiler.

Setup

# Build React Compiler from source and install Playground dependencies.
$ yarn

# Or similarly
$ npm install

Development

# Start the local development server with
$ yarn dev

# Or
$ npm run dev

# Rerun the following (in a separate terminal window) when React Compiler
# is changed locally to keep Playground in sync.
$ yarn

Testing

# Install playwright browser binaries
$ npx playwright install --with-deps
# Run tests
$ yarn test

Deployment

This project has been deployed using Vercel. Vercel does the exact same thing as we would locally, by running yarn at the install step in the Playground directory to build React Compiler from source and symlink it as its dependency. This means that Playground is automatically deployed on every push and pull requests will reflect the behaviors of React Compiler of that commit.