diff --git a/react/src/components/About.js b/react/src/components/About.js
index 8be3ddb8..05377a48 100644
--- a/react/src/components/About.js
+++ b/react/src/components/About.js
@@ -1,9 +1,9 @@
-import { Component } from 'react';
 import { Link } from 'react-router-dom';
 import slugify from '../utils/slugify';
 import * as Sentry from '@sentry/react';
 import './about.css';
 import { isOddReleaseWeek, busy_sleep } from '../utils/time';
+import { useEffect } from 'react';
 
 import Jane from './employees/jane';
 import Lily from './employees/lily';
@@ -14,25 +14,21 @@ import Noah from './employees/noah';
 
 const employees = [Jane, Lily, Keith, Mason, Emma, Noah];
 
-class About extends Component {
-  constructor() {
-    super();
-    // must be inside the constructor to affect LCP, if in componentDidMount() only affects duration
+function About({ backend }) {
+  useEffect(() => {
     if (!isOddReleaseWeek()) {
       // can't have async sleep in a constructor
       busy_sleep(Math.random(25) + 100);
     }
-  }
 
-  async componentDidMount() {
     // Http requests to make in parallel, so the Transaction has more Spans
-    let request1 = fetch(this.props.backend + '/api', {
+    let request1 = fetch(backend + '/api', {
       method: 'GET',
     });
-    let request2 = fetch(this.props.backend + '/organization', {
+    let request2 = fetch(backend + '/organization', {
       method: 'GET',
     });
-    let request3 = fetch(this.props.backend + '/connect', {
+    let request3 = fetch(backend + '/connect', {
       method: 'GET',
     });
 
@@ -40,7 +36,7 @@ class About extends Component {
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#browser_compatibility
     // let response = await Promise.allSettled([request1, request2, request3])
 
-    const response = [await request1, await request2, await request3];
+    const response = [request1, request2, request3];
 
     // Error Handling
     response.forEach((r) => {
@@ -55,53 +51,51 @@ class About extends Component {
         );
       }
     });
-  }
-  render() {
-    return (
-      <div className="about-page">
-        <div>
-          <div className="about-info">
-            <h1>About us</h1>
-            <p>
-              Empower Plant is an IoT company determined to keep house plants
-              happy. After reading Michael Pollan’s 2013 New Yorker article
-              (“The Intelligent Plant”), the wife-and-wife founding team
-              invested their life savings in measuring and improving the
-              emotional state of their leafy housemates. Seven years later, the
-              company’s grown from its humble roots in the couples’ backyard
-              greenhouse (converted from a garage) into a Series C-funded San
-              Francisco startup and the world’s most accurate plant mood
-              measurer (“a must-have for any responsible plant parent,”
-              according to Plant Parenthood Magazine). Their original
-              state-of-the-art product is a technological marvel built with a
-              plant-first mindset, and they now offer a range of plant-centric
-              options.
-            </p>
-            <p>
-              Today, the company employs 170 people (and 852 plants) in San
-              Francisco, New York City, Denver, and Kiev.
-            </p>
-          </div>
-        </div>
-        <div>
-          <ul className="employee-list">
-            {employees.map((employee) => {
-              return (
-                <li key={employee.name}>
-                  <Link to={`/employee/${slugify(employee.url)}`}>
-                    <img src={employee.img} alt={`${employee.name}`} />
-                    <h5 className="employee-name" name={employee.name}>
-                      {employee.name}
-                    </h5>
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
+  }, []);
+
+  return (
+    <div className="about-page">
+      <div>
+        <div className="about-info">
+          <h1>About us</h1>
+          <p>
+            Empower Plant is an IoT company determined to keep house plants
+            happy. After reading Michael Pollan’s 2013 New Yorker article (“The
+            Intelligent Plant”), the wife-and-wife founding team invested their
+            life savings in measuring and improving the emotional state of their
+            leafy housemates. Seven years later, the company’s grown from its
+            humble roots in the couples’ backyard greenhouse (converted from a
+            garage) into a Series C-funded San Francisco startup and the world’s
+            most accurate plant mood measurer (“a must-have for any responsible
+            plant parent,” according to Plant Parenthood Magazine). Their
+            original state-of-the-art product is a technological marvel built
+            with a plant-first mindset, and they now offer a range of
+            plant-centric options.
+          </p>
+          <p>
+            Today, the company employs 170 people (and 852 plants) in San
+            Francisco, New York City, Denver, and Kiev.
+          </p>
         </div>
       </div>
-    );
-  }
+      <div>
+        <ul className="employee-list">
+          {employees.map((employee) => {
+            return (
+              <li key={employee.name}>
+                <Link to={`/employee/${slugify(employee.url)}`}>
+                  <img src={employee.img} alt={`${employee.name}`} />
+                  <h5 className="employee-name" name={employee.name}>
+                    {employee.name}
+                  </h5>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
 }
 
 export default Sentry.withProfiler(About, { name: 'About' });
diff --git a/react/src/components/ButtonLink.js b/react/src/components/ButtonLink.js
index d46c35b8..3a78ca25 100644
--- a/react/src/components/ButtonLink.js
+++ b/react/src/components/ButtonLink.js
@@ -1,14 +1,11 @@
-import { Component } from 'react';
 import { Link } from 'react-router-dom';
 
-class Button extends Component {
-  render() {
-    return (
-      <Link {...this.props} className="btn">
-        {this.props.children}
-      </Link>
-    );
-  }
+function Button({ to, children }) {
+  return (
+    <Link to={to} className="btn">
+      {children}
+    </Link>
+  );
 }
 
 export default Button;
diff --git a/react/src/components/CompleteError.js b/react/src/components/CompleteError.js
index 4cd43c74..072ffd72 100644
--- a/react/src/components/CompleteError.js
+++ b/react/src/components/CompleteError.js
@@ -1,10 +1,10 @@
-import { Component } from 'react';
 import { Link } from 'react-router-dom';
 import './complete.css';
 import * as Sentry from '@sentry/react';
+import { useEffect } from 'react';
 
-class CompleteError extends Component {
-  componentDidMount() {
+function CompleteError() {
+  useEffect(() => {
     window.setTimeout(() => {
       if (sessionStorage.getItem('userFeedback') === 'true') {
         sessionStorage.removeItem('userFeedback');
@@ -19,20 +19,18 @@ class CompleteError extends Component {
         }
       }
     }, 3500);
-  }
+  });
 
-  render() {
-    return (
-      <div className="checkout-container-complete sentry-unmask">
-        <h2>We're having some trouble</h2>
-        <p>
-          We were unable to process your order but will do everything we can to
-          make it right. Please <Link to="/">reach out to us</Link> if you have
-          been charged or have any questions.
-        </p>
-      </div>
-    );
-  }
+  return (
+    <div className="checkout-container-complete sentry-unmask">
+      <h2>We're having some trouble</h2>
+      <p>
+        We were unable to process your order but will do everything we can to
+        make it right. Please <Link to="/">reach out to us</Link> if you have
+        been charged or have any questions.
+      </p>
+    </div>
+  );
 }
 
 export default CompleteError;
diff --git a/react/src/components/Footer.js b/react/src/components/Footer.js
index 982c3de7..14064db1 100644
--- a/react/src/components/Footer.js
+++ b/react/src/components/Footer.js
@@ -1,68 +1,61 @@
 import * as Sentry from '@sentry/react';
-import { Fragment, Component } from 'react';
+import { Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import { useState } from 'react';
 import './footer.css';
 
-class Footer extends Component {
-  state = {
-    subscribed: false,
-  };
-
-  async shouldComponentUpdate() {
-    console.log('> Footer shouldComponentUpdate');
-  }
+function Footer() {
+  const [subscribed, setSubscribed] = useState(false);
 
-  render() {
-    const handleSubmit = () => {
-      this.setState({ subscribed: true });
-    };
+  const handleSubmit = () => {
+    setSubscribed(true);
+  };
 
-    return (
-      <footer id="footer">
-        <div>
-          <h2 className="h3 sentry-unmask">Sign up for plant tech news</h2>
-          <Sentry.ErrorBoundary
-            onReset={() => {
-              this.setState({ subscribed: false });
-            }}
-            fallback={({ resetError, eventId }) => {
-              return (
-                <Fragment>
-                  <div>An error has occurred. Sentry Event ID: {eventId}</div>
-                  <button className="btn" onClick={resetError}>
-                    Reset Form
-                  </button>
-                </Fragment>
-              );
-            }}
-          >
-            <div className="formContainer">
-              <form onSubmitCapture={handleSubmit}>
-                <label htmlFor="email-subscribe" className="sentry-unmask">
-                  Email
-                </label>
-                <input
-                  type="email"
-                  name="email-subscribe"
-                  id="email-subscribe"
-                ></input>
-              </form>
+  return (
+    <footer id="footer">
+      <div>
+        <h2 className="h3 sentry-unmask">Sign up for plant tech news</h2>
+        <Sentry.ErrorBoundary
+          onReset={() => {
+            setSubscribed(false);
+          }}
+          fallback={({ resetError, eventId }) => {
+            return (
+              <Fragment>
+                <div>An error has occurred. Sentry Event ID: {eventId}</div>
+                <button className="btn" onClick={resetError}>
+                  Reset Form
+                </button>
+              </Fragment>
+            );
+          }}
+        >
+          <div className="formContainer">
+            <form onSubmitCapture={handleSubmit}>
+              <label htmlFor="email-subscribe" className="sentry-unmask">
+                Email
+              </label>
               <input
-                type="submit"
-                value="Subscribe"
-                className="sentry-unmask"
-                onClick={handleSubmit}
-              />
-              {this.state.subscribed && <SubscribedMessage />}
-            </div>
-          </Sentry.ErrorBoundary>
-          <p className="sentry-unmask">
-            © 2021 • Empower Plant • <Link to="/about">About us</Link>
-          </p>
-        </div>
-      </footer>
-    );
-  }
+                type="email"
+                name="email-subscribe"
+                id="email-subscribe"
+              ></input>
+            </form>
+            <input
+              type="submit"
+              value="Subscribe"
+              className="sentry-unmask"
+              onClick={handleSubmit}
+            />
+            {subscribed && <SubscribedMessage />}
+          </div>
+        </Sentry.ErrorBoundary>
+        <p className="sentry-unmask">
+          © 2021 • Empower Plant • <Link to="/about">About us</Link>
+        </p>
+      </div>
+    </footer>
+  );
 }
 
 function SubscribedMessage() {
diff --git a/react/src/components/Home.js b/react/src/components/Home.js
index 4e383b90..9afc783e 100644
--- a/react/src/components/Home.js
+++ b/react/src/components/Home.js
@@ -1,20 +1,17 @@
-import { Component } from 'react';
-import Context from '../utils/context';
 import * as Sentry from '@sentry/react';
 import plantsBackground from '../assets/plants-background-img.jpg';
 import Button from './ButtonLink';
+import { useEffect } from 'react';
 
 const divStyle = {
   backgroundImage: 'url(' + plantsBackground + ')',
 };
 
-class Home extends Component {
-  static contextType = Context;
-
-  async componentDidMount() {
+function Home({ frontendSlowdown, backend }) {
+  useEffect(() => {
     try {
       // This should be the only http request for home page, for health check purposes
-      await fetch(this.props.backend + '/success', {
+      fetch(backend + '/success', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -23,24 +20,20 @@ class Home extends Component {
     } catch (err) {
       Sentry.captureException(err);
     }
-  }
+  }, []);
 
-  render() {
-    return (
-      <div className="hero sentry-unmask">
-        <div className="hero-bg-img" style={divStyle}></div>
-        <div className="hero-content">
-          <h1>Empower your plants</h1>
-          <p>Keep your houseplants happy.</p>
-          <Button
-            to={this.props.frontendSlowdown ? '/products-fes' : '/products'}
-          >
-            Browse products
-          </Button>
-        </div>
+  return (
+    <div className="hero sentry-unmask">
+      <div className="hero-bg-img" style={divStyle}></div>
+      <div className="hero-content">
+        <h1>Empower your plants</h1>
+        <p>Keep your houseplants happy.</p>
+        <Button to={frontendSlowdown ? '/products-fes' : '/products'}>
+          Browse products
+        </Button>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default Home;
diff --git a/react/src/components/NotFound.js b/react/src/components/NotFound.js
index 16179ebd..7e49e5f1 100644
--- a/react/src/components/NotFound.js
+++ b/react/src/components/NotFound.js
@@ -1,28 +1,21 @@
-import { Component } from 'react';
 import './complete.css';
 import { Link } from 'react-router-dom';
 
-class NotFound extends Component {
-  async shouldComponentUpdate() {
-    console.log('> NotFound shouldComponentUpdate');
-  }
-
-  render() {
-    return (
-      <div className="checkout-container-complete">
-        <h2>404</h2>
-        <p>
-          The page you're looking for can't be found and we can't get to the
-          root of it just yet. Please go back in your browser or go{' '}
-          <Link to="/">back to our home page</Link> and accept our deepest
-          apologies.
-        </p>
-        <p>
-          If the issue persists, please <Link to="/">contact us</Link>.
-        </p>
-      </div>
-    );
-  }
+function NotFound() {
+  return (
+    <div className="checkout-container-complete">
+      <h2>404</h2>
+      <p>
+        The page you're looking for can't be found and we can't get to the root
+        of it just yet. Please go back in your browser or go{' '}
+        <Link to="/">back to our home page</Link> and accept our deepest
+        apologies.
+      </p>
+      <p>
+        If the issue persists, please <Link to="/">contact us</Link>.
+      </p>
+    </div>
+  );
 }
 
 export default NotFound;