Save previous view when move data fetch from componentWillUpdate(WillReceiveProps) to ComponentDidUpdate

Hi. everyone. Trying to move my fetching for component frome Legasy to recommended lifecycle methods.
In this post we loading component when data is fetched, otherwise we show loader. I need to fetch all data to show component, and while fetching need show not only loader, but loader up on my current view(component). Before i did it in

   componentWillReceiveProps(nextProps){
        const current = `${this.props.location.pathname}${this.props.location.search}`
        const next = `${nextProps.location.pathname}${nextProps.location.search}`

        if (current === next && this.props.isAuth === nextProps.isAuth) {
            return
        }

       this.fetchRoutes(nextProps)
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !nextState.isAppFetching && (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps)         
    }

    fetchRoutes(nextProps) {
        const {dispatch, location} = nextProps

        dispatch(showLoading())

        this.setState({
            isAppFetching : true
        }, () =>
            reactRouterFetch( routes, location, { dispatch }).then(
                () => this.setState({isAppFetching: false}, () => dispatch(hideLoading())),
                () => this.setState({isAppFetching: false}, () => dispatch(hideLoading()))
            )(this is ajax call)
        )
    }
    render () {
        const { appFetchingError} = this.props
        const landingPage = this.state.isAppFetching ? null : appFetchingError.status
            ? handlingApiError(appFetchingError, this.props)
            : render UI with all props from redux
        .....
    }

so if i change pathname i start fetching my data. Then it avoid render while fetching data in shouldComponentUpdate. So by this i show my previous route component and loading bar while fetching, then change my view to new UI according to new route.

By moving WillReceiveProps internal code to DidUpdate, first of all it change my view then show loadingBar up on It then fullfill new view by fetched props.

How can i avoid view changing untill all data wii be fetched from server (like GitHub links jumping)? is it possible to save previous rendered things with previousProps and previousState?

New code is

   `componentDidUpdate(prevProps){
        const current = `${this.props.location.pathname}${this.props.location.search}`
        const prev = `${prevProps.location.pathname}${prevProps.location.search}`

        if (current === prev && this.props.isAuth === prevProps.isAuth) {
            return
        }

        if(!prevProps.manual) this.fetchRoutes(this.props)
    }

    shouldComponentUpdate(nextProps, nextState) {
        return (nextState.isDataFetched || nextState.needDataFetch) && (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps) )
    }

    fetchRoutes(nextProps) {
        const {dispatch, location} = nextProps

        dispatch(showLoading())

        this.setState({
                isDataFetched : false,
                needDataFetch: true
            }, () =>
                reactRouterFetch( routes, location, { dispatch })
                    .then(() => dispatch(hideLoading()),
                        () => dispatch(hideLoading()))
                    .then(() => this.setState({isDataFetched: true,  needDataFetch: false}))
        )
    }
    render () {
        const { appFetchingError } = this.props
        const landingPage = !this.state.isDataFetched ? null : appFetchingError.status
            ? handlingApiError(appFetchingError, this.props)
            : render UI with all props.
      ......
    }

And my screen will show loadingBar on empty page while fetching according to null in render condition, instead previous view

A issue fornece exemplos de ciclo de vida usando componentWillReceiveProps, componentDidUpdate, shouldComponentUpdate e fetchRoutes, mas não nomeia nenhum arquivo do repositório, teste ou ponto de entrada. Primeiro, é preciso determinar se isso é uma alteração na documentação do site do React ou uma questão de uso específica de uma aplicação; a tarefa estará concluída quando houver um comportamento claramente delimitado e reproduzível e um destino de documentação ou código acordado.