mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
17806594cc
* Move createRoot/hydrateRoot to /client We want these APIs ideally to be imported separately from things you might use in arbitrary components (like flushSync). Those other methods are "isomorphic" to how the ReactDOM tree is rendered. Similar to hooks. E.g. importing flushSync into a component that only uses it on the client should ideally not also pull in the entry client implementation on the server. This also creates a nicer parity with /server where the roots are in a separate entry point. Unfortunately, I can't quite do this yet because we have some legacy APIs that we plan on removing (like findDOMNode) and we also haven't implemented flushSync using a flag like startTransition does yet. Another problem is that we currently encourage these APIs to be aliased by /profiling (or unstable_testing). In the future you don't have to alias them because you can just change your roots to just import those APIs and they'll still work with the isomorphic forms. Although we might also just use export conditions for them. For that all to work, I went with a different strategy for now where the real API is in / but it comes with a warning if you use it. If you instead import /client it disables the warning in a wrapper. That means that if you alias / then import /client that will inturn import the alias and it'll just work. In a future breaking changes (likely when we switch to ESM) we can just remove createRoot/hydrateRoot from / and move away from the aliasing strategy. * Update tests to import from react-dom/client * Fix fixtures * Update warnings * Add test for the warning * Update devtools * Change order of react-dom, react-dom/client alias I think the order matters here. The first one takes precedence. * Require react-dom through client so it can be aliased Co-authored-by: Andrew Clark <git@andrewclark.io>
CPU async rendering demo
What is this fixture?
This is a demo application based on Dan Abramov's recent JSConf Iceland talk about React.
It depends on a local build of React and enables us to easily test async "time slicing" APIs in a more "real world app" like context.
Can I use this code in production?
No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
There are also known bugs and inefficiencies in main so don't use this fixture for demonstration purposes either yet. Until they are fixed, this fixture is not indicative of React async rendering performance.
How do I run this fixture?
From npm version
# 1: Install fixture dependencies
cd fixtures/unstable-async/time-slicing/
yarn
# 2: Run the app
yarn start
From React source code
# 1: Build react from source
cd /path/to/react
yarn
yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
# 2: Install fixture dependencies
cd fixtures/unstable-async/time-slicing/
yarn
# 3: Copy React source code over
yarn copy-source
# 3: Run the app
yarn start