babel-plugin-optimize-react
This Babel 7 plugin optimizes React hooks by transforming common patterns into more effecient output when using with tools such as Create React App. For example, with this plugin the following output is optimized as shown:
// Originalvar _useState = Objectreact__WEBPACK_IMPORTED_MODULE_1_"useState"Math _State2 = Object_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__"default"_useState 1 value = _useState20; // With this pluginvar useState = react__WEBPACK_IMPORTED_MODULE_1_useState;var __ref__0 = ;var value = __ref__00;
Named imports to hooks get transformed
// Original; // With this plugin;const useState = React;
Array destructuring transform for React's built-in hooks
// Originalconst counter setCounter = ; // With this pluginconst __ref__0 = ;const counter = __ref__00;const setCounter = __ref__01;
React.createElement becomes a hoisted constant
// Original; { return React;} // With this plugin;const __reactCreateElement__ = ReactcreateElement; { return ;}