So, it's hard to build long, infinitely scrollable lists with lots of bindings without compromising performance. There are many ways to overcome that, but I noticed one particular problem I have no idea how to solve.
Basically if you have long ng-repeat with lots of items and whenever you append or change the data - UI blocks horrendously. The more data you update - longer the freeze.
you can see it on that jsBin - everytime you click the button UI freezes
Is there a way around that?
upd: I thought maybe I should try React and studied this popular post about using React with Angular - seems React won't solve this problem, see this plunker
Related
I have built a custom tab component which is dynamic. I have also included an animation on the tab component whereby on hovering, it shows the close button using useTransition. The issue is however that whenever I hover over the element multiple times, it constantly re-renders.
issue
ideal behaviour (stay in place)
Reproduced - codesandbox
I have seen other posts with a similar problem though other solutions suggest the latest update rectifies this issue but I am using the latest version and still getting this problem. I have also tried useSpring but it just does not meet the requirements that I am looking for. Is there a way around this?
I am trying to integrate InteractJS and ReactJS and I am seeing a strange but predictable problem on moving items from one dropzone to another and a mismatch between the UI and the underlying state object array. I realise this is most likely a bug in my code due my limited knowledge or React updates and/or InteractJS events - or both - but after three days staring at it I am very grateful for any insight into what may be causing this problem.
I have created a minimal codesandbox to demonstrate the problem.
I can drag all of the items into a dropzone and between dropzones in reverse order and both state and rendered output correctly updates.
However if I drag an intermediate item (i.e. not the last one) from a dropzone into another, React incorrectly re-renders the object immediately succeeding the dragged item in the wrong dropzone.
My question is: Why does the React render not match the state object for intermediate items but works correctly dragging items in reverse order?
Thanks
While researching how to handle multitouch gestures (drag and drop, zoom rotating, etc. of elements) in React.js I first found interactjs. It didn't worked well and after some more research I found enter link description here. Good documentation and it works very well with animation libraries.
I would strongly recommend not to use interactjs in a React project.
I am writing a fairly complex Openlayers map application. I am considering implementing React with the application but I am wondering what added benefit it would bring, especially since openlayers has so many built in objects, methods, “stores” etc. Writing React code to access and control those objects etc would be a lot more code. Is it worth it in terms of performance or granularity? (Openlayers is already pretty granular).
OpenLayers handles map view as #estacks said , that is true. There is no reason to use react to handle map view.
But it may not be just map things on your page.
For example; I am working on a map page, it has:
three different data filter modal
one feture detail modal
one modal for property editing
one collapseble div to show data
I use jQuery and bootstrap to handle this features. I am struggling to do that, it is very hard for me.
React or another javascript library for building interfaces helps to achieve this complexity.
Problem
I call setState to add a new recipe to my recipe list
The recipe is a new panel in a Foundation accordion
The accordion title pops up immediately
There is no functionality until page refresh
I have tried everything i can think of including Foundation's reInit, their manual toggle, up, and down methods for accordions, and re constructing the whole accordion
nothing works
This is the solution I came up with.
i was able to call $("#element").foundation("toggle",$target,true) from the console and programmatically open and shut the accordion tab.
element is the accordion wrapper and target the specific tab, true is a param to indicate reflow needed
implementing that function into my app was more trouble than it was worth, for a number of reasons.
i ended up just calling location.reload() and which essentially is like pressing the refresh button. with a modal animation running at the same time it is barely noticeable
so when all else fails manual over-ride could be a viable solution depending on what your individual page is
There is a real answer
in my research i came across quite a few similar github issues that had to do with Foundation plus some sort of dynamic rendering and/or third party framework/library. every situation is a bit different so there isn't one answer
if someone has specific knowledge of what why Foundation or React(possibly), wouldn't let me reInit,reflow,$(document).foundation or do any of the various supposed solutions: I would love to know.
perhaps I could have done something different but if you look at my code I keep state to one component, I init my js plugins in componentDidMount - as far as i know this is what i am supposed to do. thanks
I've got some nested directives inside ng-repeats, they consist of directive that got ng-repeat.
It renders very ugly.
I want to show the content when its finished drawing.
Ive tried to use directives events things like scope.$last, or timeouts but the problem is these elements are created but the browser havent rendered them yet. How to deal with that?
no wonder, you ran into the same problem as me, it's caused by AngularJS dirt checking, it's a cost you using it, but there is not official solution to it yet, there is link has a temp solution you can use, please check on http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/ hope this helps!