I have redux + API which getting data from the server then convert it to state object for react-native-tab-view from redux:
//types import { NavigationState } from 'react-native-tab-view';export enum STANDINGS_TAB { CHANGE_INDEX = 'STANDINGS_TAB_CHANGE_INDEX',}export type StandingsRoute = { key: string; title: string; league: EsportLeague;};export type StandingsState = NavigationState<StandingsRoute>;interface changeStandingsTabViewIndex { type: typeof STANDINGS_TAB.CHANGE_INDEX; index: number;}...In my tab screen I showing a screen with activity indicator before data is loaded and ready to render for tab view:
//types class StandingsTabView extends React.Component< StandingsTabProps, StandingsState> { _renderTabBar = (...); _renderLabel = (...); getSceneMap = () => { let sceneMap = {}; this.props.standingsState.routes.map((route, index) => { sceneMap[route.league.tournaments[0].league.name] = () => { return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene }; }); return sceneMap; }; _renderScene = SceneMap(this.getSceneMap()); render() { if (this.props.standingsState.routes.length == 0 && this.props.pending) return (<View style={{ flex: 1, backgroundColor: '#07232B', alignContent: 'center', justifyContent: 'center', }}><ActivityIndicator size="large" color={'#6AFCFA'} style={{ padding: 5 }} /></View> ); return (<TabView navigationState={this.props.standingsState} renderScene={this._renderScene} renderTabBar={this._renderTabBar} onIndexChange={this.props.changeStandingsTabIndex} initialLayout={{ width: Dimensions.get('window').width }} /> ); }}const mapStateToProps = (state: RootState) => ({ pending: state.standingsPending.pending, standingsState: state.standingsState, error: state.standingsError.error,});export default connect(mapStateToProps, { changeStandingsTabIndex })( StandingsTabView);But I got this error after load ends and ready in redux:
But if I wait for some time and when all data is loaded before I open screen so there is no activity indicator and data and everything looks fine and exactly as I wanted.Someone told me to change class component to the functional component, I never worked with functional components. And after I changed my code to this:
const StandingsTabView = () => { const dispatch = useDispatch(); const { pending, standingsState, error } = useSelector( (state: RootState) => ({ pending: state.standingsPending.pending, standingsState: state.standingsState, error: state.standingsError.error, }), shallowEqual ); const changeIndex = useCallback( (index: number) => dispatch(changeStandingsTabIndex(index)), [dispatch] ); const renderTabBar = ... const renderLabel = ... const getSceneMap = () => { let sceneMap = {}; standingsState.routes.map((route, index) => { sceneMap[route.league.tournaments[0].league.name] = () => { return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene }; }); return sceneMap; }; const renderScene = SceneMap(getSceneMap()); if (standingsState.routes.length == 0 && pending) return (<View style={{ flex: 1, backgroundColor: '#07232B', alignContent: 'center', justifyContent: 'center', }}><ActivityIndicator size="large" color={'#6AFCFA'} style={{ padding: 5 }} /></View> ); return (<TabView navigationState={standingsState} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={changeIndex} initialLayout={{ width: Dimensions.get('window').width }} /> );};export default StandingsTabView;Now all loading fine even if data not ready yet and I showing activity indicator instead. But tabs are so laggy now its impossible to tap on them. It's like x 10 slower animations I cannot even see how scenes are changing.
Laggy example: https://streamable.com/g9inf0
Can someone explain to me why I did rid of that error by changing from class to functional component but now all so laggy, and how to fix it?