Switch to React functional component w/ hooks

react-ui/src/App.js

@@ -1,18 +1,14 @@
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      message: null,
-      fetching: true
-    };
-  }
+function App() {
+  const [message, setMessage] = useState(null);
+  const [isFetching, setIsFetching] = useState(false);
+  const [url, setUrl] = useState('/api');
 
-  componentDidMount() {
-    fetch('/api')
+  const fetchData = useCallback(() => {
+    fetch(url)
       .then(response => {
         if (!response.ok) {
           throw new Error(`status ${response.status}`);
@@ -20,54 +16,54 @@ class App extends Component {
         return response.json();
       })
       .then(json => {
-        this.setState({
-          message: json.message,
-          fetching: false
-        });
+        setMessage(json.message);
+        setIsFetching(false);
       }).catch(e => {
-        this.setState({
-          message: `API call failed: ${e}`,
-          fetching: false
-        });
+        setMessage(`API call failed: ${e}`);
+        setIsFetching(false);
       })
-  }
+  }, [url]);
+
+  useEffect(() => {
+    setIsFetching(true);
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        { process.env.NODE_ENV === 'production' ?
+            <p>
+              This is a production build from create-react-app.
+            </p>
+          : <p>
+              Edit <code>src/App.js</code> and save to reload.
+            </p>
+        }
+        <p>{'« '}<strong>
+          {isFetching
+            ? 'Fetching message from API'
+            : message}
+        </strong>{' »'}</p>
+        <p><a
+          className="App-link"
+          href="https://github.com/mars/heroku-cra-node"
+        >
+          React + Node deployment on Heroku
+        </a></p>
+        <p><a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a></p>
+      </header>
+    </div>
+  );
 
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          { process.env.NODE_ENV === 'production' ?
-              <p>
-                This is a production build from create-react-app.
-              </p>
-            : <p>
-                Edit <code>src/App.js</code> and save to reload.
-              </p>
-          }
-          <p>{'« '}<strong>
-            {this.state.fetching
-              ? 'Fetching message from API'
-              : this.state.message}
-          </strong>{' »'}</p>
-          <p><a
-            className="App-link"
-            href="https://github.com/mars/heroku-cra-node"
-          >
-            React + Node deployment on Heroku
-          </a></p>
-          <p><a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a></p>
-        </header>
-      </div>
-    );
-  }
 }
 
 export default App;