React-Reactopt: A CLI React performance optimization tool that identifies potential unnecessary re-rendering

reactopt

reactopt

npm version

A CLI React performance optimization tool that identifies potential unnecessary re-rendering.

About

Reactopt identifies specific events that may be causing unnecessary re-rendering of components in your application, and which components may benefit from utilizing shouldComponentUpdate.

Prior to React 16, the module react-addons-perf helped identify locations that developers may want to implement shouldComponentUpdate to limit over-rendering. However, since the module is no longer supported we created Reactopt to fill the gap, and also provide increased functionality for any version of React.

Upon initiating Reactopt, your application will be launched in a browser for you to interact with. After you're finished and type 'done', you will see an audit on your application's component performance.

1.5.0 is the first working version of this module. Utilizes async/await, which is natively supported in Node 7.6+.

Interaction Events Currently Supported:

  • Click/Double Click
  • Drag
  • KeyPress
  • KeyDown
  • Input

We welcome contributions that add additional functionality.

reactopt-screenshot

Install and Use

npm install

npm install --save-dev reactopt

Include this code at the top of your main React component file (our module is meant to be used in development mode):

import React from 'react'

if (process.env.NODE_ENV !== 'production') {
	const { reactopt } = require('reactopt');
	reactopt(React);
}

Include this script in your package.json:

"reactopt": "node node_modules/reactopt/main.js"

Run command

npm run reactopt localhost:####

In the Pipeline

  • Support for React Native
  • Currently gathering feedback from users on useful updates to documentation/readme

Team

This module was created by Candace Rogers, Pam Lam, Vu Phung, Selina Zawacki

Contact

Like our app, found a bug?

Let us know!

[email protected]

Visit us at www.reactopt.com

Acknowledgements

Utilizes a modified version of (why-did-you-update by maicki)

Comments

  • A clearer example
    A clearer example

    Dec 6, 2017

    thanks to the author i am very fond of this tool if you have more clearly detail examples

    Reply
  • Missing some important info in your first version
    Missing some important info in your first version

    Dec 6, 2017

    I really appreciate you guys for this fabulous work.

    Suggestion

    You had missed some important points in your documentation. Those are,

    1. You had used the async function in your code. But you didn't mention that. The async function natively supported in Node JS after 7.6+ version.
    2. You don't have a clear example or documentation of your tool. Can you please make any one of these in first?

    Issue

    After I integrate with my app, I just type "done" in the console. But I don't have seen any report on the console. Platform - Windows 10 NodeJS version - 8.9.2 NPM version - 5.5.1

    Reply
  • Error, no data collected. Try interacting more with your page.
    Error, no data collected. Try interacting more with your page.

    Dec 14, 2017

    I run a simple Create-React-App on localhost:3000.

    I added reactopt to devDeps and run it with the command listed in the README.

    While the app is running, I launch reactopt with the port 3000 as well. I start interacting with my page, click a bunch of places, navigate some pages, do some CRUD calls -- but I always to get Errr, no data collected...

    Any thoughts?

    Reply
  • "shouldComponentDidUpdate" is a typo ?

    Dec 27, 2017

    After I type "done", I saw the following mesage. Should be "shouldComponentUpdate" ?

    Possible improvements to re-rendering * Consider utilizing shouldComponentDidUpdate of components that shouldn't be constantly re-rendering * Note: this may affect functionality of child components

    And, I found this tool does not work with SSL.

    Reply
  • error
    error

    Jan 5, 2019

                                                                                                                                                                                                           
    Reply
  • npm run reactopt localhost faild
    npm run reactopt localhost faild

    Jul 25, 2019

    using ubuntu 18.04.2 LTS latest chrome node 10.16.0 Error log

    node_modules/puppeteer/.local-chromium/linux-508693/chrome-linux/chrome EACCES

    Reply
  • data object fixes: duplicate logic and resolve Promise
    data object fixes: duplicate logic and resolve Promise

    Nov 10, 2017

    removed duplicate logic in index.js causing empty {} in data and resolved Promise to successfully grab data object

    Reply
  • added to promise chain and logo
    added to promise chain and logo

    Nov 10, 2017

                                                                                                                                                                                                           
    Reply
  • Fixed typo
    Fixed typo

    Dec 2, 2017

                                                                                                                                                                                                           
    Reply
  • async support required??
    async support required??

    Dec 4, 2017

    gl06449m:fs aaron.lote$ npm run reactopt localhost:3000

    [email protected] reactopt /Users/aaron.lote/Sites/Reference/fs node node_modules/reactopt/main.js "localhost:3000"

    /Users/aaron.lote/Sites/Reference/fs/node_modules/reactopt/main.js:35 puppeteer.launch({headless: false}).then(async browser => { ^^^^^ SyntaxError: missing ) after argument list at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:528:28) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3) at Module.runMain (module.js:590:10) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] reactopt: node node_modules/reactopt/main.js "localhost:3000" npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] reactopt script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! /Users/aaron.lote/.npm/_logs/2017-12-04T16_50_49_370Z-debug.log

    Reply
  • Logo in terminal looks strange when a user has a color scheme
    Logo in terminal looks strange when a user has a color scheme

    Dec 4, 2017

    Hi there! Awesome work, thank you! I realise this is design feedback rather than code feedback, and probably very low priority in the big scheme of things — but I think this would look a lot nicer for a lot of users if the black background was removed.

    image
    Reply
  • Following instructions in README and get error
    Following instructions in README and get error

    Dec 1, 2017

    Repo Steps:

    1. create an react v16 app with create-react-app v1.4.1.
    2. run npm install --save-dev reactopt in the created project.
    3. add "reactopt": "node node_modules/reactopt/main.js" to package.json.
    4. run npm run reactopt localhost:3000

    Actual Results: It failed with below error:

    puppeteer.launch({headless: false}).then(async browser => {
                                             ^^^^^
    SyntaxError: missing ) after argument list
        at Object.exports.runInThisContext (vm.js:76:16)
        at Module._compile (module.js:542:28)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.runMain (module.js:604:10)
        at run (bootstrap_node.js:394:7)
        at startup (bootstrap_node.js:149:9)
        at bootstrap_node.js:509:3
    

    BTW, the README states that below code should be in main component file.

    import React from 'react'
     
    if (process.env.NODE_ENV !== 'production') {
        import { reactopt } from 'reactopt';
        reactopt(React);
    }
    

    But, import statement should NOT be in conditional branch IMHO. I suppose it would fail even we fix the async error problem.

    Reply