image flicker, not support ReactElement as children

[ShellyWang94]

hi, I've found the problem that when i scroll the list with page, the image will reload even if the item has loaded; 1.scrolldown the dynamic list which has image 2.scrollup to the front of page you can see the image flicker when i use checkbox, this sisuation appeared; with this example, you can see the problem: https://8860u.csb.app/

the resolve method is using the React.memo with children; for example:

const Row = memo(({ data, index, style }) => {
  // Data passed to List as "itemData" is available as props.data
  const { items, toggleItemActive } = data;
  const item = items[index];
  console.log("lalall");
  return (
    <div onClick={() => toggleItemActive(index)} style={style}>
      <img
        height="40"
        src="https://avatars.githubusercontent.com/u/19513176?s=80&v=4"
      />
      {item.label} is {item.isActive ? "active" : "inactive"}
    </div>
  );
}, areEqual);

<Dynamiclist ...anyProps>{Row}</Dynamiclist>

but children has to be a function, if not,

const measureIndex = index => {
    const ItemContainer = (
      <div id="item-container" style={{ overflow: "auto" }}>
        {children({ index, data: itemData })}
      </div>
    );

    const MeasurementContainer = measurementContainerElement({
      style: { width, height, overflowY: "scroll" },
      children: ItemContainer
    });

    const { height: measuredHeight } = measureElement(
      MeasurementContainer,
      debug
    );
    return measuredHeight;
  };

measureIndex method will throw a error; so, is there any possible to solve this problem? support the children as simple ReactElement Thanks for your reading.

[gnir-work]

Hey, Could you please clarify the problem? Is the problem:

1. That the images are rerendered if you scroll down and then up?
2. That the checkbox is unchecked when scrolling up and then down?

On Fri, Nov 5, 2021, 07:49 ShellyWang94 @.***> wrote:

hi, I've found the problem that when i scroll the list with page, the image will reload even if the item has loaded; 1.scrolldown the dynamic list which has image 2.scrollup to the front of page you can see the image flicker when i use checkbox, this sisuation appeared; with this example, you can see the problem: https://8860u.csb.app/

the resolve method is using the React.memo with children; but children has to be a function, if not, ` const measureIndex = index => { const ItemContainer = ( <div id="item-container" style={{ overflow: "auto" }}> {children({ index, data: itemData })}

);

const MeasurementContainer = measurementContainerElement({ style: { width, height, overflowY: "scroll" }, children: ItemContainer });

const { height: measuredHeight } = measureElement( MeasurementContainer, debug ); return measuredHeight;

}; ` measureIndex method will throw a error; so, is there any possible to solve this problem? Thanks for your reading.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gnir-work/react-window-dynamic-list/issues/31, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKLMGSUO2ZYWNLPSZNJKSB3UKNV47ANCNFSM5HNCSUDQ .