suspense.js

import React, {
    Component,
    unstable_ConcurrentMode as ConcurrentMode,
    unstable_Suspense as Suspense,
} from 'react'
import { createFetcher } from './cache';
import logo from './logo.svg'
import './App.css'

const URL = 'https://gist.githubusercontent.com/wtfaremyinitials/c7fe964ee2ee2937c0dfaf90dec27f82/raw/9a1f3a31cec8d5250fc8d0c99b152f6054e98aef/foo.json'

const DataFetcher = createFetcher(() => fetch(URL).then(r => r.json()));

function Greeting() {
    const { message } = DataFetcher.read();
    return <p>{message}</p>
}

class App extends Component {
    render() {
        return (
            <ConcurrentMode>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo" />
                        <p>
                            Edit <code>src/App.js</code> and save to reload.
                        </p>
                        <a
                            className="App-link"
                            href="https://reactjs.org"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            Learn React
                        </a>
                        <Suspense
                            maxDuration={1000}
                            fallback={'Loading...'}
                        >
                            <Greeting />
                        </Suspense>
                    </header>
                </div>
            </ConcurrentMode>
        )
    }
}

export default App