I have face complex loading example with React.
This is what I want to do how it looks visually
Basically I need to load this in multiple stages.
It is not really good to do with css like elements on the bottom.
Basically I need render, get element width height, render all others.
Just spinning my head how I can do that.
It should be like render->render somehow
Related
We want to put multiple pictures on a carousel with multiple sizes using swiper and the centered slide. Unfortunately, each picture stays on one slide by slide.
We tried to use flex shrink, changed the space between to get multiple pictures on one slide and many parameters trying to get things done. But when we come on the summary of each articles which includes some pictures, some bugs still there at the onClick.
We just want to know if it's possible to reach thing out.
Thank you
Basically title. I want to wait for the cells that are going to visible to be rendered before scrolling to the position because right now i am getting a lot of blank area when scrolling fast.
Can you try to optimize your cell list rendering first? FlashList has this performance issue when the app renders heavier content (videos, high-resolution images,...).
Replacing FlatList with Shopify's FlashList should fix the problem - https://shopify.github.io/flash-list/
I want to render around 1200 items with images carousel in react native like shown on the screen below
FlatList works works so slow. Surprisingly, in case with images, ScrollView works better, but when it goes up 1200 elements, it works slow as hell.
Does somebody know how is that possible to render such amount of elements. Thanks.
Try these few props that help control the amount of items rendered like windowSize, maxToRenderPerBatch , and initialNumToRender .
It might helps with the performance
I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:
The <TransitionGroup> component manages a set of transition components
( and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the
mounting and unmounting of components over time.
Consider the example below. As items are removed or added to the
TodoList the in prop is toggled automatically by the
<TransitionGroup>.
I'm not really sure what that means or why it's important.
Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).
Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)
React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.
Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.
It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.
It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.
It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.
I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.
I would like to create React app where you import, move and resize images on the screen and then export their positions. My idea was that I would have image as a component that would have its own attributes like positions, width, height and source. The problem is that I don't want to render new image element every time the component change its state (position, size, etc.) since it can be slow to load the image. I just want to change its style. Is there some React fashion approach how to do it? Thank you!
Maybe for your problem might be usefull to look life cycle update component...because it gives you some certain pattern to re-render a component in your own way..try to read something on "componentShouldUpdate()" this method give you a way to re-render the component only certain condition.
maybe here might be right for you: https://www.toptal.com/react/optimizing-react-performance
My best