frontend: introduces propsAreEqual function passed to React.memo to reduce re-rendering

This function accepts the component’s previous props, and its new props.
It should return true if the old and new props are equal: that is, if the component will
render the same output and behave in the same way with the new props as with the old.
I need to use this function as state objects that are passed as props will always have different references.
This commit is contained in:
Mose Müller
2024-07-08 15:14:26 +02:00
parent 7d50bd5759
commit 34eb4a0e7c
6 changed files with 125 additions and 47 deletions

View File

@ -0,0 +1,17 @@
import deepEqual from "deep-equal";
export const propsAreEqual = <T extends object>(
prevProps: T,
nextProps: T,
): boolean => {
for (const key in nextProps) {
if (typeof nextProps[key] === "object") {
if (!deepEqual(prevProps[key], nextProps[key])) {
return false;
}
} else if (!Object.is(prevProps[key], nextProps[key])) {
return false;
}
}
return true;
};