如何正确更新 React Context state 并避免重新渲染？

Question

I'm currently learning React Context API and I've a project with following files (I'm using create-create-app to generate the project):

Tree

├── package.json
├── node_modules
│   └── ...
├── public
│   └── ...
├── src
│   ├── components
│   │   ├── App.js
│   │   ├── Container.js
│   │   ├── Info.js
│   │   ├── PageHeading.js
│   │   ├── common
│   │   │   ├── Footer.js
│   │   │   ├── Header.js
│   │   │   ├── Helpers.js
│   │   │   ├── Loading.css
│   │   │   ├── Loading.js
│   │   │   └── SearchForm.js
│   │   └── list
│   │       ├── Pagination.js
│   │       └── Table.js
│   ├── css
│   │   └── ...
│   ├── fonts
│   │   └── ...
│   ├── images
│   │   └── ...
│   ├── index.css
│   ├── index.js
│   └── providers
│       └── GlobalProvider.js
└── yarn.lock

File: src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Header from "./components/common/Header";
import Footer from "./components/common/Footer";

ReactDOM.render(
    [<Header key='1' />, <App key='2' />, <Footer key='3' />],
    document.getElementById("root")
);

File: src/providers/GlobalProvider.js

import React, { Component } from "react";
import { handleResponse } from "../components/common/Helpers";

// Set up initial context
export const GlobalContext = React.createContext({});

// Create an exportable consumer that can be injected into components
export const GlobalConsumer = GlobalContext.Consumer;

// Create the provider using a traditional React.Component class
class GlobalProvider extends Component {
    state = {
        age: 100,
        error: null,
        isLoading: false,
        currentPage: 1,
        result: "",
        data: null,
        total_hg_customers: "",
        total_grams_by_customers: "",
        totalPages: "",
        hasNextPage: false,
        hasPrevPage: false
    };

    fetchCustomersByPage = () => {
        this.setState({ isLoading: true });
        const { currentPage } = this.state;

        fetch(
            `https://api-server.com/customer_gold?pageNum=${currentPage}`
        )
            .then(handleResponse)
            .then(response => {
                const {
                    currentPage,
                    result,
                    data,
                    total_hg_customers,
                    total_grams_by_customers,
                    totalPages,
                    hasNextPage,
                    hasPrevPage
                } = response;

                this.setState({
                    isLoading: false,
                    currentPage,
                    result,
                    data,
                    total_hg_customers,
                    total_grams_by_customers,
                    totalPages,
                    hasNextPage,
                    hasPrevPage
                });
                console.log("API request done and state has been updated"); // <-- this one get infinitely generated
            })
            .catch(error => {
                this.setState({
                    error: error.errorMessage,
                    loading: false
                });
            });
    };

    render() {
        return (
            // value prop is where we define what values
            // that are accessible to consumer components
            <GlobalContext.Provider
                value={{
                    state: this.state,
                    fetchCustomersByPage: this.fetchCustomersByPage
                }}>
                {this.props.children}
            </GlobalContext.Provider>
        );
    }
}

export default GlobalProvider;

File: src/components/common/Helpers.js

export const handleResponse = response => {
        return response.json().then(json => {
            return response.ok ? json : Promise.reject(json);
        });
    };

File: src/components/App.js

import React, { Component } from "react";
import GlobalProvider from "../providers/GlobalProvider";
import PageHeading from "./PageHeading";
import Container from "./Container";

class App extends Component {
    render() {
        return (
            <GlobalProvider>
                <div className='root-container content'>
                    <PageHeading />
                    <Container />
                </div>
            </GlobalProvider>
        );
    }
}

export default App;

File: src/components/Container.js

import React, { Component } from "react";
import Loading from "./common/Loading";
import Info from "./Info";
import SearchForm from "./common/SearchForm";
import Table from "./list/Table";
import Pagination from "./list/Pagination";
import { GlobalConsumer } from "../providers/GlobalProvider";

class Container extends Component {
    render() {
        return (
            <GlobalConsumer>
                {context => {
                    const { isLoading } = context.state;

                    if (isLoading) {
                        return (
                            <div className='loading-container'>
                                <Loading />
                            </div>
                        );
                    }

                    return (
                        <div className='middle-container'>
                            <div className='container'>
                                <div className='success-container'>
                                    <div className='row'>
                                        <Info />
                                        <SearchForm />
                                    </div>
                                    <div className='row'>
                                        <Table />
                                    </div>
                                    <div className='row pagination'>
                                        <Pagination />
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                }}
            </GlobalConsumer>
        );
    }
}

export default Container;

File: src/components/list/Table.js

import React, { Component } from "react";
import { GlobalConsumer, GlobalContext } from "../../providers/GlobalProvider";

class Table extends Component {
    static contextType = GlobalContext;

    componentDidMount() {
        console.log("Hello");
        return this.context.fetchCustomersByPage();
    }

    render() {
        return (
            <div className='col-12'>
                <GlobalConsumer>
                    {context => {
                        const { data } = context.state;
                        return (
                            <table className='customer-list'>
                                <thead>
                                    <tr>
                                        <th width='50%'>Account Number</th>
                                        <th width='50%'>Gold Balance (g)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {data &&
                                        data.map(customer => (
                                            <tr key={customer.account_number}>
                                                <td>{customer.account_number}</td>
                                                <td>{customer.gold_balance}</td>
                                            </tr>
                                        ))}
                                </tbody>
                            </table>
                        );
                    }}
                </GlobalConsumer>
            </div>
        );
    }
}

export default Table;

The problem right now is it continue making API calls to the API server (infinite call after one and another). When I remove this.setState({isLoading: false, currentPage, ...}) part, it stopped making the infinite call to the API server. But of course, the app's isLoading state stucked at true and the loading spinner component persists in the view.

All I need is just submit one call to the API server → assign the respond to the provider/global state → remove the loading spinner → render the table view with the data from the API call. I tried using why-did-you-update package to find out what was wrong but I didn't see any clue.

What I did wrong here? Please point it out to me. If I missed pasting any important files here, please let me know. Thank you.

Answer 1

Is it possible use React Hook? Based on your code, I recommend you break it down into React Hook. If so you can use useCallback or useMemo hook.