react icon indicating copy to clipboard operation
react copied to clipboard

Lightweight React 19.x [Feature request/Suggestion]

Open AnderUstarroz opened this issue 2 years ago • 7 comments

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 Screenshot 2023-12-11 at 06 44 30

AnderUstarroz avatar Dec 11 '23 05:12 AnderUstarroz

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.

Janelaxagh avatar Dec 15 '23 15:12 Janelaxagh

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.

huijiewei avatar Jan 26 '24 13:01 huijiewei

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?

Rohitt211 avatar Apr 16 '24 13:04 Rohitt211

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 [email protected]) according to bundlephobia. Can anyone shed some light on this?

https://bundlephobia.com/package/[email protected]

abriginets avatar Apr 26 '24 11:04 abriginets

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

eps1lon avatar Apr 26 '24 11:04 eps1lon

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

If you look at https://unpkg.com/browse/[email protected]/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/[email protected]/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.)

markerikson avatar Apr 30 '24 01:04 markerikson

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”

o-alexandrov avatar May 27 '24 10:05 o-alexandrov