Sobes.tech
Middle+

How to make a component with 5 props ignore changes in three of them and re-render only when two change?

sobes.tech AI

Answer from AI

To make a component with 5 props re-render only when two of them change, you can use a custom comparison of props. For example, in React, this is done using React.memo and a comparison function:

const MyComponent = React.memo(function MyComponent(props) {
  // component uses props.a and props.b
}, (prevProps, nextProps) => {
  // ignore changes in props.c, props.d, props.e
  return prevProps.a === nextProps.a && prevProps.b === nextProps.b;
});

Thus, the component will re-render only if a or b change. This improves performance by avoiding unnecessary renders when non-essential props change.