为可重用的 React 组件存储全局变量的最佳方法是什么？

Question

I'm building a React component (think a button) that makes a network request when clicked. This component may be rendered multiple times on the same page, but the network request only needs to happen once. Therefore, I want to store a variable, networkRequestWasMade , to check against before making the request.

Normally, I'd find a common parent and wrap it in React's context mechanism. But, this component will be part of a reusable component library that will be used across many applications (think hundreds), so I would prefer that it doesn't rely on a specific parent component or context to store this value. I am brainstorming about what would be the best way to achieve this.

A very simple solution would be to attach a boolean to the window object:

function Button() {

  const handleClick = () => {
    if (!window.networkRequestWasMade) {
      // ...make request...
      window.networkRequestWasMade = true
    }
  }

  return <button onClick={handleClick}>Click me!</button>
}

However, I'm wondering if there's a better pattern for this.

Answer 1

Try to not use global variables, this is a bad practice. You just need to store the promise into a variable and initialize it only the very first time.

Here is an example using axios to make the http call

// util.js
let p;

function loadData() {
  if (!p) {
    p = axios.get('uri')
      .then(response => result = response.data);
  }

  return p;
}

Then your component can call the function loadData multiple times, the http call will be executed only once

// Button.jsx
import { loadData } from './util'

function Button() {

  const handleClick = () => {
    loadData()
      .then(data => {
        // do what you want with the data
      })
   }

   return <button onClick={handleClick}>Click me!</button>
}

Maybe the http request is not a GET and you don't care about the result but you get the idea.