Elements are redrawn during layout rows

[GreenEyeInvestor]

I don't know why this is happening.

 <PhotoAlbum
            layout="rows"
            photos={medium as any}
            renderRowContainer={({ rowContainerProps, children }) => (
                <div className={stylesBreakpointGrid.rowsContainer}>{children}</div>
            )}
            renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto }: any) => {
                return (
                    <ViewRowsPhotoColumnElementComponent style={wrapperStyle} medium={photo} />
                )
            }}
        />

I have a state for dynamic loading of content (photos), I just combine arrays of data there

//......

setMedium([...documents, ...response.data])

//.....

I expect that as new data arrives, an additional line with several elements will be created and placed at the end of the .react-photo-album--rows block.
In principle, this is what happens, but all the blocks are redrawn, those blocks that are already present in the HTML document.
And it turns out that the previous elements are mixed in different containers.



How can this be fixed?

Adding elements without forming a container for them would also suit me.
Now all the elements are divided like this

<div class="react-photo-album react-photo-album--rows">
    <div class="BreakpointGrid_rowsContainer___hxng">
        <img />
        <img />
        <img />
    </div>
     <div class="BreakpointGrid_rowsContainer___hxng">
        <img />
        <img />
        <img />
        <img />
        <img />
    </div>
</div>

Why not make it easier

<div class="react-photo-album react-photo-album--rows">
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
    <img />
</div>

[igordanchenko]

I expect that as new data arrives, an additional line with several elements will be created and placed at the end of the .react-photo-album--rows block.
In principle, this is what happens, but all the blocks are redrawn, those blocks that are already present in the HTML document.
And it turns out that the previous elements are mixed in different containers.

This is how this library actually works. For a given set of input parameters (photos, spacing, container width, etc.) it produces a single optimal layout, and recalculates it every time the input parameters change. So whenever you add photos to the photos array, the resulting layout changes and may be very different from the one you had before. You can observer this behavior in the playground by pulling the photos slider back and forth.

How can this be fixed?

I'm sure the issue that you are facing is pretty clear in your head, but you are not articulating it clearly. Please see if you can describe the problem that you are facing.

Adding elements without forming a container for them would also suit me.

The reason why each row of photos is wrapped in a <div> container is for the sake of deterministic and reliable layout. It's probably doable to implement it the way you mention above, but I abandoned that implementation option once I ran into edge cases where flexbox was unexpectedly breaking a single row photos into two. But feel free to explore the following option:

renderRowContainer={({ children }) => <>{children}</> }

[GreenEyeInvestor]

This is the effect I get, the previous images are re-adapted after inserting additional elements.
https://codesandbox.io/p/sandbox/romantic-lamarr-nj4gwz?file=%2Fsrc%2FApp.tsx%3A51%2C16
If I output everything via layout="masonry" then everything works fine, but there are problems with rows, I can't understand why =(

[igordanchenko]

Please see my comment above - it explains the effect you are seeing.

If you are trying to build an infinite scroll, you can take a look at the following example - https://codesandbox.io/s/react-photo-album-90-fs95ss?file=/src/App.tsx

You can render each batch of photos in separate <PhotoAlbum> element, and this would prevent the layout shift.

[GreenEyeInvestor]

It really works, thank you very much! Only there are problems with this approach, but I'm ready to put up with them for now =)

[igordanchenko]

I bet there is an issue with the implementation, not with the approach. Please share a sandbox if you require further assistance.

[igordanchenko]

FYI, the upcoming release v3 contains an experimental InfiniteScroll component. Please feel free to give a try and share your feedback.

v3 Preview