Custom headers significantly kill performance

[adammo94]

So I was trying to get what was killing my performance in my timeline and it seems it's coming from Custom header, however it's slow even if nothing's in it.

I have a custom header as a child inside Timeline component like so:

<TimelineHeaders>
  <CustomDateHeader />
</TimelineHeaders>

My CustomDateHeader component:

import { CustomHeader } from 'react-calendar-timeline';

export const CustomDateHeader = (props) => (
  <CustomHeader>
    {({
      headerContext: {
        intervals,
      },
    }) => (
      <>
        <div>
          {intervals.map(interval => (
            <div key={interval.startTime}>
              <span>sth</span>
            </div>
          ))}
        </div>
      </>
    )
    }
  </CustomHeader>
);

export default CustomDateHeader;

If anyone had this problem, solution came to my mind after few hours of head scratching , just change export default CustomDateHeader or however it's called to export default React.memo(CustomDateHeader)