First rendering is slow after upgrading from v3 to v4
plus- opened this issue · comments
Describe the bug
After updating my implementation to v4.0.0-rc.9, I'm noticing the component takes a few seconds to render (with some sort of transition). Is this intented? is there a property to change it or render a loading component ?
Expected behavior
the component render faster
- React: 17.0.1
- React Native: 0.64.1
- React-Native-Gesture-Handler: 1.10.3
@zyslife Does it last for a few seconds? Or you might try setting a value for HeaderHeight.
Yes around 3 seconds.
So I've tried refactoring from makeHeaderHeight to headerHeight but it doesn't work (the flatlist in the tab will scroll but not the header). Keeping previous implementation (makeHeaderHeight) has the correct behavior for me.
I'm using:
"react-native-head-tab-view": "^4.0.0-rc.9",
"react-native-tab-view-collapsible-header": "^2.0.1",
"react-native-tab-view": "^3.0.1",
Yes around 3 seconds.
So I've tried refactoring from
makeHeaderHeighttoheaderHeightbut it doesn't work (the flatlist in the tab will scroll but not the header). Keeping previous implementation (makeHeaderHeight) has the correct behavior for me.I'm using:
"react-native-head-tab-view": "^4.0.0-rc.9",
"react-native-tab-view-collapsible-header": "^2.0.1",
"react-native-tab-view": "^3.0.1",
I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
OK, I am busy these days, I will find time to check this problem. Until then, please try to return the version of react-native-tab-view to V2. It would be great if this could be resolved.
@plus- @surethink
OK, I am busy these days, I will find time to check this problem. Until then, please try to return the version of
react-native-tab-viewto V2. It would be great if this could be resolved.
@plus- @surethink
I tried but it didn't help. But lazy on CollapsibleHeaderTabView works though so I'm using it for now.
@plus- @surethink I created a new project and set lazy to true, but I didn't find any exceptions. You can check out the demo.Tell me what I didn't do right.
lazy need to be false for the delay to occur.
Also I don't think there is an exception, it's just slower to render the first time.
@plus- Yes. This is not an exception. But the render speeds I see are normal.
surethink: I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
you: lazy need to be false for the delay to occur.
Doesn't that have anything to do with the value of lazy. Alternatively you can modify my demo, or you can provide a code snippet so I can see the problem. Thanks.
@plus- Yes. This is not an exception. But the render speeds I see are normal.
surethink: I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
you: lazy need to be false for the delay to occur.Doesn't that have anything to do with the value of lazy. Alternatively you can modify my demo, or you can provide a code snippet so I can see the problem. Thanks.
@plus- @surethink I created a new project and set lazy to true, but I didn't find any exceptions. You can check out the demo.Tell me what I didn't do right.
What I mean is that I added a lazy props to fix the problem I meet in some extent :)
@plus- Yes. This is not an exception. But the render speeds I see are normal.
surethink: I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
you: lazy need to be false for the delay to occur.
Doesn't that have anything to do with the value of lazy. Alternatively you can modify my demo, or you can provide a code snippet so I can see the problem. Thanks.
@plus- @surethink I created a new project and set lazy to true, but I didn't find any exceptions. You can check out the demo.Tell me what I didn't do right.
What I mean is that I added a lazy props to fix the problem I meet in some extent :)
okay. i get it.
@plus- Yes. This is not an exception. But the render speeds I see are normal.
surethink: I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
you: lazy need to be false for the delay to occur.
Doesn't that have anything to do with the value of lazy. Alternatively you can modify my demo, or you can provide a code snippet so I can see the problem. Thanks.
@plus- @surethink I created a new project and set lazy to true, but I didn't find any exceptions. You can check out the demo.Tell me what I didn't do right.
What I mean is that I added a lazy props to fix the problem I meet in some extent :)
okay. i get it.
@plus- Yes. This is not an exception. But the render speeds I see are normal.
surethink: I had the same issue with you when I upgrade from v3 to v4, just try to add a lazy props to the CollapsibleHeaderTabView : "lazy={true}"
you: lazy need to be false for the delay to occur.
Doesn't that have anything to do with the value of lazy. Alternatively you can modify my demo, or you can provide a code snippet so I can see the problem. Thanks.
@plus- @surethink I created a new project and set lazy to true, but I didn't find any exceptions. You can check out the demo.Tell me what I didn't do right.
What I mean is that I added a lazy props to fix the problem I meet in some extent :)
okay. i get it.
my page has a head component and 4 tabs with lazy={true}, related tab lib is react-native-tab-view
when there are 1-5 items of first tab, the performance is acceptable
I made a test with 12 items in first tab, it needs 3-4 seconds to show the head component, another 2-3 seconds to show the items of first tab.
my item component is complicated, so I change to just render a Text item, the performance becomes good. but with the same complicated component in other page, the performance is very good.
please help to optimize the performance, thank you
@surethink OK, I will try to find and solve the problem. It would be nice if you could provide an example. This allows me to locate the problem faster.
@surethink OK, I will try to find and solve the problem. It would be nice if you could provide an example. This allows me to locate the problem faster.
I think the problem is caused by the complicated component, but it is so complicated that I can't posted it here. sorry for that.
other code is the same with the example code you provide.
I remember there is no such issue in V3, the component I use then was also complicated
@surethink
I'm sorry for the late reply.
Can you try modifying the following two parts of the code to locate the bug?
//GestureContainer.tsx
//replace
//<Animated.View style={[styles.container, opacityStyle]}>
//to
<Animated.View style={[styles.container]}>//createCollapsibleScrollView
//replace
//<Animated.View style={[styles.container, sceneStyle]}>
//to
<Animated.View style={[styles.container]}>@zyslife I recorded two videos before/after modifying for your reference
1、before modify
https://user-images.githubusercontent.com/23416921/126023162-04f8c293-016a-41ef-937b-87959381063b.mov
2、after modify
https://user-images.githubusercontent.com/23416921/126023186-0e7ed5f0-8fa5-49c0-bc6c-fafa768cbc4b.mov
@surethink
Before the header is displayed, the height of the header is calculated. If the headerHeight can be provided, the header will be displayed as soon as possible.
Items are not displayed because the onContentSizechange function is needed to calculate whether items can currently be displayed. The next version will provide a renderLoadingView function that lets you render waiting pages.
@surethink You can try setting the headerHeight.
And set the renderLoadingView function in v4.0.0-rc12.
If you have any questions, please keep giving feedback.
@surethink You can try setting the headerHeight.
And set therenderLoadingViewfunction inv4.0.0-rc12.
If you have any questions, please keep giving feedback.
I have set the headerHeight and tried the renderLoadingView. it seems faster a little
1、renderLoadingView only improve ux in some extent, but not solve it. I tried to render most simple items in first tab, but there are still 3-4 seconds before rendering any item. I read your source code ,there seems to be a lot of calculations. would you please do some improvements only for first render of the screen. I'm not sure whether that works, just a suggestion.
2、When switch tab/onRefresh I found an unexpected green background that haven't seen before, not sure what caused it
3、After I scroll off the start point, then tap on some item, the scroll indicator will get back to the start point automatically
thank you for your time
appVideo.mov
@surethink Sorry, the green background is the test code I accidentally added. I have removed it now, please check v4.0.0-rc.13
@zyslife thanks, I have updated to the latest version.
I discover some render issue, maybe can give you some inspiration
I made the screen logic as simple as possible, only one useEffect to set data for header component, no items in first tab. and a simple scrollHeader function , even so, the renderScrollHeader function was called 8 times; renderScene function was also called 8 times, at the same time the screen was rendered only 2 times .I tried useCallback, it seems not work
when I add renderTabBar function , the three functions were called 9 times each, the screen was still rendered 2 times
const renderScrollHeader=()=>{ renderTimesRef.current += 1 console.log("scroll header rendering", renderTimesRef.current) return ( <View style={{ paddingBottom: 8, backgroundColor: colors.backgroundColor }} ></View> ) }
@surethink
In fact, it is normal to render multiple times, because you need to update the headerHeight,tabBarHeight, TAB's ref, if you can provide tabBarHeight,headerHeight will reduce the rendering times accordingly.
But it's not going to be reduced to one.
@surethink
In fact, it is normal to render multiple times, because you need to update theheaderHeight,tabBarHeight,TAB's ref, if you can providetabBarHeight,headerHeightwill reduce the rendering times accordingly.
But it's not going to be reduced to one.
got it, thank you