introducing isMuted

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
 

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,
 })

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 })
     }
 

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