Lightweight React 19.x [Feature request/Suggestion]

[AnderUstarroz]

Is there any chance the newer 19.x version of React will be lighter? More Preact like? Maybe installed on a modular way so only the used features get installed?

The web apps are starting to get heavy guys

[Janelaxagh]

There is a possibility that future versions of React may introduce optimizations to improve performance and reduce size. The development team is constantly working to increase efficiency and reduce package size.

As for a more modular installation, as part of React development, they are working on Concurrent Mode and the Suspense API, which can offer improvements in loading only the necessary components. However, whether this will be a significant reduction in the size of the package or the creation of a more Preact–like functionality is a question that has not yet been answered.

Preact is known for its smaller size and compatibility with React due to a similar API, but at the same time has a reduced size. Perhaps React will adopt similar frameworks to improve efficiency, but significant changes in this direction may require time and careful approach due to the widespread use of React and the need to maintain backward compatibility.

[huijiewei]

Perhaps we could break it up into subpackages, with the latest features bundled into react-core, and support for older versions split into stages, such as react-jsx, react-classics, etc.

[Rohitt211]

Hey there, i am using react 19 canary version but having some of the issues related to new use hook, it keeps calling the api and i have also added the component inside suspense also some of the mui attributes are not supporting in react 19 canary, it crashes the app. what would be the solution? might be new features are not stable right now or wait for official release?

[abriginets]

With React 19 beta it looks like react-dom is now MUCH more lightweight (4kb gzipped in react-dom@beta compared to 42kb gzipped in react-dom@18.3.0) according to bundlephobia. Can anyone shed some light on this?

https://bundlephobia.com/package/react-dom@19.0.0-beta-94eed63c49-20240425

[eps1lon]

react-dom itself is lighter because render and hydrate were removed. The renderer code now lives in react-dom/client. You should compare react-dom from 18.x with react-dom + react-dom/client from 19.x

[markerikson]

@abriginets I think this is an artifact of how React's internals have been rewritten.

If you look at https://unpkg.com/browse/react-dom@19.0.0-beta-94eed63c49-20240425/cjs/react-dom.production.js , the file react-dom.production.js is 6KB unminified, which likely corresponds with that "3.6KB minified" number from Bundlephobia.

But, if you look at that file, it clearly does not contain any of the actual ReactDOM reconciler logic.

Instead, it imports

var ReactSharedInternals =
  require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;

Meanwhile, https://unpkg.com/browse/react-dom@19.0.0-beta-94eed63c49-20240425/cjs/react-dom-client.production.js is 493KB unminified, and is now where the reconciler logic lives. And, that entry point is required in React 19 because you must always use import { createRoot } from "react-dom/client".

So, the real issue here is that Bundlephobia doesn't know that "react-dom/client" is a required import in an actual app, so it's only showing the file size of what is now a wrapper layer file.

(I don't think Bundlephobia can show the actual size of that import now, because React still only ships CJS and Bundlephobia would need ESM and package.exports to trace that entry point.)

[o-alexandrov]

The size of react-dom went from 46KB to 57.5KB gzipped for 18.3.0 vs next (19 release candidate) You can confirm on bundlejs.com: https://bundlejs.com/?q=react-dom%40next%2Fclient&treeshake=%5B%7B+createRoot+%7D%5D

export { createRoot } from “react-dom@next/client”

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[o-alexandrov]

bump