diff --git a/README.md b/README.md index a257767..8401812 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,8 @@ If you use Redux, read the section below on how to [Use with Redux](#use-with-re - As a function, it receives `props` and returns a string. - `isCollapsed` is `true` by default. - This collapses the duration & diff logs when a component renders. +- `isMuted` is `false` by default. + - This mute the single component measure log (to be used with `startRecording` & `printRecording`) ### Record diff --git a/examples/src/ExampleApp.js b/examples/src/ExampleApp.js index 20a9f6b..d47ea94 100644 --- a/examples/src/ExampleApp.js +++ b/examples/src/ExampleApp.js @@ -55,12 +55,14 @@ class AnotherCustomComponent extends React.Component { const MeasuredComponent = ReactPerformance.measure({ isCollapsed: false, + isMuted: false, getId: 'example', Component: CustomComponent, }) const AnotherMeasuredComponent = ReactPerformance.measure({ isCollapsed: false, + isMuted: true, getId: 'example-2', Component: AnotherCustomComponent, }) diff --git a/lib/components/measure.js b/lib/components/measure.js index d4d543f..87e9248 100644 --- a/lib/components/measure.js +++ b/lib/components/measure.js @@ -12,10 +12,11 @@ type MeasureType = ({ getId: string | (props: Object) => string, Component: React.ComponentType<*>, isCollapsed?: boolean, + isMuted?: boolean, }) => React.ComponentType<*> -const measure: MeasureType = ({ getId, Component, isCollapsed = true }) => { +const measure: MeasureType = ({ getId, Component, isCollapsed = true, isMuted = false }) => { if (!process || !process.env || process.env.NODE_ENV !== 'development') { return Component } @@ -51,10 +52,14 @@ const measure: MeasureType = ({ getId, Component, isCollapsed = true }) => { prevObject: prevProps, }) const hasChanges = !!changeDetails.length - this.groupStart(hasChanges, 'Rendered %o', componentName) - this.endTimer() - this.logChanges(changeDetails) - this.groupEnd() + if (!isMuted){ + this.groupStart(hasChanges, 'Rendered %o', componentName) + this.endTimer() + this.logChanges(changeDetails) + this.groupEnd() + } else { + this.renderEndedAt = Date.now() + } recordUpdate({ hasChanges, element: this }) } diff --git a/lib/connect.js b/lib/connect.js index 3a76c22..d27aa2a 100644 --- a/lib/connect.js +++ b/lib/connect.js @@ -11,6 +11,7 @@ type ConnectType = ({ getId: string | Object => string, Component: React.ComponentType<*>, isCollapsed?: boolean, + isMuted?: boolean, }) => React.ComponentType<*> const connect: ConnectType = ({ @@ -19,8 +20,9 @@ const connect: ConnectType = ({ getId, Component, isCollapsed, + isMuted, }) => ReactRedux.connect(mapStateToProps, mapDispatchToProps)( - measure({ getId, Component, isCollapsed }) + measure({ getId, Component, isCollapsed, isMuted }) ) export default connect