0
const propsAreEqual = (prevProps: IRangeDatePickerProps, nextProps: IRangeDatePickerProps) => {
    return prevProps.details === nextProps.details;
  }

// At botton of the file, i memoize the component: 
export default React.memo(RangeDatePicker, propsAreEqual);

In the parent component i call my RangeDatePicker like that: {isDateModalOpen && <RangeDatePicker details={details} />}

Gabriel Borges
  • 37
  • 7
  • What else does your component do? There are more things than just props that can cause a rerender, and React.memo will only check props. – Nicholas Tower Jul 20 '22 at 15:07
  • @NicholasTower, my component is a RangeDatePicker that receive some data as props and filter another data by dates. The component is opened by a modal state. – Gabriel Borges Jul 20 '22 at 15:10
  • Without seeing more i can't tell you exactly what the problem is, but here are the things that could cause a rerender despite the memo is: 1) props.details actually *is* changing. Keep in mind that === only checks reference equality, not the properties inside the object 2) State inside of RangeDatePicker is changing, 3) RangeDatePicker consumes a context, and the context value is changing. – Nicholas Tower Jul 20 '22 at 15:47

0 Answers0