I have a simple react component that uses memo, eg:
const Greeting = memo(function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
});
How can I measure how successful this memo is? Eg: I want to know how often it skips re-rendering because of the memo. Is there a general purpose hook/util that I can use to measure this?
I would like to know the count of all attempted renders and the count of renders that are skipped because of memo.
Maybe have my own memo function to calculate this? Was thinking something like this:
function memoProfile(Component, arePropsEqual) {
let allRenders = 0;
let skippedRenders = 0;
return memo(Component, (prevProps, nextProps) => {
allRenders++;
const propsEqual = arePropsEqual
? arePropsEqual(prevProps, nextProps)
: false; // TODO: use default memo comparison
if (propsEqual) {
skippedRenders++;
}
console.log(`Skipped renders: ${skippedRenders}/${allRenders} (${(skippedRenders / allRenders * 100).toFixed(2)}%)`);
return propsEqual;
});
}
Not sure how to call the default memo comparison, or is there a better way?
How can I measure how successful this memo is? Eg: I want to know how
often it skips re-rendering because of the memo. Is there a general
purpose hook/util that I can use to measure this?
No, there is nothing “out-of-the-box” that measures this.
It’s also rather difficult to prove the negative, in general. It’s easier to prove a component rendered when you expect it to than it is to prove it didn’t render when you weren’t expecting it to.
I would like to know the count of all attempted renders and the count
of renders that are skipped because of memo.
If you are just wanting to know how effective the memo Higher Order Component is between a parent-child coupling you can use a React ref to track the components’ render counts, and compare the counts.
Example:
const renderCountRef = React.useRef(0);
React.useLayoutEffect(() => {
renderCountRef.current++;
});
Demo
Here’s a demo with a parent component with two states, count1 and count2, where count1 is passed as props to the child component, and triggers the child to rerender. What you can observe here is that the child component only rerenders when its own state updates, or the prop value passed from the parent changes. When the parent component’s count2 state is updated and the parent rerenders, observe that the child component is not rerendered.
const Child = (props) => {
const [count, setCount] = React.useState(0);
const renderCountRef = React.useRef(0);
React.useLayoutEffect(() => {
renderCountRef.current++;
});
return (
<React.Fragment>
<h2>Child</h2>
<div>
State: {count}{" "}
<button type="button" onClick={() => setCount((c) => c + 1)}>
+1
</button>{" "}
--- Renders: {renderCountRef.current}
</div>
<div>Parent State1: {props.state1}</div>
</React.Fragment>
);
};
const MemoizedChild = React.memo(Child);
const Parent = () => {
const [count1, setCount1] = React.useState(0);
const [count2, setCount2] = React.useState(0);
const renderCountRef = React.useRef(0);
React.useLayoutEffect(() => {
renderCountRef.current++;
});
return (
<div className="App">
<h2>Parent</h2>
<div>
State1: {count1}{" "}
<button type="button" onClick={() => setCount1((c) => c + 1)}>
+1
</button>{" "}
--- State2: {count2}{" "}
<button type="button" onClick={() => setCount2((c) => c + 1)}>
+1
</button>{" "}
--- Renders: {renderCountRef.current}
</div>
<hr />
<MemoizedChild state1={count1} />
</div>
);
};
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<Parent />
</React.StrictMode>
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root" />