React: Why is react-dom so big? Why can't we tree-shake it?

[sigginet]

Do you want to request a feature or report a bug?
Request a feature

What is the current behavior?
Bundling react-dom with the current CJS module is _HUGE_ - 124KB of stuff we don't use.
The bundle can be so much smaller by adding the source files into the npm package and enabling users to do a proper tree-shaking by defining the file in webpack

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
When bundling with webpack, we should be able to properly tree-shake the unused code automatically.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.6
Browser Chrome 75
Linux

[threepointone]

"The bundle can be so much smaller by adding the source files into the npm package and enabling users to do a proper tree-shaking by defining the file in webpack" This isn't particularly true. I don't think it would remove anything, since we don't actually ship any dead code. If you aren't using one of react's core functionality (eg - events, or state), the better option might be to not use react at all.

Do you have any concrete examples of code we shouldn't ship in the bundle?

[sigginet]

That doesn't make any sense.
Do you include all of lodash just because you use a part of it's functionality?
(I hope the answer is no)

In this particular example, I'm highlighting an initial load issue. React-dom is a big part of the initial parsing, solely for the hydrate function.

I may use other react core functionality somewhere deeper in the application, but that doesn't mean that I need to make every single user download, parse and load every single part of the core react functionality.

When you only need a Philips size 2 screwdriver, you don't need to bring a whole tool-chest with you.

I'll check if I can manually inject this code and shake some core functionality off this, but the react-dom CJS is just huge. I refuse to believe that this is the minimum required to ship with for basic functionality.

[threepointone]

React, unlike lodash, is not a collection of utilities, so the analogy isn't accurate. .hydrate(), for example, recreates the entire react tree, so indeed requires most of the same machinery.

Closing this for now, but happy to discuss more if you have concrete suggestions. You're welcome to investigate more; and I'd be interested in your learnings from experimenting too. Thank you!

[threepointone]

fyi - There's also a broader discussion to have about ssr/progressive hydration/first load experience, and so on, and that's something the team is actively working on.

[Eddie-CooRo]

@threepointone By "progressive hydration" Do you mean the new Fizz renderer? Or it's something different?

[threepointone]

That’s a big part of it, yes!