Investigate babel-plugin-optimize-react

[eps1lon]

We try to stick to the namespace import of react via import React from 'react'; and then always use member access when using hooks i.e. const [labelWidth, setLabelWidth] = React.useState(0);.
This has poor minifaction potential (usually member access can't get mangled) and combined with array destructuring this blows up quite a bit:

var _React$useState = _react.default.useState(0),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    labelWidth = _React$useState2[0],
    setLabelWidth = _React$useState2[1];

Facebook recently released babel-plugin-optimize-react which addresses these issues. The PR that would include this into react-scripts is still open.

Did some earlier testing (eps1lon#6) and reductions seemed promising. Since we have now a bigger sample size of hooks usage patterns it would be nice if someone investigates the build changes introduced by this plugin. A branch that includes the build in version control and a diff that shows all the build changes would be nice.

[siriwatknp]

I believe that the plugin is outdated, so I'm closing this.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.