diff --git a/.babelrc b/.babelrc
index f6d2f14accda..78e6ed71342e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,16 +1,17 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
+  "plugins": ["@babel/plugin-proposal-class-properties"],
   "env": {
     "development": {
-      "plugins": [
-        "react-refresh/babel"
-      ]
+      "plugins": ["react-refresh/babel"]
     }
   }
 }
diff --git a/package.json b/package.json
index 1aff30960c4e..a50cd1553c9d 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
-    "@mdx-js/loader": "^1.6.16",
+    "@mdx-js/loader": "^1.6.21",
     "@octokit/auth-action": "^1.3.0",
     "@octokit/rest": "^18.0.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
@@ -159,10 +159,10 @@
     "lodash.throttle": "^4.1.1",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^17.0.1",
     "react-banner": "^1.0.0-rc.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.8.6",
+    "react-dom": "^17.0.1",
     "react-g-analytics": "0.4.2",
     "react-router-dom": "^5.2.0",
     "react-tiny-popover": "5",
diff --git a/src/components/Configuration/Configuration.jsx b/src/components/Configuration/Configuration.jsx
index f23e800e5204..4043dc77d20f 100644
--- a/src/components/Configuration/Configuration.jsx
+++ b/src/components/Configuration/Configuration.jsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import { Children, isValidElement } from 'react';
 import { Details } from './components';
 
 const detailComponentsList = ['link', 'mode', 'entry', 'path', 'filename', 'publicPath', 'library', 'libraryType', 'libraryName', 'advancedLibrary', 'advancedOutput', 'expertOutput', 'expertOutputB', 'expert', 'advancedConditions', 'moduleType', 'advancedActions', 'advancedModule', 'modules', 'alias', 'advancedResolve', 'expertResolve', 'hints', 'devtool', 'target', 'externals', 'externalsType', 'externalsPresets', 'ignoreWarnings', 'stats', 'preset', 'advancedGlobal', 'advancedAssets', 'advancedChunkGroups', 'advancedChunks', 'advancedModules', 'expertModules', 'advancedStatsOptimization', 'advancedOptimization', 'cacheGroupAdvancedSelectors', 'cacheGroupAdvancedEffects', 'advancedSelectors', 'advancedEffects', 'fallbackCacheGroup', 'advanced', 'advancedCaching', 'advancedBuild'];
 
 export const Pre = props => {
-  const newChildren = React.Children.map(props.children.props.children, child => {
-    if (React.isValidElement(child)) {
+  const newChildren = Children.map(props.children.props.children, child => {
+    if (isValidElement(child)) {
       if (child.props.className.includes('keyword')) {
         if (!detailComponentsList.includes(child.props.componentname)) return child;
 
-        return <Details children={child.props.children.slice(4, React.Children.count(child.props.children) - 4)} url={child.props.url} />;
+        return <Details children={child.props.children.slice(4, Children.count(child.props.children) - 4)} url={child.props.url} />;
       }
     }
 
diff --git a/src/components/Configuration/components.js b/src/components/Configuration/components.js
index ee37813e1e29..1bc0c4bf7b7e 100644
--- a/src/components/Configuration/components.js
+++ b/src/components/Configuration/components.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { isValidElement, Component } from 'react';
 import Popover from 'react-tiny-popover';
 import './Configuration.scss';
 import { timeout } from 'q';
@@ -29,7 +29,7 @@ const Card = ({ body }) => {
   );
 };
 
-export class Details extends React.Component {
+export class Details extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -50,7 +50,7 @@ export class Details extends React.Component {
 
     // Find the index of </default>
     const closeDefaultTagIndex = children.findIndex(child => {
-      if (React.isValidElement(child)) {
+      if (isValidElement(child)) {
         return (
           child.props.className.includes('tag') &&
           child.props.children.length === DEFAULT_CHILDREN_SIZE
diff --git a/src/components/Container/Container.jsx b/src/components/Container/Container.jsx
index b13a357e982d..e5d67eeae3d0 100644
--- a/src/components/Container/Container.jsx
+++ b/src/components/Container/Container.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import './Container.scss';
 
 export default (props = {}) => {
diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index 337295dcd932..eaa1d6a983a7 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/src/components/Contributors/Contributors.jsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import { Component } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
 import './Contributors.scss';
 
-export default class Contributors extends React.Component {
+export default class Contributors extends Component {
   state = {
     inView: false
   }
diff --git a/src/components/Cube/Cube.jsx b/src/components/Cube/Cube.jsx
index 8106893e8f69..728f4f88d615 100644
--- a/src/components/Cube/Cube.jsx
+++ b/src/components/Cube/Cube.jsx
@@ -1,11 +1,11 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 // Load Styling
 import './Cube.scss';
 
-export default class Cube extends React.Component {
+export default class Cube extends Component {
   static propTypes = {
     hover: PropTypes.bool,
     theme: PropTypes.string,
diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index ae0adc1e7e09..e11daa4ea7a9 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { Component } from 'react';
 import LanguageIcon from '../../assets/language-icon.svg';
 import './Dropdown.scss';
 
-export default class Dropdown extends React.Component {
+export default class Dropdown extends Component {
   state = {
     active: false
   };
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index a84570784d1a..ea1b98e6b082 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from '../Link/Link';
 import Container from '../Container/Container';
 import Icon from '../../assets/icon-square-small.svg';
diff --git a/src/components/Gitter/Gitter.jsx b/src/components/Gitter/Gitter.jsx
index 7bac4fa3f20f..057992b5c98d 100644
--- a/src/components/Gitter/Gitter.jsx
+++ b/src/components/Gitter/Gitter.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 
 // Import Utilities
 import isClient from '../../utilities/is-client';
@@ -13,7 +13,7 @@ let sidecar = null;
 let sidecarLoadTriggered = false;
 
 // Create and export component
-export default class Gitter extends React.Component {
+export default class Gitter extends Component {
   render() {
     return (
       <div className="gitter">
diff --git a/src/components/Link/Link.jsx b/src/components/Link/Link.jsx
index 820d871fc2a2..e1f82645c9ab 100644
--- a/src/components/Link/Link.jsx
+++ b/src/components/Link/Link.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 export default ({
diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx
index b207238c95cb..fe6baa786017 100644
--- a/src/components/Logo/Logo.jsx
+++ b/src/components/Logo/Logo.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Logo from '../../assets/site-logo.svg';
 import './Logo.scss';
 
diff --git a/src/components/Markdown/Markdown.jsx b/src/components/Markdown/Markdown.jsx
index e938cd2f090a..d3a9d2cf0a19 100644
--- a/src/components/Markdown/Markdown.jsx
+++ b/src/components/Markdown/Markdown.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import './Markdown.scss';
 
 const Markdown = props => (
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 05854b4a3c62..6188ff52175f 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 import Banner from 'react-banner';
 
 // Import Components
@@ -21,7 +21,7 @@ import StackOverflowIcon from '../../styles/icons/stack-overflow.svg';
 
 const onSearch = () => {};
 
-export default class Navigation extends React.Component {
+export default class Navigation extends Component {
   render() {
     let { pathname, links, toggleSidebar } = this.props;
 
diff --git a/src/components/NotificationBar/NotificationBar.jsx b/src/components/NotificationBar/NotificationBar.jsx
index 845e11d5360b..f5db08eeed90 100644
--- a/src/components/NotificationBar/NotificationBar.jsx
+++ b/src/components/NotificationBar/NotificationBar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component, Fragment } from 'react';
 import Container from '../Container/Container';
 import testLocalStorage from '../../utilities/test-local-storage';
 import './NotificationBar.scss';
@@ -14,7 +14,7 @@ const barDismissed = () => {
   return false;
 };
 
-class MessageBar extends React.Component {
+class MessageBar extends Component {
   render() {
     return (
       <div className="notification-bar">
@@ -48,7 +48,7 @@ class MessageBar extends React.Component {
   }
 }
 
-export default class NotificationBar extends React.Component {
+export default class NotificationBar extends Component {
   constructor(props) {
     super(props);
     this.onClose = this.onClose.bind(this);
@@ -74,6 +74,6 @@ export default class NotificationBar extends React.Component {
   render() {
     const { dismissed } = this.state;
 
-    return <React.Fragment>{!dismissed ? <MessageBar onClose={this.onClose} /> : null}</React.Fragment>;
+    return <Fragment>{!dismissed ? <MessageBar onClose={this.onClose} /> : null}</Fragment>;
   }
 }
diff --git a/src/components/Organization/Organization.jsx b/src/components/Organization/Organization.jsx
index 7cea94a27010..8db7218d5500 100644
--- a/src/components/Organization/Organization.jsx
+++ b/src/components/Organization/Organization.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Container from '../Container/Container';
 import Contributors from '../Contributors/Contributors';
 import Link from '../Link/Link';
diff --git a/src/components/Page/AdjacentPages.jsx b/src/components/Page/AdjacentPages.jsx
index 8606a933ce8f..4c8a55acff29 100644
--- a/src/components/Page/AdjacentPages.jsx
+++ b/src/components/Page/AdjacentPages.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from '../Link/Link';
 import './AdjacentPages.scss';
 import PropTypes from 'prop-types';
diff --git a/src/components/Page/Page.jsx b/src/components/Page/Page.jsx
index e0424ffdd958..6d15347903b6 100644
--- a/src/components/Page/Page.jsx
+++ b/src/components/Page/Page.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Children, isValidElement, Component } from 'react';
 
 // Import Components
 import PageLinks from '../PageLinks/PageLinks';
@@ -12,7 +12,7 @@ import AdjacentPages from './AdjacentPages';
 // Load Styling
 import './Page.scss';
 
-class Page extends React.Component {
+class Page extends Component {
   constructor(props) {
     super(props);
 
@@ -69,8 +69,8 @@ class Page extends React.Component {
 
     if (typeof content === 'function') {
       contentRender = content({}).props.children.slice(4); // Cut frontmatter information
-      contentRender = React.Children.map(contentRender, child => {
-        if (React.isValidElement(child)) {
+      contentRender = Children.map(contentRender, child => {
+        if (isValidElement(child)) {
           if (child.props.mdxType === 'pre') {
             return <Pre children={child.props.children} />;
           }
diff --git a/src/components/PageLinks/PageLinks.jsx b/src/components/PageLinks/PageLinks.jsx
index 6b153ca68faf..f409c61267f0 100644
--- a/src/components/PageLinks/PageLinks.jsx
+++ b/src/components/PageLinks/PageLinks.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Url from 'url';
 import './PageLinks.scss';
 import icon from '../../assets/icon-print.svg';
diff --git a/src/components/PageNotFound/PageNotFound.jsx b/src/components/PageNotFound/PageNotFound.jsx
index d89a65c01550..4724f1eb2972 100644
--- a/src/components/PageNotFound/PageNotFound.jsx
+++ b/src/components/PageNotFound/PageNotFound.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 // Styles
diff --git a/src/components/Placeholder/Placeholder.js b/src/components/Placeholder/Placeholder.js
index 5674d52af9f2..7d0ccedfd8ff 100644
--- a/src/components/Placeholder/Placeholder.js
+++ b/src/components/Placeholder/Placeholder.js
@@ -1,6 +1,3 @@
-import React from 'react';
-
-// Import Styling
 import './Placeholder.scss';
 
 // Placeholder string
diff --git a/src/components/Print/Print.js b/src/components/Print/Print.js
index 0300e903e62b..3731b57457cc 100644
--- a/src/components/Print/Print.js
+++ b/src/components/Print/Print.js
@@ -1,5 +1,3 @@
-import React from 'react';
-// Load Styling
 import './Print.scss';
 import icon from '../../assets/icon-print.svg';
 import BarIcon from '../../styles/icons/vertical-bar.svg';
diff --git a/src/components/Print/PrintScript.js b/src/components/Print/PrintScript.js
index 27edf3e87f6e..38b622424581 100644
--- a/src/components/Print/PrintScript.js
+++ b/src/components/Print/PrintScript.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const printScript = `
 window.matchMedia('print').addListener(function(mql) {
   if (!mql.matches) {
diff --git a/src/components/Shield/Shield.jsx b/src/components/Shield/Shield.jsx
index 13fef70d8267..87b9a9cb6678 100644
--- a/src/components/Shield/Shield.jsx
+++ b/src/components/Shield/Shield.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export default props => (
   <img alt="webpack shield" src={
     `https://img.shields.io/${props.content}.svg?label=${props.label}&style=flat-square&maxAge=3600`
diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
index 4aa08a549fb9..57ee3b4d499b 100644
--- a/src/components/Sidebar/Sidebar.jsx
+++ b/src/components/Sidebar/Sidebar.jsx
@@ -1,7 +1,4 @@
 // Import External Dependencies
-import React from 'react';
-
-// Import Local Components
 import Shield from '../Shield/Shield';
 import SidebarItem from '../SidebarItem/SidebarItem';
 import Print from '../Print/Print';
diff --git a/src/components/SidebarItem/SidebarItem.jsx b/src/components/SidebarItem/SidebarItem.jsx
index a7eac8a6ba5a..33fb982b53e7 100644
--- a/src/components/SidebarItem/SidebarItem.jsx
+++ b/src/components/SidebarItem/SidebarItem.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import Link from '../Link/Link';
 import './SidebarItem.scss';
 import list2Tree from '../../utilities/list2Tree';
@@ -7,7 +7,7 @@ import BarIcon from '../../styles/icons/vertical-bar.svg';
 
 const block = 'sidebar-item';
 
-export default class SidebarItem extends React.Component {
+export default class SidebarItem extends Component {
   state = {
     open: this._isOpen(this.props)
   };
diff --git a/src/components/SidebarMobile/SidebarMobile.jsx b/src/components/SidebarMobile/SidebarMobile.jsx
index 57205bc55ef7..64f903967b33 100644
--- a/src/components/SidebarMobile/SidebarMobile.jsx
+++ b/src/components/SidebarMobile/SidebarMobile.jsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { Component } from 'react';
 import Link from '../Link/Link';
 import './SidebarMobile.scss';
 import CloseIcon from '../../styles/icons/cross.svg';
 
 // TODO: Check to make sure all pages are shown and properly sorted
-export default class SidebarMobile extends React.Component {
+export default class SidebarMobile extends Component {
   _container = null
   _initialTouchPosition = {}
   _lastTouchPosition = {}
diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 1cf7e577fb5d..ae944c248860 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component, Fragment } from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import DocumentTitle from 'react-document-title';
 
@@ -48,7 +48,7 @@ if (isClient) {
   }
 }
 
-class Site extends React.Component {
+class Site extends Component {
   state = {
     mobileSidebarOpen: false
   };
@@ -103,7 +103,7 @@ class Site extends React.Component {
                   <Route path="/vote" component={Vote} />
                   <Route path="/organization" component={Organization} />
                   <Route path="/starter-kits" component={StarterKits} />
-                  <Route path="/app-shell" component={() => <React.Fragment />} />
+                  <Route path="/app-shell" component={() => <Fragment />} />
                   {pages.map(page => (
                     <Route
                       key={page.url}
@@ -118,7 +118,7 @@ class Site extends React.Component {
                           'url'
                         );
                         return (
-                          <React.Fragment>
+                          <Fragment>
                             <Sponsors />
                             <Sidebar
                               className="site__sidebar"
@@ -132,7 +132,7 @@ class Site extends React.Component {
                               next={next}
                             />
                             <Gitter />
-                          </React.Fragment>
+                          </Fragment>
                         );
                       }}
                     />
diff --git a/src/components/Splash/Splash.jsx b/src/components/Splash/Splash.jsx
index 2ab7d98cb1e7..879388af582e 100644
--- a/src/components/Splash/Splash.jsx
+++ b/src/components/Splash/Splash.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React, { useState, useEffect } from 'react';
+import { lazy, Suspense, useState, useEffect } from 'react';
 
 // Import Components
 import Container from '../Container/Container';
@@ -16,7 +16,7 @@ import SplashContent from '../../content/index.md';
 // Load Styling
 import './Splash.scss';
 
-const Support = React.lazy(() => import('../Support/Support'));
+const Support = lazy(() => import('../Support/Support'));
 
 const SponsorsPlaceholder = () => (
   <>
@@ -72,7 +72,7 @@ const Splash = () => {
             </p>
 
             { showSponsors ? (
-              <React.Suspense fallback={<SponsorsPlaceholder />}>
+              <Suspense fallback={<SponsorsPlaceholder />}>
                 <p><label><input type="checkbox" checked={supportType === 'monthly'} onChange={e => setSupportType(e.target.checked ? 'monthly' : 'total')} /> Show sponsors by their average monthly amount of sponsoring in the last year.</label></p>
 
                 <Support type={supportType} rank="latest" />
@@ -86,7 +86,7 @@ const Splash = () => {
                 <Support type={supportType} rank="bronze" />
 
                 <Support type={supportType} rank="backer" />
-              </React.Suspense>
+              </Suspense>
             ) : (
               <SponsorsPlaceholder />
             ) }
diff --git a/src/components/SplashViz/SplashViz.jsx b/src/components/SplashViz/SplashViz.jsx
index b509be01f3d7..ab545eb3116d 100644
--- a/src/components/SplashViz/SplashViz.jsx
+++ b/src/components/SplashViz/SplashViz.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 
 // Load Images
 import HomeSVG from './SplashVizSVG';
@@ -11,7 +11,7 @@ import TextRotator from '../TextRotater/TextRotater';
 // Load Styling
 import './SplashViz.scss';
 
-export default class SplashViz extends React.Component {
+export default class SplashViz extends Component {
 
   render() {
     return (
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
index d95916902a9a..6c8a76ff1070 100644
--- a/src/components/Sponsors/Sponsors.jsx
+++ b/src/components/Sponsors/Sponsors.jsx
@@ -1,5 +1,4 @@
 // Import External Dependencies
-import React from 'react';
 import Link from '../Link/Link';
 
 // Imports for Ad Content
diff --git a/src/components/StarterKits/StarterKits.jsx b/src/components/StarterKits/StarterKits.jsx
index 86d8043adf04..61aedc12abd0 100644
--- a/src/components/StarterKits/StarterKits.jsx
+++ b/src/components/StarterKits/StarterKits.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { lazy, Suspense } from 'react';
 import Container from '../Container/Container';
 import Link from '../Link/Link';
 import { PlaceholderComponent } from '../Placeholder/Placeholder';
@@ -11,7 +11,7 @@ import isClient from '../../utilities/is-client';
 // can use. This component could even use something like griddle
 // to allow sorting and such.
 
-const StarterKitsTable = React.lazy(() => import('./StarterKitsTable'));
+const StarterKitsTable = lazy(() => import('./StarterKitsTable'));
 
 const StarterKits = props => (
   <Container className="starter-kits page__content markdown">
@@ -49,9 +49,9 @@ const StarterKits = props => (
       </thead>
 
       {isClient ? (
-        <React.Suspense fallback={<PlaceholderComponent />}>
+        <Suspense fallback={<PlaceholderComponent />}>
           <StarterKitsTable />
-        </React.Suspense>
+        </Suspense>
       ) : null}
     </table>
   </Container>
diff --git a/src/components/StarterKits/StarterKitsTable.jsx b/src/components/StarterKits/StarterKitsTable.jsx
index 4bab6bb9ab03..aa83ce0b6ac2 100644
--- a/src/components/StarterKits/StarterKitsTable.jsx
+++ b/src/components/StarterKits/StarterKitsTable.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Kits from './_starter-kits.json';
 import Link from '../Link/Link';
 
diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index e8f7ce14c9a8..a02fcf4857b4 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import React from 'react';
+import { Component } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 
 // Import Data
@@ -87,7 +87,7 @@ function formatMoney(number) {
   return str;
 }
 
-export default class Support extends React.Component {
+export default class Support extends Component {
   state = {
     inView: false
   }
diff --git a/src/components/TextRotater/TextRotater.jsx b/src/components/TextRotater/TextRotater.jsx
index f7a48a182156..b2ddf10a7094 100644
--- a/src/components/TextRotater/TextRotater.jsx
+++ b/src/components/TextRotater/TextRotater.jsx
@@ -1,11 +1,11 @@
 // Import External Dependencies
-import React from 'react';
+import { Children, cloneElement, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 
 // Load Styling
 import './TextRotater.scss';
 
-export default class TextRotater extends React.PureComponent {
+export default class TextRotater extends PureComponent {
   static defaultProps = {
     delay: 0,
     repeatDelay: 3000
@@ -28,15 +28,15 @@ export default class TextRotater extends React.PureComponent {
   render() {
     const { children, maxWidth } = this.props;
     const { currentIndex, contentHeight } = this.state;
-    const childrenCount = React.Children.count(children);
+    const childrenCount = Children.count(children);
 
-    const currentChild = React.cloneElement(
+    const currentChild = cloneElement(
       children[currentIndex], {
         ref: c => (this.content = c)
       }
     );
 
-    const nextChild = React.cloneElement(
+    const nextChild = cloneElement(
       children[
         (currentIndex + 1) % childrenCount
       ]
@@ -95,7 +95,7 @@ export default class TextRotater extends React.PureComponent {
       this.textRotatorWrap.classList.remove('text-rotater--slide-up');
 
       this.setState({
-        currentIndex: (this.state.currentIndex + 1) % React.Children.count(children),
+        currentIndex: (this.state.currentIndex + 1) % Children.count(children),
       }, () => {
         setTimeout(() => {
           if (this.textRotatorWrap) {
diff --git a/src/components/Vote/Vote.jsx b/src/components/Vote/Vote.jsx
index ddd08b5ecbbd..1a43dfef32aa 100644
--- a/src/components/Vote/Vote.jsx
+++ b/src/components/Vote/Vote.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { Component } from 'react';
 import Container from '../Container/Container';
 import 'webpack.vote/dist/style.min.css';
 
 // Load Styling
 import './Vote.scss';
 
-export default class Vote extends React.Component {
+export default class Vote extends Component {
   state = {
     VoteApp: null
   }
diff --git a/src/index.jsx b/src/index.jsx
index 941db7205d92..c427e298d986 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,5 +1,4 @@
 // Import External Dependencies
-import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { BrowserRouter as AnalyticsRouter } from 'react-g-analytics';
diff --git a/src/server.jsx b/src/server.jsx
index ab96d2d29459..bc01e9473a7d 100644
--- a/src/server.jsx
+++ b/src/server.jsx
@@ -1,5 +1,4 @@
 // Import External Dependencies
-import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { StaticRouter, Route } from 'react-router-dom';
 
diff --git a/yarn.lock b/yarn.lock
index 75af5019b0d9..b204404018f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2216,33 +2216,33 @@
   dependencies:
     core-js "^2.5.7"
 
-"@mdx-js/loader@^1.6.16":
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.18.tgz#8d63fcc029573b3a33968c78d1c5e927ad8e497d"
-  integrity sha512-mCIt3dFc4p7y3ZqVda07grZDWgMcwSePT3k9vQfgfUcGWLeTFhp46fTbzagXVR/izldFSBLVYkouuH2PaI7Ecw==
+"@mdx-js/loader@^1.6.21":
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.21.tgz#e5b2b5c48d182e495d36104b0c7a5da96964a2dd"
+  integrity sha512-4xNtT7oal4PrLSpZE+75nj9XMwYwc5BuoHmer1GDmer2Hhg8DCLxskk4lWpXnMv+IUg7MboK0EAtZ2fk0szt3A==
   dependencies:
-    "@mdx-js/mdx" "1.6.18"
-    "@mdx-js/react" "1.6.18"
+    "@mdx-js/mdx" "1.6.21"
+    "@mdx-js/react" "1.6.21"
     loader-utils "2.0.0"
 
-"@mdx-js/mdx@1.6.18":
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.18.tgz#c73345ef75be0ec303c5d87f3b95cbe55c192742"
-  integrity sha512-RXtdFBP3cnf/RILx/ipp5TsSY1k75bYYmjorv7jTaPcHPQwhQdI6K4TrVUed/GL4f8zX5TN2QwO5g+3E/8RsXA==
+"@mdx-js/mdx@1.6.21":
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.21.tgz#d3651b4802db7bdc399270c0ffa9e2aa99dd4b00"
+  integrity sha512-z35VI6qDw9eAzR/obtgHbYVUdb/Pm+oUnlP1lLR94Oe05Xs2H7vlAgpuFBCLH5g/egzAc2wZCyoVydr25CsF+A==
   dependencies:
     "@babel/core" "7.11.6"
     "@babel/plugin-syntax-jsx" "7.10.4"
     "@babel/plugin-syntax-object-rest-spread" "7.8.3"
-    "@mdx-js/util" "1.6.18"
-    babel-plugin-apply-mdx-type-prop "1.6.18"
-    babel-plugin-extract-import-names "1.6.18"
+    "@mdx-js/util" "1.6.21"
+    babel-plugin-apply-mdx-type-prop "1.6.21"
+    babel-plugin-extract-import-names "1.6.21"
     camelcase-css "2.0.1"
     detab "2.0.3"
     hast-util-raw "6.0.1"
     lodash.uniq "4.5.0"
-    mdast-util-to-hast "9.1.1"
+    mdast-util-to-hast "9.1.2"
     remark-footnotes "2.0.0"
-    remark-mdx "1.6.18"
+    remark-mdx "1.6.21"
     remark-parse "8.0.3"
     remark-squeeze-paragraphs "4.0.0"
     style-to-object "0.3.0"
@@ -2250,15 +2250,15 @@
     unist-builder "2.0.3"
     unist-util-visit "2.0.3"
 
-"@mdx-js/react@1.6.18":
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.18.tgz#f83cbb2355de9cf36a213140ce21647da1e34fa7"
-  integrity sha512-aFHsZVu7r9WamlP+WO/lyvHHZAubkQjkcRYlvS7fQElypfJvjKdHevjC3xiqlsQpasx/4KqRMoEIb++wNtd+6w==
+"@mdx-js/react@1.6.21":
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.21.tgz#86d962471a5e160c59a6b32054aa55c0c7ca404e"
+  integrity sha512-CgSNT9sq2LAlhEbVlPg7DwUQkypz+CWaWGcJbkgmp9WCAy6vW33CQ44UbKPiH3wet9o+UbXeQOqzZd041va83g==
 
-"@mdx-js/util@1.6.18":
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.18.tgz#c7563bf72cb4520b8b7100b64006a64be717e936"
-  integrity sha512-axMe+NoLF55OlXPbhRn4GNCHcL1f5W3V3c0dWzg05S9JXm3Ecpxzxaht3g3vTP0dcqBL/yh/xCvzK0ZpO54Eug==
+"@mdx-js/util@1.6.21":
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.21.tgz#25f97a0a1b76e78c16ae5d98c6c73e1be8d89e39"
+  integrity sha512-6sANhqfEHu6gdHZSrzDjN18Y48mIon8f2Os6J+IFmMHN0IhNG/0PUIIsI07kA1sZ9t6vgZNBloVmcDa5WOSe6A==
 
 "@munter/tap-render@^0.2.0":
   version "0.2.0"
@@ -3518,13 +3518,13 @@ babel-loader@^8.1.0:
     pify "^4.0.1"
     schema-utils "^2.6.5"
 
-babel-plugin-apply-mdx-type-prop@1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.18.tgz#81f31b472f3b28289d4cea0f76c0315e6b85394f"
-  integrity sha512-lcpbj/GatKQp48jsJ8Os/ZXv381ZYFNKA27EPllcpFMpqiS696XkoK+xie/2GjzQSe5IIbo3srsXpd6/ik8PsQ==
+babel-plugin-apply-mdx-type-prop@1.6.21:
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.21.tgz#0c8600c965ca4203e3c026ed971ed5b7e810aeba"
+  integrity sha512-+vQarmm+g+kePH4CMp2iEN/HOx1oEvZeSKCdKCEZlnJOthXzkpaRAbM3ZNCiKqVr9WuoqPNfoXQ0EVppYpIwfg==
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
-    "@mdx-js/util" "1.6.18"
+    "@mdx-js/util" "1.6.21"
 
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
@@ -3533,10 +3533,10 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-extract-import-names@1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.18.tgz#be74a5e12e1b5a5db5af53015a6a62ad16ac18f5"
-  integrity sha512-2EyZia3Ezl3UdhBcgDl6KZTNkYa2VhmAHHbJdhCroa1pZD/E56BulVsSKIhm/kza9agnabDR2VEHO+ZnqpfxbQ==
+babel-plugin-extract-import-names@1.6.21:
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.21.tgz#94efffee4ea79982491573e5f67d9957ab77596a"
+  integrity sha512-mCjTry00HB/4xHGunxQNMOGZ7JEGJdEScNh7C1WJBto7nePyn9wCdYAZP61pGC6+z3ETH5btY20mqg0plcxZGA==
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
 
@@ -9465,13 +9465,13 @@ mdast-util-gfm@^0.1.0:
     mdast-util-gfm-table "^0.1.0"
     mdast-util-gfm-task-list-item "^0.1.0"
 
-mdast-util-to-hast@9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.1.tgz#953ff12aed57464b11d7e5549a45913e561909fa"
-  integrity sha512-vpMWKFKM2mnle+YbNgDXxx95vv0CoLU0v/l3F5oFAG5DV7qwkZVWA206LsAdOnEVyf5vQcLnb3cWJywu7mUxsQ==
+mdast-util-to-hast@9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.2.tgz#10fa5ed9d45bf3755891e5801d0f32e2584a9423"
+  integrity sha512-OpkFLBC2VnNAb2FNKcKWu9FMbJhQKog+FCT8nuKmQNIKXyT1n3SIskE7uWDep6x+cA20QXlK5AETHQtYmQmxtQ==
   dependencies:
     "@types/mdast" "^3.0.0"
-    "@types/unist" "^2.0.3"
+    "@types/unist" "^2.0.0"
     mdast-util-definitions "^3.0.0"
     mdurl "^1.0.0"
     unist-builder "^2.0.0"
@@ -11504,15 +11504,14 @@ react-dom@^0.14.7:
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.14.9.tgz#05064a3dcf0fb1880a3b2bfc9d58c55d8d9f6293"
   integrity sha1-BQZKPc8PsYgKOyv8nVjFXY2fYpM=
 
-react-dom@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-g-analytics@0.4.2:
   version "0.4.2"
@@ -11607,14 +11606,13 @@ react@^0.14.7:
     envify "^3.0.0"
     fbjs "^0.6.1"
 
-react@^16.8.6:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-file-stdin@^0.2.0:
   version "0.2.1"
@@ -11964,16 +11962,16 @@ remark-loader@^2.0.0:
     schema-utils "^3.0.0"
     vfile-reporter "^6.0.1"
 
-remark-mdx@1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.18.tgz#d8c76017c95824cc7fb853bb2759add8ba0cf319"
-  integrity sha512-xNhjv4kJZ8L6RV68yK8fQ6XWlvSIFOE5VPmM7wMKSwkvwBu6tlUJy0gRF2WiZ4fPPOj6jpqlVB9QakipvZuEqg==
+remark-mdx@1.6.21:
+  version "1.6.21"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.21.tgz#0c1a7e042e50938ff89ad8dd7e8e219d4b0404ce"
+  integrity sha512-IGb3l46a6NFi62egT+WXeTT3T8wYTunmPCEGTfDO6oRAfuss9VAb/3InVCKKGXXoiNi0mTuplI0EFusdCLGk3A==
   dependencies:
     "@babel/core" "7.11.6"
     "@babel/helper-plugin-utils" "7.10.4"
     "@babel/plugin-proposal-object-rest-spread" "7.11.0"
     "@babel/plugin-syntax-jsx" "7.10.4"
-    "@mdx-js/util" "1.6.18"
+    "@mdx-js/util" "1.6.21"
     is-alphabetical "1.0.4"
     remark-parse "8.0.3"
     unified "9.2.0"
@@ -12510,10 +12508,10 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"