Socket
Socket
Sign inDemoInstall

babel-plugin-optimize-react

Package Overview
Dependencies
53
Maintainers
7
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    babel-plugin-optimize-react

Babel plugin for optimizing common React patterns


Version published
Maintainers
7
Install size
14.8 kB
Created

Readme

Source

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:

// Original
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1_["useState"])(Math.random()),
    _State2 = Object(_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 1),
    value = _useState2[0];
    
// With this plugin
var useState = react__WEBPACK_IMPORTED_MODULE_1_.useState;
var __ref__0 = useState(Math.random());
var value = __ref__0[0];

Named imports to hooks get transformed

// Original
import React, {useState} from 'react';

// With this plugin
import React from 'react';
const {useState} = React;

Array destructuring transform for React's built-in hooks

// Original
const [counter, setCounter] = useState(0);

// With this plugin
const __ref__0 = useState(0);
const counter = __ref__0[0];
const setCounter = __ref__0[1];

React.createElement becomes a hoisted constant

// Original
import React from 'react';

function MyComponent() {
  return React.createElement('div', null, 'Hello world');
}

// With this plugin
import React from 'react';
const __reactCreateElement__ = React.createElement;

function MyComponent() {
  return __reactCreateElement__('div', null, 'Hello world');
}

FAQs

Last updated on 21 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc