So I have a collectionview which fetches data from an api. I would like to save this data so that users don't have to make additional Ajax calls when going back to the page, as they have already requested this data. The issue seems to be that Marionette destroys the collectionview's childviews and when trying to rerender, it tries to render views that have already been destroyed. How do I prevent the childviews from being destroyed?
Related
I am using state provider to route ,when i switch between pages sometimes data loads on view sometimes it's not ,though i can successfully get data from my db but it's not population in my view file to populate the data I need to refresh the page every time
When you switch page, components that were shown previously get disposed.
So any propriety of the scope or any propriety of the previous components gets desroyed.
The simplest solution is refetch needed data in the component(s) that you are showing in the "next" page, best practice is to do that in $oninit function.
Another option is to build a service that stores data between routes and components. This solution is more complicated.
I wanted the list of users to always be in sync with the MongoDB database,
I created an action that dispatches a refresh call to refresh the list of users.
What I have right now is an interval that dispatches the refresh call to refresh the list every 1 second, but I think it's a little hack to do that.
Is there a better way to refresh my list and re-render them through my React views?
What you are doing right now is okay but is expensive, specially if your browser tab is not active (please note that setInterval/setTimeout get less priority by browser if the tab is inactive or minimized).
You might need to explore using RxJS which has the capability to create periodic caller functions and you can subscribe to it in your react view.
Example - https://www.learnrxjs.io/operators/creation/interval.html
I like the view cache feature of ionic. If the view is cached, when navigate to other route, and back, the controller of the view cached will not initialize again.
In recent year, I use react of facebook. It's awesome.
I found that the container component will trigger the lifecycle componentDidMount again if you navigate to other route and back.
Ok, You can control if send ajax or not in componentDidMount base on redux data cache. You can control the component re-render or not by shouldComponentUpdate too.
But An question comes to my mind. I think cache the view which meanings cache the data and view both which meanings the component will not trigger any lifecycle method. It sounds like a view display or hidden.
So, Is it necessary to implement a view cache feature for react container component like ionic view cache?
P.S Anybody can help me edit my question correctly by correctly English XD, thanks!
React bases component instance lifespans on the render output of a parent. If a Parent component returns a <Child> component every time it renders, then React will keep the same Child instance alive. If Parent stops rendering <Child>, then React will unmount and destroy the Child instance.
So, if you want to keep the same component instance alive, you need to keep rendering it from the parent, and do so in the same output structure.
See the React docs on the "reconciliation algorithm" for more info.
I have simple app and one view that is about to change via navigation bar.
Default angular's behaviour is to call controller code every time I am navigating. This arise problem of saving state when changing views (i.e calendar state, checkboxes etc.)
I search for most common well known solution, that is why I am asking below questions:
Should I encapsulate state data in service and load every time controller is called? And this is fine?
Should I prevent situation of calling controller every time I am switching to different menu view?
Does angular-route handle for me preventing of calling controller every time view changed.
Does ui-router handle same as pt. 3?
Is there a way to invoke componentWillUnmount every time I make a new request?
Right now, it is called only sometimes. It's not even called when I refresh the browser.
Situation:
I have a like/dislike module just like stack overflow's. Initially, I sent an ajax request every time a user clicks like or dislike. Because this was so slow and also because I had to disable the buttons to prevent duplications, I instead decided to do an optimistic update. Basically, I just update states when user clicks like or dislike, and I send the ajax request during the componentWillUnmount method. If it doesn't get called, all the likes and dislikes disappear :(
You don't want componentWillUnmount for this. If you're using Flux with React, it's pretty simple: when the store notifies the component that it has changed (after an Ajax request was made), you can ask the store if the update went through successfully. If it hasn't, you can roll back your optimistic update. Are you using Flux?
Just before updating the state, you can check the current state. If user already clicked like or dislike, do not send the ajax request. Otherwise, send the ajax request.
I observed componentWillMount and componentDidMount being called every time, but componentWillUnmount not being called on unmount immediately. Thus two or more react class instances of the same type were binded to the same dom object and I faced issues. componentWillUnmount gets called way later as a batch cleaning all binded objects. I am using react 0.14.2.