Kind Of false positive when using `React.StrictMode`

[welldone-software]

Kind Of false positive when using `React.StrictMode`

[vzaidman]

I'll get to it sometime. If anybody wants to fix it / add a test that proves it fails- you are free to notify here.

[vzaidman]

@Hypnosphi
I tried to reproduce it with a demo and a test and I don't seem to have this issue on React 16.8.6:
86c6ff8

Can you please try to reproduce?

[vzaidman]

@Hypnosphi you are free to reopen it if you manage to reproduce this issue.

[vzaidman]

fixed in version 3.1.0

[justingrant]

@vzaidman - I'm seeing this issue on latest react (16.12.0) and WDYR (3.3.9). I'm only seeing it in a specific case: when I use useMemo to create memoized JS objects that are then used in rendering. The memoized objects have the same values but are different objects. The containing function components are being rendered because their props change (which is expected), but if the memoized objects don't depend on the changing props, then I'll see the problem.

Unfortunately the problem seems to be intermittent-- at least in my app. I've been trying to create a reliable, simple repro case for you, but I've been unable to get it to repro in a simplified example. I'll continue trying to create a repro for you, but in the meantime I've included code below for two methods where the problem happens, just in case the problem might be obvious to you by looking at the code.

My hypothesis of what's going on is that, as stated in the React docs, useMemo is an optimization not a guarantee. If React is occasionally ejecting values from the memo cache (e..g if the cache were a WeakMap), it would correspond to the behavior I'm seeing which is that sometimes I'll ask for a memoized object and get a brand-new object instead. It's possible that StrictMode makes this worse, e.g. React might allow prevent cache resetting during a render but not in between the two renders done in StrictMode. But this is just a guess without any data to back it up.

If React won't reset the cache until its size reaches a particular threshold, this could account for why it's been hard to repro this in a simple repro app that doesn't fill up the cache quickly like my real app does. Again this just just conjecture.

Do you know where in the React code the implementation of useMemo lives? And how and when React 16.12 decides to prune, reset, or switch its cache?

BTW, your library is amazingly helpful. Last week I sped up a slow part of my app by 100x (!!!), from 1000ms renders to <10ms, using only your library and some calls to React.memo. Thanks so much for building and maintaining this amazing tool!

Method 1:

function CalendarDateRange(props: { startDate: Date; endDate?: Date; onClick?: (date: Date) => void }) {
  const { onClick } = props;
  const startMsecs = props.startDate.getTime();
  const endMsecs = props.endDate && props.endDate.getTime();

  const dateStrings = useMemo(() => {
    const startDate = new Date(startMsecs);
    const endDate = endMsecs && new Date(endMsecs);
    const dateStrings = Object.keys(dateFormatOptions).reduce((newObj, name) => {
      const formatOptions = dateFormatOptions[name];
      newObj[name] =
        !endDate || startDate.getTime() === endDate.getTime()
          ? toDateString(startDate, formatOptions)
          : `${toDateString(startDate, formatOptions)} — ${toDateString(startDate, formatOptions)}`;
      return newObj;
    }, {} as Record<string, string>);

    return dateStrings;
  }, [startMsecs, endMsecs]);

  return (
    <h2 className="calendar-date-range" onClick={() => onClick && onClick(props.startDate)}>
      {Object.entries(dateStrings).map(([name, dateString]) => (
        <span key={name} className={`calendar-date-range-${name}`}>
          {dateString}
        </span>
      ))}
    </h2>
  );
}

Method 2:

const RenderSlides = memo(function(props: RenderSlidesProps) {
  const {
    // Swiper render props
    from,
    offset,
    slides,
    // parent component props
    time,
    onTimeClick,
    onEventClick,
    //    onEventDrop,
    hangTimes,
  } = props;

  const slideStyle = useMemo(
    () => ({
      left: offset,
      height: BOTTOM_CALENDAR_CONTENT_HEIGHT,
      width: '100%',
      display: 'inline-block',
      overflow: 'auto',
    }),
    [offset]
  );

  return (
    <>
      {slides.map((unused, i) => {
        const index = from + i;
        // console.log(`RenderSlides bottom: ${JSON.stringify({ index, date: date.toDateString() })}`);
        return (
          <RenderOneSlide
            key={index}
            index={index}
            style={slideStyle}
            time={time}
            onTimeClick={onTimeClick}
            onEventClick={onEventClick}
            // onEventDrop={onEventDrop}
            hangTimes={hangTimes}
            height={BOTTOM_CALENDAR_CONTENT_HEIGHT}
          />
        );
      })}
    </>
  );
});