I wrote a service in angular that fetches items from firebase using snapshotChanges and return them. than in my component i subscribe to the data and store theme in an array. than i show the data in cards using ngFor.
Everytime i switch pages (without reloading) the data is being reloaded in a visible way, it hurts the UX and doesn't look good. i tried using take(1) but it didn't work. Sometimes it shows the same data multiple times.
Why is this happening and what should i do to fix it ?
Tank you :)
You could try to load the data in a wrapper component and pass it to the children. This happens because a component (and all of the loaded data) is destroyed when the component is left and the route is changed.
Related
I have an application where I pass information in components to be sent to the database... after sending I use v-if to hide this component, but when opening this component again the values passed in the previous inputs appear again in this new component, as we having a memory leak, even if I destroy this component and render it again! I'm using nuxt3 and this same code worked perfectly on nuxt2
I'm currently struggling with setting the page of a data table externally before the table data is loaded. In my application the data table page either comes from the URL or the local storage. In theory as soon as the component is created I know on which page of the table the user should end up on.
But setting the page immediately will be of no use because after the data of the table is loaded the table page is set back to 1 again. But since I usually use a computed property for keeping the table data I simply wait for changes on this and update the table page afterwards. Unfortunately this doesn't work if there is a lot of data or the data structure is more complicated the rendering takes a bit longer so my update is coming in too early.
I couldn't find any hints in the docs that this is not supported and created a github issue since it seems like a bug to me, at least judging by some contradictory data in the dev tools.
I also tried to recreate the scenario in a codepen, obviously in this case one could just wait until "loadData" is done but as I said for my application the slight delay between getting the data and it showing up in the table seems to be the issue but leads to the same result in the end.
I tried the same with the options property but couldn't see any notable difference:
:options.sync="myOptions"
Do you guys have any recommendations on how to handle this? Either any way of keeping the page after the data changes or any reliable way to update the page after the table is populated and rendered? I feel like I tried most events of the table but had no luck yet.
Thanks in advance! :)
This really seems to be a bug in vuetify. When the items are updated the page gets reset to 1 but only inside the component. The page prop never reflects that change.
A workaround would be to trigger a change of the page variable on our side. So in your example I put the following at the end of the loadData method.
const p = this.page
this.page = 1
this.$nextTick(() => {
this.page = p
})
This puts the page prop back in sync with the component and it seems like the correct page is loaded immediately, at least inside the codepen.
Bit of background: I'm trying to learn a React and am building a small app with next (using a template from a tutorial I did a while ago). I've recently run into an issue where I need to keep a timer in synch between 2 components that are not in the same hierarchical structure.
I have an Item component that displays a few details about that item(description, title, etc) in a more concise way (a tile displaying just part of the entire item info). If I click on the Item tile, i have a next.js Link component that looks like this:
<Link href={{pathname: "/item", query: { id: item.id }}}>
<a>{item.title}</a>
</Link>
which will redirect me to a new page containing an ItemDetails component which just displays all the information for that item in more detail and using the entire page instead of just the tile used for the Item.
As mentioned above, the issue is that I want to have a countdown timer that is kept in sync between Item and ItemDetails (can be started, stopped, etc from either of them and it's state would be reflected in the other component). Initially, I thought of using MobX and creating a store and using that as a way to keep the same state between the two components. However, the problem with that is that I have multiple instances of the Item component, each pointing to their own ItemDetails and by using a single store that would just share the state of the first started timer between all Items (might be wrong here though since MobX is something i just started reading about yesterday ^^).
My question is, what would be the best way to approach this issue? Is this doable using Mobx plus stores or is it an issue of how the app is structured (eg: find a way to make Item and ItemDetails part of the same hierarchical structure?
Any help would be appreciated.
Here's a working example using React "context" to share the data between components and refs to keep time across re-renders:
https://codesandbox.io/s/silly-http-h25dr?fontsize=14&hidenavigation=1&theme=dark
I have a React component that renders a list of items. I have a different component which allows user to add a new item. This new item is created by making an async call to the server. Can the component that renders the list listen to changes in the server and update itself.
The new item is added through a modal hence when the modal is closed, an action needs to be triggered to update the component that renders the list of items. Right now I am having to refresh the browser to reflect the changes in the UI.
If I close my modal, there is no way I am triggering a change to the component that renders the list of items. I thought about adding the result of the async call which is a list item to the state using redux as a way to cause a re-render. However, the client I am interfacing with does not give back all the properties that the items requires (as a part of the Typescript interface). Hence this method won't work. An alternate way to force a re-render to the component that displays the list. But again, can't really think of a way that would be work and how would I trigger the componentDidUpdate hook.
if (the server supports webSockets) {
use webSockets;
} else {
use socket.io;
}
This is for react native, I want to fetch second page from api as soon as the end of the first page is on the screen and show on recycler list view (https://github.com/Flipkart/recyclerlistview) similar to infinite scroll. How can i achieve this, I tried setting a callback at onEndReached props, but the callback fires as soon as the initial page is loaded. (The initial page is 2 screen heights long).
Don't mount RecyclerListView without data. That might lead to incorrect onEndReached. It is same as ListView contracts, when the callback fires create a new dataProvider and pass to RLV and it'll update.
for the endless listview, you can look this document.
https://medium.com/react-native-development/build-a-chat-app-with-firebase-and-redux-part-1-8a2197fb0f88
But, in official React Native document, you better not to use a ListView but use FlatList instead. Because it's outdated.