why-did-you-update | : boom : Puts your console on blast when React | Frontend Framework library

I am new to React apps so please excuse me if my question has an easy answer. I have spent the last few days with Google and have not found a solution for my question.

At my new position, I have been asked to modify a current React app. The short of it is that this app was built before my time and is old. The app does not permit for a dev build. And since it does not allow for a dev build our development team can not see the component layout, props, or state along with any other goodies provided by the React Dev Tools.

My question is how do I make my app work properly with the React Dev Tools?

Other details that may help: Files are located in ABC/app/src/common Normally here at my employer, this would translate into a URL of: www.ABC.com/app/. Yet for some reason, this is not how things are set up.

Instead the app is served from a URL subdomain: app.XYZ.com Also, note that the URL www.XYZ.com is not a React app - (not sure this is relevant)

Basically the build scripts create the bundle and the .min files are moved from the ABC/app/src/common folder to app.XYZ/.

package.JSON:

I previously used the react-addons-perf package to measure various things like wasted renders via Perf.printWasted(). Unfortunately, this package was retired in React 16 in favor of Chrome's Performance tab which doesn't have equivalent tools.

I'm aware of why-did-you-update, but this isn't exactly the same.

Is there any way in React 16 to measure wasted renders?

I have react 16.3.2, and today i attempted to upgrade it through yarn upgrade react@latest it has upgraded the yarn.lock's react@^16.8.2 but when I console.log out the react version it still outputs 16.3.2 Did I miss something?

Here's my package.json

I'm have a very frustrating time trying to optimize my React-Redux application.

I have a header component that is reloading on every change to the redux store. My header component is a PureComponent

I have installed why-did-you-update, and it tells me:

Header.props: Value did not change. Avoidable re-render!

This is my Component:

I have upgraded an older React Native project to 0.47, 0.48 and then 0.49.x. Since I've done so, I keep getting XCode breaking at random moments with the following breakpoint (sometimes others).

My dependencies "dependencies": { "autobind-decorator": "^2.1.0", "cheerio-without-node-native": "^0.20.2", "diacritic": "0.0.2", "expect": "^1.20.2", "harmony-proxy": "^1.0.1", "hoist-non-react-statics": "^2.3.1", "immutable": "^3.8.1", "lodash": "^4.17.4", "lodash-es": "^4.17.4", "lodash.debounce": "^4.0.8", "lodash.memoize": "^4.1.2", "lodash.mergewith": "^4.6.0", "lodash.sorteduniq": "^4.2.0", "lodash.sorteduniqby": "^4.7.0", "lodash.union": "^4.6.0", "lodash.unionwith": "^4.6.0", "lodash.uniqby": "^4.7.0", "mime-types": "^2.1.17", "moment": "^2.18.1", "normalizr": "^3.2.3", "normalizr-immutable": "0.0.4-beta12", "path": "^0.12.7", "react": "16.0.0-alpha.12", "react-immutable-proptypes": "^2.1.0", "react-intl": "^2.4.0", "react-intl-redux": "^0.6.0", "react-native": "^0.49.3", "react-native-action-button": "^2.7.2", "react-native-animatable": "^1.2.3", "react-native-autolink": "^1.1.1", "react-native-code-push": "5.1.3-beta", "react-native-cookies": "^3.2.0", "react-native-deprecated-custom-components": "^0.1.1", "react-native-drawer": "^2.3.0", "react-native-fetch-blob": "^0.10.8", "react-native-fs": "^2.5.2", "react-native-google-analytics-bridge": "^5.3.3", "react-native-image-crop-picker": "^0.17.2", "react-native-image-picker": "^0.26.7", "react-native-immutable-list-view": "^0.6.2", "react-native-invertible-scroll-view": "^1.0.0", "react-native-keyboard-aware-scroll-view": "0.3.0", "react-native-keychain": "2.0.0-rc", "react-native-lightbox": "^0.7.0", "react-native-linear-gradient": "^2.3.0", "react-native-material-kit": "^0.4.1", "react-native-modalbox": "^1.4.1", "react-native-parallax-scroll-view": "^0.19.0", "react-native-photo-view": "^1.5.2", "react-native-popup-menu": "^0.8.0", "react-native-progress": "^3.3.0", "react-native-scrollable-tab-view": "^0.6.7", "react-native-sglistview": "^0.4.3", "react-native-share": "^1.0.23", "react-native-store": "^0.4.1", "react-native-swiper": "^1.5.12", "react-native-vector-icons": "^4.2.0", "react-navigation": "1.0.0-beta.13", "react-redux": "^5.0.5", "react-swipeable-views": "^0.12.5", "react-swipeable-views-native": "^0.12.5", "realm": "^1.13.0", "redux": "^3.7.2", "redux-form": "^7.0.3", "redux-logger": "^3.0.6", "redux-middleware-oneshot": "^0.1.1", "redux-persist": "^4.8.2", "redux-persist-immutable": "^4.3.0", "redux-persist-transform-immutable": "^4.3.0", "redux-thunk": "^2.2.0", "reselect": "^3.0.1", "route-parser": "0.0.5", "webstomp-client": "^1.0.8" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-eslint": "^7.2.3", "babel-jest": "^21.2.0", "babel-plugin-module-resolver": "3.0.0-beta.5", "babel-plugin-react-intl": "^2.3.1", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", "babel-preset-airbnb": "^2.4.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-react-native": "^4.0.0", "babel-preset-react-native-stage-0": "^1.0.1", "babel-register": "^6.24.1", "chai": "^4.1.0", "chai-as-promised": "^7.1.1", "chai-enzyme": "^0.8.0", "chai-immutable": "^1.6.0", "commitizen": "^2.9.6", "cz-conventional-changelog": "^2.0.0", "enzyme": "^3.0.0", "eslint": "^4.7.2", "eslint-config-airbnb": "^15.1.0", "eslint-plugin-babel": "^4.1.2", "eslint-plugin-import": "^2.7.0", "eslint-plugin-jsx-a11y": "^6.0.2", "eslint-plugin-prettier": "^2.3.1", "eslint-plugin-react": "^7.4.0", "eslint-plugin-react-native": "^3.1.0", "expect.js": "^0.3.1", "flow": "^0.2.3", "flow-bin": "^0.56.0", "immutablediff": "^0.4.3", "jest": "^21.2.1", "jest-serializer-enzyme": "^1.0.0", "jshint": "^2.9.5", "mocha": "^3.4.2", "react-addons-test-utils": "^15.6.2", "react-dom": "16.0.0-beta.5", "react-intl-cra": "^0.2.8", "react-native-mock": "^0.3.1", "react-test-renderer": "^16.0.0", "redux-debounce": "^1.0.1", "redux-debounced": "^0.4.0", "redux-devtools": "^3.4.0", "redux-devtools-dock-monitor": "^1.1.2", "redux-devtools-log-monitor": "^1.3.0", "redux-mock-store": "^1.2.3", "remote-redux-devtools": "^0.5.12", "sinon": "^4.0.0", "why-did-you-update": "0.0.8" }

Other symptoms: - react-native run-ios completes with BUILD SUCCEEDED but the app opens and immediately closes on the simulator (works ok from Xcode)

In order to eliminate "old file issues", I created a new react-native project and copied over the newly created xcodeproj file over. To no avail.

Any suggestions?