1.2.1 • Published 2 years ago
react-performance-hoc v1.2.1
React Performance Hoc
React high order component check how much does it take to render component
Installation
npm install react-performance-hocSimple 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>
)
}