React hook to track why the component is re-rendered
npm install use-why-renderThis React hook helps you identify what caused an re-render in your React component
npm install --save use-why-render
Create an instance of the use-why-render class, and call its useWhy() method. Then watch the console for information of why the component updated.
``jsx
import React from "react"
import useWhyRender from "use-why-render"
const MyComponent = (props) => {
useWhyRender(props)
return
$3
You also can pass select properties to the hook.
jsx
const MyComponent = ({ name, age }) => {
useWhyRender({ name })
return (
${name} ${age}!
)
}
`In this example we'll get notified about changes in the
prop, only.$3
`jsx
const MyComponent = ({ name, age }) => {
const [count, setCount] = useState(1)
useWhyRender({ name }, { count })
return (
${name} ${age} ${count} times!
)
}
``We make sure it's removed from production build. It only runs when NODE_ENV !== "production".