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.
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 reproduce on React Native the following player that I made on a wireframe software.
So I have started using the Video component of the expo-av library but I have found no way to control play/pause, as well as the current millis property.
I think the onPlaybackStatusUpdate prop is here to update an object containing the actual properties relating to playback and I think using a useState is the right approach to access these values for UI purposes but I don't know how to modify these values to play/pause the playback or jump a few seconds forwards or back.
I'm a little bit lost and I don't really what to do from that point on, I have searched elsewhere for answers on how to control those properties from UI components but so far no luck
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 am rendering thousands of svg elements using react, and want to make sure that minimal rendering is done in case of change in input. sometimes a single node is updated, and since I don't do any shouldComponentUpdate, it should be re rendering all the elements. I wonder is there a package available to visualize the changes. I see two packages
https://github.com/redsunsoft/react-render-visualizer
https://github.com/spredfast/react-transform-render-visualizer
but what I am really after is how it is done in this article
http://blog.atom.io/2014/07/02/moving-atom-to-react.html
how can it be done? any package available?
There is a setting in Chrome's DevTools that provides a very similar visualization called Show paint rectangles or Paint Flashing. Go to DevTools and hit the escape key on your keyboard. Go to the rendering tab in the panel that appears and choose "Show paint rectangles" or "Paint Flashing":
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