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

Issue cung cấp các ví dụ về vòng đời sử dụng componentWillReceiveProps, componentDidUpdate, shouldComponentUpdate và fetchRoutes, nhưng không nêu tên tệp nào trong repository, test hay entry point. Trước tiên cần xác định đây là thay đổi tài liệu cho website React hay câu hỏi về cách sử dụng dành riêng cho một ứng dụng; chỉ được xem là hoàn tất khi đã xác định rõ một hành vi có phạm vi cụ thể, có thể tái hiện và một mục tiêu tài liệu hoặc mã nguồn được thống nhất.