If a React component is re-reneded in excess it can lead to performance issues. Let's see how to count the number of renders for individual React components using the useRef() hook. We'll also see how to extract this functionality into a custom hook for easier reuse.
In order to track and count each time an individual React component is rendered we can use the useRef()
hook.
const App = () => {
const rendersNo = useRef(0)
const [counter, setCounter] = useState(0)
rendersNo.current = rendersNo.current + 1
const increase = ()=> {setCounter(c => c + 1)}
return(<div>
<button onClick={increase}>
Increase counter & trigger rerender
</button>
<p>Counter: {counter}</p>
<p>Rerenders: {rendersNo.current}</p>
</div>)
}
And if we want to extract this in a separate hook we can do:
const useRenderCount = () => {
const rendersNo = useRef(0);
useEffect(() => {
rendersNo.current++;
});
console.log("Rerenders: " + rendersNo.current)
};
// and in the App component
const App = () => {
useRenderCount()
//...
}
You can see the full codepen example here.
š Neural networks for Javascript developers
The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!
salut Daniel! f misto postul!