reactopt / reactopt Goto Github PK

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

JavaScript 100.00%

react developer-tools react-devtools react-component reactjs javascript component optimization commandline-interface command-line-interface

reactopt's Introduction

reactopt

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.

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)

reactopt's People

Contributors

Stargazers

Watchers

reactopt's Issues

Use with Electron

It would be excellent if this could be used from within an electron app after reading over the docs I couldn't find a way to do this.

A clearer example

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

npm run reactopt localhost faild

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

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

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?

Use with Webpack?

Is it possible run it when the final app build is done via Webpack?

Missing some important info in your first version

I really appreciate you guys for this fabulous work.

Suggestion

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

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.
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

Following instructions in README and get error

Repo Steps:

create an react v16 app with create-react-app v1.4.1.
run npm install --save-dev reactopt in the created project.
add "reactopt": "node node_modules/reactopt/main.js" to package.json.
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.

error

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

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.

"shouldComponentDidUpdate" is a typo ?

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.

React Native: How is it supposed to work

I use react-native. The command to start the server I used is yarn run reactopt localhost:4000

When I use Chrome as debugger, I see a separate Chrome instance open with a note "Chrome is being controlled by test software". That page itself is showing "This site can't be reached"

I assume I have to type "done" in the command window that runs reactopt server. Nothing seems to happen. Not sure what to expect here.

async support required??

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