kaganecee / react-performance-hoc

React high order component check how much does it take to render component

React Performance Hoc

React high order component check how much does it take to render component

Installation

npm install react-performance-hoc

Simple Usage

import React from "react"
import withPerformance from "react-performance-hoc"
import Login from "./Login"

const App = () => {
  const PerformantLogin = withPerformance(Login)
  return (
    <div>
      <PerformantLogin/>
    </div>
  )
}

Parameters

Parameter Name	Description	Default
Component	The component you want to measure render time
identifier	specify identifier to easily catch which component it is	"specify identifier"
errorTime	If render time is more than this time, log with console.error	200 (ms)
warnTime	If render time is more than this time, log with console.warn	100 (ms)
onPerformanceCapture()	You can use the render time with callback as you wish, for example you can fetch	It prints the render time to the console according to the error and warn times

Usage with Params

import React from "react"
import withPerformance from "react-performance-hoc"
import Login from "./Login"

const App = () => {
  const onPerformanceCapture = (Component,identifier,renderedTime) => {
    fetch("url",{
      component: Component.name,
      identifier,
      time: renderedTime,
    })
  }
  const PerformantLogin = 
  withPerformance(
    Login,
    "login component", 
    1000,  
    100,    
    onPerformanceCapture
    )
  return (
    <div>
      <PerformantLogin/>
    </div>
  )
}