by
3 7
0
3
273
0
Top 10% !
Popular
Specified
Popularity: 831814th place
No tags for this snippet yet.
LanguageJavaScript
SourceGitHub

React Performance/shouldComponentUpdate visibility helper

React Performance/shouldComponentUpdate visibility helper: 
Performance.js
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/1437089/React-Performance-shouldComponentUpdate-?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
// @flow import reShallowEqual from 'recompose/shallowEqual' import Logger from './Logger' class Performance { static shouldComponentUpdate (component, nextProps, nextState, nextContext, dig = false) { if (!__DEV__) { return ( !reShallowEqual(this.props, nextProps) || !reShallowEqual(this.state, nextState) || !reShallowEqual(this.context, nextContext) ) } else { const dirty = [] const propsDiff = !shallowEqual(dirty, dig, 'props', component.props, nextProps) const stateDiff = !shallowEqual(dirty, dig, 'state', component.state, nextState) const contextDiff = !shallowEqual(dirty, dig, 'context', component.context, nextContext) const result = propsDiff || stateDiff || contextDiff if (result) { this._log(component, `is dirty: ${dirty.join(', ')}`) } return result } } // private static _log (component, ...args) { log.debug(`[${Logger.objectName(component)}] ${args.join(' ')}`) } } /* --------------------------------------------------------------------------------------- Below is a copy of shallowEqual, instrumented to aid in finding differences more easily */ /* eslint-disable no-self-compare */ const hasOwnProperty = Object.prototype.hasOwnProperty /** * inlined Object.is polyfill to avoid requiring consumers ship their own * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is */ function is (x: mixed, y: mixed): boolean { // SameValue algorithm if (x === y) { // Steps 1-5, 7-10 // Steps 6.b-6.e: +0 != -0 return x !== 0 || 1 / (x: $FlowIssue) === 1 / (y: $FlowIssue) } else { // Step 6.a: NaN == NaN return x !== x && y !== y } } /** * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. */ function shallowEqual (dirty: Array<string>, dig: boolean, name: string, objA: mixed, objB: mixed): boolean { // always return the result from the known-good recompose library. const result = reShallowEqual(objA, objB) if (!dig || result) { if (!result) { dirty.push(name) } return result } // dig below here let msg = '' if (!result) { msg += name } if (is(objA, objB)) { msg += ' (is diff)' dirty.push(msg) return result } if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { msg += ' (null diff)' dirty.push(msg) return result } const keysA = Object.keys(objA) const keysB = Object.keys(objB) if (keysA.length !== keysB.length) { msg += ' (key length diff)' dirty.push(msg) return result } // Test for A's keys different from B. const diffKeys = [] for (let i = 0; i < keysA.length; i++) { const aKey = keysA[ i ] if (!hasOwnProperty.call(objB, aKey) || !is(objA[ aKey ], objB[ aKey ])) { diffKeys.push(aKey) } } msg += ` ([${diffKeys.join(', ')}] keys are diff)` dirty.push(msg) return result } const log = new Logger(Performance) // eslint-disable-line export default Performance
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus