How to update items live?

[wiktoriavh]

I know that the items are saved in a cache, so if I add a new item to the list or update something, move away and back to it, the update is there. But I need it to update it live. I looked at the documentation but wasn't able to find anything that tells me how to update something live.

The closest thing I found was the example with a react-router, where useEffect is run when a variable changes and setting the items anew. I have tried by having the data.length be the dependency, but that didn't work.

Is there a possibility where this works and I just did not see it?

[jaredLunde]

I'm not sure what you mean. Can you provide a real world example?

[wiktoriavh]

I'm not sure what you mean. Can you provide a real world example?

So basically I want to see my items in the Masonry style, I wanna be able to click on them to open a modal, update the data associated with the item, and the changes be automatically be updated in the Masonry as well.
I also want to be able to press a button to add more Items to the Masonry and display them.

I hope that clears it up.

[jaredLunde]

This is all achievable by coding the same way you'd always code this with React. When your data updates, the items rendered in the masonry component will update. You can add items any time you want, including when a button is clicked. Just make sure you use the itemKey prop.

[wiktoriavh]

Just make sure you use the itemKey prop.

Looking at the docs, this is for the <Masonry> component, I use useMasonry, which I haven't mentioned before.
Edit: I have realised this exists on useMasonry also which I have implemented with (data) => data.id, but my issue below still persists.

Here is a working example, where I am trying to add a cat but the browser just freezes:
https://codesandbox.io/s/react-masonic-live-updates-pijwf?file=/src/FileGrid.js

Why am I using useMasonry? I was following some recipes mentioned so that I can have a masonry layout that is relative to the scrollable container and not the document window.

[jaredLunde]

here you go https://codesandbox.io/s/react-masonic-live-updates-forked-8mt5p?file=/src/FileGrid.js

[wiktoriavh]

here you go https://codesandbox.io/s/react-masonic-live-updates-forked-8mt5p?file=/src/FileGrid.js

Hey, thank you so much!
I compared the two, so apparently, the issue was that I used a function to get the items instead of using data immediately in the useMasonry. And removing maybeLoadMore.
Was this the only thing you changed, or did I miss anything else?

[jaredLunde]

I think that's it. Basically you don't need the infinite loader when you've got a button doing the work for you :)

[wiktoriavh]

I think that's it. Basically you don't need the infinite loader when you've got a button doing the work for you :)

The reason I had the infinite loader, was because I don't know how much data there will be, a user can create new ones constantly.
But it might be unlikely that there will be over hundreds of files, so perhaps the infinite loader is not needed after all.

[wiktoriavh]

I continue to work with it and realised I now got an issue when I delete an item.

    itemKey: (data) => data.id,

Cannot read property 'id' of undefined

Here is the Sandbox again: https://codesandbox.io/s/react-masonic-live-updates-pijwf?file=/src/FileGrid.js

Console Warning

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

[jaredLunde]

#12

[wiktoriavh]

@jaredLunde Thank you! I added deps to my positioner and now everything works great.

[jaredLunde]

Happy to help!