I am working on a React Native application.
I have a Scene with a ListView with some Components inside.
Each one of the Components in the ListView can be marked as selected (or unmarked).
Once the Scene has focused in, I fetch the data and display those 500 Components.
I pass the props to each one of the Components in the OnRenderRow method.
Ideally, every time I click on one of the Components I would save the id inside a dictionary in the state and then I would trigger the fetch (now cached) again. Once I fetch the 500 Components again OnRenderRow checks if the ids exist in the dictionary and sets the isSelected prop to true (React will take care of rendering as selected).
Why I am fetching the data again?
In order to refresh React Native's ListView the datasource has to be 'marked as dirty'.
If I would try to refresh the list by reusing the same dataSource:
this.setState({dataSource: this.state.dataSource})
Since it's the same object it would not trigger any OnRenderRow. As far as I know the only way to force the update of the list is using:
ds.cloneWithRows(Array)
Which means it has to go through the whole 500 Components again (Actually it parses them all but it renders them in small windows of 20 or so)
This works pretty fast in the emulator but in the iphone5 it takes 2-3 seconds. I have the same problem with filtering.
Is there any way to force the ListView onRenderRow without parsing the whole dataSource again?
Note: The problem could also be related to Realm Native, but since the second time I fetch the elements I am caching the query and the problem persists its not probably the cause of it.
Related
I'm migrating all module tests of a React Redux Web Application from WebDriverIo to Cypress and found this weird scenario.
I have a table with a series of elements. Clicking on one of them opens a window on the side showing more detailed data. The test I am trying to migrate is one that checks that the window with detailed data remains visible and without altering its data despite any changes I make to the table's search filters. Even if that means discarding the item whose detailed data is currently visible.
Problem? The detail view covers the filters and Cypress doesn't seem to like this and gives me trouble detecting the selectors. For example, imagine this is my table and the black square is the place the detail view will take. (The photo was taken from Internet).
I did several tests with those filters so I know the way I'm doing to access the selectors is the correct one. But, as it keeps behind Cypress is having trouble finding them.
I tried to access filters after closing the detail view and, of course, it worked. Also tried adding the param {force:true} in the .click() action but it also failed.
Somebody has ever faced a similar scenario? Thanks in advance
Imagine this: I have a FlatList presenting a list of message threads. Each cell has a label showing number of new messages in that thread. Each cell also shows a truncated string of the latest message in that thread. Other things are presented too. The list of threads is kept in redux and is set as the data prop for my FlatList. The class instances for the threads do not know of the FlatList and cannot force reload on it when something changes, eg a new message comes in (intentional design). The issue now is that the FlatList does not update when such an event occurs. It only updates when a new thread array is set (new instance).
How can I get the FlatList to update when any of the values in the threads changes?
A timed recurring reload is not preferred. I was thinking to have the threads update (by increasing) a value in redux called MessageThreadUpdateCount which would be a number. That would be done each time any UI connected value changes. The FlatList then uses that redux value as its ExtraData prop. Hence updating when that changes. Using a boolean instead of a number would be raise the question: what should set it to false, and when? Any other suggestions?
For the list to update you need to set the 'extraData' prop of the FlatList component,
This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.
exemple
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
With your state being change when you receive a new message. Note that you can replace 'this.state' by any variable updated when you get a new Message could be a counter for example.
(source: https://facebook.github.io/react-native/docs/flatlist.html)
Hope this will help you.
I have a performance issue when I open ionic 3 Modal.
I need to show a list in the modal and the length of list is 1000.
It takes few seconds to open the modal while they are rendered.
I thought about using InfiniteScroll in the modal, But I use Searchbarwhich means server-side should develop more APIs for that.
Since the data of list is quite static, I would like to make like :
Preload the modal page and hide by default.
Show the modal when it should be opened.
When the modal is closed, DO NOT destroy it, just hide.
But according to the ionic docs, I can't reuse modal.
So my question is : Is there a better way to make searchable 1000 list in ionic3?
Thanks.
EDIT : I have tried with localStorage to save json (about 100kb) and stop using XHR to reduce loading time. However I don't feel loading time gotten faster. I tested with just 100 list instead of 1000 and opening modal was a lot faster.
There are a several options:
If it is actually static, just place it in web storage and retrieve it when the use reloads the page.
If it's "quite" static, whatever that means, just place it in the DOM somewhere so it only has to load once per page load. When the user clicks the link to open the modal, store the data in a hidden field. It might even be a good idea to load it asynchronously as the page is loading, which could potentially completely eliminate any loading times at all from the user's perspective.
Use your own modal, and just hide/show it. Load it async.
Example of cache
jQuery AJAX Example
Ok I made it by using <ion-infinite-scroll (ionInfinite)="doInfinite($event)">.
First of all, when modal is opened, get list data from the server
and save in local storage
In the beginning just show 20 items out of 1000. So the rendering
would be a lot faster.
When user scrolls down, doInfinite will be executed.
In the doInfinite function, check what is the next index in order to show
the data. Like pagination logic. And get proper data and push to
the list array.
About <ion-searchbar>, when you get list data from either server
or local storage, save an original list data for the search (In my case, I just used this.originalData = myData like that.). By doing so, whenever user searches by typing, you can filter from 1000 array but no slow rendering issue.
All, I am new to Windows 7 Phone. My situation is that I have a main page which contains a ScrollViewer which in turn houses a StackPanel. I want to populate this StackPanel with multiple sub-StackPanels (at runtime) which are to hold an Image Thumb nail a hyperlink and some basic information about the image.
This is all good when I do this from the main page, but I want to know how to update this control (which is on the main page), but from any page other than the main page. I would like to know what is considered best practice for updating a page's control (like that outlined above) from another page.
Obviously there are a number of ways to pass data between pages
PhoneApplicationService.Current.State["yourparam"] = param
NavigationService.Navigate(new Uri("/view/Page.xaml", UriKind.Relative));
then in other page simply
var k = PhoneApplicationService.Current.State["yourparam"];
and many others. But what is best practice for updating a generic control from a different page?
Note: There are many question about data access and passing between pages.
Passing data from page to page
How to pass the image value in one xaml page to another xaml page in windows phone 7?
Passing image from one page to another windows phone 7
and more. This is not what I am asking.
If I understand your question correctly, you are trying to update a control which is on for example MainPage.xaml from another page for example Page2.xaml.
As far as I know there is no way to reach a pages controls from another page, and that seems unnecessary for the cases that I can think of.
The method used to achieve what you are trying is usually done by triggering an action (like the press of a button ) and passing a parameter to the page you are trying to update the control. And on that page's onnavigatedto event (or viewmodel constructor if you are using the MVVM pattern), update your control based on the passed parameter.
If your update is based on data then the best practice is to bind an observable collection or an object that extends the INotifyPropertyChanged (basically any object that can signal that one of their property changed to the ui) and change the data based on the parameter that is passed.
If these two pages somehow are visible at the same time and there is no navigation needed between them( like a popup or sliding menu kind of ui) then you can make the page that you are showing in the popup a usercontrol, and reach to the parent's controls by this.Parent.
I can be more helpful if you give more specifics about your app's flow.
The MVVM pattern would be a good way to go. Saying MVVM is too complicated for small teams isn't exactly accurate - the purpose of MVVM is to decouple Silverlight or WPF code. Using the codebehind of a Silverlight page to directly access data creates coupling in your code and accrues technical debt. Whether you're one developer or 100, if your UI is coupled with your data classes, if you have to change your data classes, you will have to make changes to every UI element that uses those classes. This takes longer and makes your application more difficult to change.
MVVM makes it so your UI (the View) doesn't know anything about the data (your Model). The ViewModel is the code in between that the UI can bind to, and which manages events in the UI that need to be persisted to the Model, and also changes in the Model that need to be represented in the View. For this reason, it handles events, and that's what it sounds like you need in your code - an event that can exist off of the codebehind, that can update the Views bound to it when the data changes. If you have two pages, then an event on one of the pages will be sent to the ViewModel, which will make a change to the Model (data) if necessary, and pass it back to the ViewModel. The ViewModel would then update any of the UI elements (Views) bound to that piece of data.
There's a REALLY good demonstration of how to implement the MVVM design pattern here
. The guy goes through and takes a typical WPF application (just like Silverlight), where the UI codebehind implements event handlers that directly access data, and refactors it using the MVVM pattern.
I am having huge data, to display this I am using grid with paging enabled,
and loading the first page data.
How i can load the next page data in the back ground ??
so that when the user clicks next button I will show the data which is preloaded.
Any work around.
Thanks in advance,
kkchaitu
The simpliest solution could be a loading whole set of data to the store and use Paginating Toolbar for filtering purpose, however you refering that amount of data is "huge" - this could make solution uneffective...
or
Have 3 set of data ready (before - empty at start, actual, and after) and overwrite onload events:
after loading - display and load next, (or previous),
before load check is next (or previous) is avaible - use it, change what is prevoius, actual, next, prepare what should be loaded after (in background)
keep in mind that Ajax requests are asinchronic and clicking could be faster than loading and this should be predicted in logic... However this is just an idea