javascriptreactjslazy-loadingreact-window

React-Window Calling RenderRow function infinitely

I have used react-window to render large list on UI. Not sure why it's calling the RenderRow function infinitely when I scroll and it's not able to render the pending rows when I am scrolling (showing me blank screen).

Can anyone please tell me, what I am doing wrong?

Thank you :)

Solution

  • There's a small thing that was missing, which is the style that must be send to Row so the code of the RenderRow will be :

    const RenderRow = ({ index, style }) => {
    const item = combinedData[index];

    return item.isServiceParent ? (
      <div style={style} className="service-parent-name">
        <p>{item.title}</p>
      </div>
    ) : (
      <div style={style} className="service">
        <p>{item.name}</p>
      </div>
    );
  };