react-hooks-example.js

import React, { useState, useEffect } from 'react';
import './App.css';

const INCREMENTS = [1, 2, 5, 10];

const mockApi = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      const randomInt = Math.ceil(Math.random() * 10);
      resolve(randomInt);
    }, 1000);
  });
};

const App = () => {
  const [count, setCount] = useState(0);
  const [hasFetched, setFetch] = useState(false);
  useEffect(async () => {
    if (!hasFetched) {
      const apiResponse = await mockApi();
      setFetch(true);
      setCount(count + apiResponse);
    }
  });
  useEffect(() => {
    document.title = 'Count: ' + count;
  });

  return (
    <div className="App">
      <div>Count: {count}</div>
      {hasFetched ? (
        <div>
          {INCREMENTS.map(value => {
            return <button onClick={() => setCount(count + value)}>+{value}</button>;
          })}
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default App;