Solution

App.jsx

import { useEffect, useState } from 'react';

// returns the state of *all* features for current user
const fetchAllFeatures = () =>
  // in reality, this would have been a `fetch` call:
  // `fetch("/api/features/all")`

  // Executes once
  // console.log('fetch called');

  new Promise(resolve => {
    console.log('This is logged once');

    const sampleFeatures = {
      'extended-summary': true,
      'feedback-dialog': false,
    };

    setTimeout(resolve, 100, sampleFeatures);
  });

// Module begins here
let featureStore = {};
// Store the resolving fetch so every call to getFeatureState can
// reference this single promise
let fetchingAllFeatures;

const getFeatureState = async feature => {
  if (!fetchingAllFeatures) {
    fetchingAllFeatures = fetchAllFeatures();
  }

  featureStore = await fetchingAllFeatures;

  return featureStore[feature] || false;
};

const App = () => {
  const [summaryEnabled, setSummaryEnabled] = useState(undefined);
  const [feedbackDialogEnabled, setFeedbackDialogEnabled] = useState(undefined);

  useEffect(() => {
    getFeatureState('extended-summary').then(featureState => {
      setSummaryEnabled(featureState);
    });
  }, []);

  useEffect(() => {
    getFeatureState('feedback-dialog').then(featureState => {
      setFeedbackDialogEnabled(featureState);
    });
  }, []);

  return (
    <>
      <div>Summary is enabled: {`${summaryEnabled}`}</div>
      <div>Summary is enabled: {`${feedbackDialogEnabled}`}</div>
    </>
  );
};

export { App };