diff --git a/docs/data-fetching.md b/docs/data-fetching.md
index b1d3919ef..cdb0eb9e5 100644
--- a/docs/data-fetching.md
+++ b/docs/data-fetching.md
@@ -41,14 +41,22 @@ React components as follows:
 #### React Component
 
 ```js
-class Post extends React.Component {
-  static contextTypes = { fetch: PropTypes.func.isRequired };
-  handleDelete = (event) => {
-    event.preventDefault();
-    const id = event.target.dataset['id'];
-    this.context.fetch(`/api/posts/${id}`, { method: 'DELETE' }).then(...);
-  };
-  render() { ... }
+import {useContext} from 'react';
+import ApplicationContext from '../ApplicationContext';
+
+function Post() {
+  const {context} = useContext(ApplicationContext);
+  return (
+    <div>
+      ...
+      <a onClick={(event) => {
+        event.preventDefault();
+        const id = event.target.dataset['id'];
+        // Use context.fetch to make it work in both server-side and client-side
+        context.fetch(`/api/posts/${id}`, { method: 'DELETE' }).then(...);
+      }}>Delete</a>
+    </div>
+  );
 }
 ```
 
diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md
index 745b45d3f..c4d71fe53 100644
--- a/docs/react-style-guide.md
+++ b/docs/react-style-guide.md
@@ -127,10 +127,11 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 // Navigation.js
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
+import useStyles from 'isomorphic-style-loader/useStyles';
 import s from './Navigation.scss';
 
-function Navigation() {
+export default function Navigation() {
+  useStyles(s);
   return (
     <nav className={`${s.root} ${this.props.className}`}>
       <ul className={s.items}>
@@ -150,8 +151,6 @@ function Navigation() {
 }
 
 Navigation.propTypes = { className: PropTypes.string };
-
-export default withStyles(Navigation, s);
 ```
 
 ### Use higher-order components
@@ -205,14 +204,11 @@ export default withViewport;
 
 ```js
 // MyComponent.js
-import React from 'react';
 import withViewport from './withViewport';
 
-class MyComponent {
-  render() {
-    let { width, height } = this.props.viewport;
-    return <div>{`Viewport: ${width}x${height}`}</div>;
-  }
+function MyComponent(props) {
+  const { width, height } = props.viewport;
+  return <div>{`Viewport: ${width}x${height}`}</div>;
 }
 
 export default withViewport(MyComponent);
diff --git a/docs/recipes/how-to-implement-routing.md b/docs/recipes/how-to-implement-routing.md
index c306a1281..f0eff5869 100644
--- a/docs/recipes/how-to-implement-routing.md
+++ b/docs/recipes/how-to-implement-routing.md
@@ -157,38 +157,36 @@ In order to trigger client-side navigation without causing full-page refresh, yo
 `history.push()` method, for example:
 
 ```js
-import React from 'react';
 import history from '../history';
 
-class App extends React.Component {
-  transition = event => {
-    event.preventDefault();
-    history.push({
-      pathname: event.currentTarget.pathname,
-      search: event.currentTarget.search,
-    });
-  };
-  render() {
-    return (
-      <ul>
-        <li>
-          <a href="/" onClick={this.transition}>
-            Home
-          </a>
-        </li>
-        <li>
-          <a href="/one" onClick={this.transition}>
-            One
-          </a>
-        </li>
-        <li>
-          <a href="/two" onClick={this.transition}>
-            Two
-          </a>
-        </li>
-      </ul>
-    );
-  }
+function transition(event) {
+  event.preventDefault();
+  history.push({
+    pathname: event.currentTarget.pathname,
+    search: event.currentTarget.search,
+  });
+}
+
+function App() {
+  return (
+    <ul>
+      <li>
+        <a href="/" onClick={transition}>
+          Home
+        </a>
+      </li>
+      <li>
+        <a href="/one" onClick={transition}>
+          One
+        </a>
+      </li>
+      <li>
+        <a href="/two" onClick={transition}>
+          Two
+        </a>
+      </li>
+    </ul>
+  );
 }
 ```
 
diff --git a/docs/recipes/how-to-integrate-disqus.md b/docs/recipes/how-to-integrate-disqus.md
index 6427524c0..f0983dfa0 100644
--- a/docs/recipes/how-to-integrate-disqus.md
+++ b/docs/recipes/how-to-integrate-disqus.md
@@ -65,22 +65,17 @@ export default DisqusThread;
 #### `MyComponent.js`
 
 ```js
-import React from 'react';
 import DisqusThread from './DisqusThread.js';
 
-class MyComponent extends React.Component {
-  render() {
-    return (
-      <div>
-        <DisqusThread
-          id="e94d73ff-fd92-467d-b643-c86889f4b8be"
-          title="How to integrate Disqus into ReactJS App"
-          path="/blog/123-disquss-integration"
-        />
-      </div>
-    );
-  }
+export default function MyComponent() {
+  return (
+    <div>
+      <DisqusThread
+        id="e94d73ff-fd92-467d-b643-c86889f4b8be"
+        title="How to integrate Disqus into ReactJS App"
+        path="/blog/123-disquss-integration"
+      />
+    </div>
+  );
 }
-
-export default MyComponent;
 ```
diff --git a/src/components/App.js b/src/components/App.js
index 651438ed7..2952f5ddf 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -13,13 +13,6 @@ import PropTypes from 'prop-types';
 import StyleContext from 'isomorphic-style-loader/StyleContext';
 import ApplicationContext from './ApplicationContext';
 
-const ContextType = {
-  // Universal HTTP client
-  fetch: PropTypes.func.isRequired,
-  pathname: PropTypes.string.isRequired,
-  query: PropTypes.object,
-};
-
 /**
  * The top-level React component setting context (global) variables
  * that can be accessed from all the child components.
@@ -34,7 +27,7 @@ const ContextType = {
  *   };
  *
  *   ReactDOM.render(
- *     <App context={context}>
+ *     <App context={context} insertCss={() => {}}>
  *       <Layout>
  *         <LandingPage />
  *       </Layout>
@@ -42,28 +35,28 @@ const ContextType = {
  *     container,
  *   );
  */
-class App extends React.PureComponent {
-  static propTypes = {
-    // Enables critical path CSS rendering
-    // https://github.com/kriasoft/isomorphic-style-loader
-    insertCss: PropTypes.func.isRequired,
-    context: PropTypes.shape(ContextType).isRequired,
-    children: PropTypes.element.isRequired,
-  };
 
-  render() {
-    const { context, insertCss } = this.props;
-
-    // NOTE: If you need to add or modify header, footer etc. of the app,
-    // please do that inside the Layout component.
-    return (
-      <StyleContext.Provider value={{ insertCss }}>
-        <ApplicationContext.Provider value={{ context }}>
-          {React.Children.only(this.props.children)}
-        </ApplicationContext.Provider>
-      </StyleContext.Provider>
-    );
-  }
+export default function App({ context, insertCss, children }) {
+  // NOTE: If you need to add or modify header, footer etc. of the app,
+  // please do that inside the Layout component.
+  return (
+    <StyleContext.Provider value={{ insertCss }}>
+      <ApplicationContext.Provider value={{ context }}>
+        {React.Children.only(children)}
+      </ApplicationContext.Provider>
+    </StyleContext.Provider>
+  );
 }
 
-export default App;
+App.propTypes = {
+  // Enables critical path CSS rendering
+  // https://github.com/kriasoft/isomorphic-style-loader
+  insertCss: PropTypes.func.isRequired,
+  context: PropTypes.shape({
+    // Universal HTTP client
+    fetch: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    query: PropTypes.object,
+  }).isRequired,
+  children: PropTypes.element.isRequired,
+};
diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js
index c22042aac..de21a8c4d 100644
--- a/src/components/Feedback/Feedback.js
+++ b/src/components/Feedback/Feedback.js
@@ -7,32 +7,29 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Feedback.css';
 
-class Feedback extends React.Component {
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <a
-            className={s.link}
-            href="https://gitter.im/kriasoft/react-starter-kit"
-          >
-            Ask a question
-          </a>
-          <span className={s.spacer}>|</span>
-          <a
-            className={s.link}
-            href="https://github.com/kriasoft/react-starter-kit/issues/new"
-          >
-            Report an issue
-          </a>
-        </div>
+export default function Feedback() {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <a
+          className={s.link}
+          href="https://gitter.im/kriasoft/react-starter-kit"
+        >
+          Ask a question
+        </a>
+        <span className={s.spacer}>|</span>
+        <a
+          className={s.link}
+          href="https://github.com/kriasoft/react-starter-kit/issues/new"
+        >
+          Report an issue
+        </a>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-export default withStyles(s)(Feedback);
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index b861410c7..5062f56d5 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -7,37 +7,35 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Footer.css';
 import Link from '../Link';
 
-class Footer extends React.Component {
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <span className={s.text}>© Your Company</span>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/">
-            Home
-          </Link>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/admin">
-            Admin
-          </Link>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/privacy">
-            Privacy
-          </Link>
-          <span className={s.spacer}>·</span>
-          <Link className={s.link} to="/not-found">
-            Not Found
-          </Link>
-        </div>
+export default function Footer() {
+  useStyles(s);
+
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <span className={s.text}>© Your Company</span>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/">
+          Home
+        </Link>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/admin">
+          Admin
+        </Link>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/privacy">
+          Privacy
+        </Link>
+        <span className={s.spacer}>·</span>
+        <Link className={s.link} to="/not-found">
+          Not Found
+        </Link>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-export default withStyles(s)(Footer);
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index cfcb83745..9750bcc3e 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -7,38 +7,35 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Header.css';
 import Link from '../Link';
 import Navigation from '../Navigation';
 import logoUrl from './logo-small.png';
 import logoUrl2x from './logo-small@2x.png';
 
-class Header extends React.Component {
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <Navigation />
-          <Link className={s.brand} to="/">
-            <img
-              src={logoUrl}
-              srcSet={`${logoUrl2x} 2x`}
-              width="38"
-              height="38"
-              alt="React"
-            />
-            <span className={s.brandTxt}>Your Company</span>
-          </Link>
-          <div className={s.banner}>
-            <h1 className={s.bannerTitle}>React</h1>
-            <p className={s.bannerDesc}>Complex web apps made easy</p>
-          </div>
+export default function Header() {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <Navigation />
+        <Link className={s.brand} to="/">
+          <img
+            src={logoUrl}
+            srcSet={`${logoUrl2x} 2x`}
+            width="38"
+            height="38"
+            alt="React"
+          />
+          <span className={s.brandTxt}>Your Company</span>
+        </Link>
+        <div className={s.banner}>
+          <h1 className={s.bannerTitle}>React</h1>
+          <p className={s.bannerDesc}>Complex web apps made easy</p>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-export default withStyles(s)(Header);
diff --git a/src/components/Html.js b/src/components/Html.js
index 3adb7b369..fb23d700b 100644
--- a/src/components/Html.js
+++ b/src/components/Html.js
@@ -14,77 +14,79 @@ import config from '../config';
 
 /* eslint-disable react/no-danger */
 
-class Html extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    styles: PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        cssText: PropTypes.string.isRequired,
-      }).isRequired,
-    ),
-    scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
-    app: PropTypes.object, // eslint-disable-line
-    children: PropTypes.string.isRequired,
-  };
-
-  static defaultProps = {
-    styles: [],
-    scripts: [],
-  };
-
-  render() {
-    const { title, description, styles, scripts, app, children } = this.props;
-    return (
-      <html className="no-js" lang="en">
-        <head>
-          <meta charSet="utf-8" />
-          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-          <title>{title}</title>
-          <meta name="description" content={description} />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          {scripts.map(script => (
-            <link key={script} rel="preload" href={script} as="script" />
-          ))}
-          <link rel="manifest" href="/site.webmanifest" />
-          <link rel="apple-touch-icon" href="/icon.png" />
-          {styles.map(style => (
-            <style
-              key={style.id}
-              id={style.id}
-              dangerouslySetInnerHTML={{ __html: style.cssText }}
-            />
-          ))}
-        </head>
-        <body>
-          <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+export default function Html({
+  title,
+  description,
+  styles,
+  scripts,
+  app,
+  children,
+}) {
+  return (
+    <html className="no-js" lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {scripts.map(script => (
+          <link key={script} rel="preload" href={script} as="script" />
+        ))}
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="apple-touch-icon" href="/icon.png" />
+        {styles.map(style => (
+          <style
+            key={style.id}
+            id={style.id}
+            dangerouslySetInnerHTML={{ __html: style.cssText }}
+          />
+        ))}
+      </head>
+      <body>
+        <div id="app" dangerouslySetInnerHTML={{ __html: children }} />
+        <script
+          dangerouslySetInnerHTML={{ __html: `window.App=${serialize(app)}` }}
+        />
+        {scripts.map(script => (
+          <script key={script} src={script} />
+        ))}
+        {config.analytics.googleTrackingId && (
           <script
-            dangerouslySetInnerHTML={{ __html: `window.App=${serialize(app)}` }}
+            dangerouslySetInnerHTML={{
+              __html:
+                'window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;' +
+                `ga('create','${config.analytics.googleTrackingId}','auto');ga('send','pageview')`,
+            }}
           />
-          {scripts.map(script => (
-            <script key={script} src={script} />
-          ))}
-          {config.analytics.googleTrackingId && (
-            <script
-              dangerouslySetInnerHTML={{
-                __html:
-                  'window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;' +
-                  `ga('create','${config.analytics.googleTrackingId}','auto');ga('send','pageview')`,
-              }}
-            />
-          )}
-          {config.analytics.googleTrackingId && (
-            <script
-              src="https://www.google-analytics.com/analytics.js"
-              async
-              defer
-            />
-          )}
-        </body>
-      </html>
-    );
-  }
+        )}
+        {config.analytics.googleTrackingId && (
+          <script
+            src="https://www.google-analytics.com/analytics.js"
+            async
+            defer
+          />
+        )}
+      </body>
+    </html>
+  );
 }
 
-export default Html;
+Html.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  styles: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      cssText: PropTypes.string.isRequired,
+    }).isRequired,
+  ),
+  scripts: PropTypes.arrayOf(PropTypes.string.isRequired),
+  app: PropTypes.object, // eslint-disable-line
+  children: PropTypes.string.isRequired,
+};
+
+Html.defaultProps = {
+  styles: [],
+  scripts: [],
+};
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index 05b8d957e..769e5c317 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -7,9 +7,9 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 
 // external-global styles must be imported in your JS.
 import normalizeCss from 'normalize.css';
@@ -18,21 +18,18 @@ import Header from '../Header';
 import Feedback from '../Feedback';
 import Footer from '../Footer';
 
-class Layout extends React.Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  render() {
-    return (
-      <div>
-        <Header />
-        {this.props.children}
-        <Feedback />
-        <Footer />
-      </div>
-    );
-  }
+export default function Layout({ children }) {
+  useStyles(s, normalizeCss);
+  return (
+    <>
+      <Header />
+      {children}
+      <Feedback />
+      <Footer />
+    </>
+  );
 }
 
-export default withStyles(normalizeCss, s)(Layout);
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/src/components/Layout/__snapshots__/Layout.test.js.snap b/src/components/Layout/__snapshots__/Layout.test.js.snap
index 8e4e7cb5d..b74690d19 100644
--- a/src/components/Layout/__snapshots__/Layout.test.js.snap
+++ b/src/components/Layout/__snapshots__/Layout.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout renders children correctly 1`] = `
-<div>
+Array [
   <div
     className="root"
   >
@@ -84,10 +84,10 @@ exports[`Layout renders children correctly 1`] = `
         </p>
       </div>
     </div>
-  </div>
+  </div>,
   <div
     className="child"
-  />
+  />,
   <div
     className="root"
   >
@@ -112,7 +112,7 @@ exports[`Layout renders children correctly 1`] = `
         Report an issue
       </a>
     </div>
-  </div>
+  </div>,
   <div
     className="root"
   >
@@ -173,6 +173,6 @@ exports[`Layout renders children correctly 1`] = `
         Not Found
       </a>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js
index 3bf5c63d8..6951ccd43 100644
--- a/src/components/Link/Link.js
+++ b/src/components/Link/Link.js
@@ -19,42 +19,39 @@ function isModifiedEvent(event) {
   return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }
 
-class Link extends React.Component {
-  static propTypes = {
-    to: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    onClick: PropTypes.func,
-  };
-
-  static defaultProps = {
-    onClick: null,
-  };
-
-  handleClick = event => {
-    if (this.props.onClick) {
-      this.props.onClick(event);
-    }
-
-    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
-      return;
-    }
-
-    if (event.defaultPrevented === true) {
-      return;
-    }
-
-    event.preventDefault();
-    history.push(this.props.to);
-  };
-
-  render() {
-    const { to, children, ...props } = this.props;
-    return (
-      <a href={to} {...props} onClick={this.handleClick}>
-        {children}
-      </a>
-    );
+function handleClick(props, event) {
+  if (props.onClick) {
+    props.onClick(event);
   }
+
+  if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
+    return;
+  }
+
+  if (event.defaultPrevented === true) {
+    return;
+  }
+
+  event.preventDefault();
+  history.push(props.to);
 }
 
-export default Link;
+export default function Link(props) {
+  const { to, children, ...attrs } = props;
+
+  return (
+    <a href={to} {...attrs} onClick={e => handleClick(props, e)}>
+      {children}
+    </a>
+  );
+}
+
+Link.propTypes = {
+  to: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func,
+};
+
+Link.defaultProps = {
+  onClick: null,
+};
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
index 97fd0f7d3..411962089 100644
--- a/src/components/Navigation/Navigation.js
+++ b/src/components/Navigation/Navigation.js
@@ -7,33 +7,30 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import cx from 'classnames';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Navigation.css';
 import Link from '../Link';
 
-class Navigation extends React.Component {
-  render() {
-    return (
-      <div className={s.root} role="navigation">
-        <Link className={s.link} to="/about">
-          About
-        </Link>
-        <Link className={s.link} to="/contact">
-          Contact
-        </Link>
-        <span className={s.spacer}> | </span>
-        <Link className={s.link} to="/login">
-          Log in
-        </Link>
-        <span className={s.spacer}>or</span>
-        <Link className={cx(s.link, s.highlight)} to="/register">
-          Sign up
-        </Link>
-      </div>
-    );
-  }
+export default function Navigation() {
+  useStyles(s);
+  return (
+    <div className={s.root} role="navigation">
+      <Link className={s.link} to="/about">
+        About
+      </Link>
+      <Link className={s.link} to="/contact">
+        Contact
+      </Link>
+      <span className={s.spacer}> | </span>
+      <Link className={s.link} to="/login">
+        Log in
+      </Link>
+      <span className={s.spacer}>or</span>
+      <Link className={cx(s.link, s.highlight)} to="/register">
+        Sign up
+      </Link>
+    </div>
+  );
 }
-
-export default withStyles(s)(Navigation);
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index 55ab20c9a..b1e2e6696 100644
--- a/src/components/Page/Page.js
+++ b/src/components/Page/Page.js
@@ -7,31 +7,27 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Page.css';
 
-class Page extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    html: PropTypes.string.isRequired,
-  };
-
-  render() {
-    const { title, html } = this.props;
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{title}</h1>
-          <div
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        </div>
+export default function Page({ title, html }) {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <div
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Page);
+Page.propTypes = {
+  title: PropTypes.string.isRequired,
+  html: PropTypes.string.isRequired,
+};
diff --git a/src/routes/admin/Admin.js b/src/routes/admin/Admin.js
index 132883833..e2e3e1f96 100644
--- a/src/routes/admin/Admin.js
+++ b/src/routes/admin/Admin.js
@@ -7,26 +7,23 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Admin.css';
 
-class Admin extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-  };
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{this.props.title}</h1>
-          <p>...</p>
-        </div>
+export default function Admin({ title }) {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <p>...</p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Admin);
+Admin.propTypes = {
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/routes/contact/Contact.js b/src/routes/contact/Contact.js
index 923749a54..006793991 100644
--- a/src/routes/contact/Contact.js
+++ b/src/routes/contact/Contact.js
@@ -7,26 +7,23 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Contact.css';
 
-class Contact extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-  };
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{this.props.title}</h1>
-          <p>...</p>
-        </div>
+export default function Contact({ title }) {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <p>...</p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Contact);
+Contact.propTypes = {
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/routes/error/ErrorPage.js b/src/routes/error/ErrorPage.js
index 59bca0f41..01aa7ffe2 100644
--- a/src/routes/error/ErrorPage.js
+++ b/src/routes/error/ErrorPage.js
@@ -7,42 +7,42 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './ErrorPage.css';
 
-class ErrorPage extends React.Component {
-  static propTypes = {
-    error: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      message: PropTypes.string.isRequired,
-      stack: PropTypes.string.isRequired,
-    }),
-  };
-
-  static defaultProps = {
-    error: null,
-  };
-
-  render() {
-    if (__DEV__ && this.props.error) {
-      return (
-        <div>
-          <h1>{this.props.error.name}</h1>
-          <pre>{this.props.error.stack}</pre>
-        </div>
-      );
-    }
-
+export function ErrorPageWithoutStyle({ error }) {
+  if (__DEV__ && error) {
     return (
-      <div>
-        <h1>Error</h1>
-        <p>Sorry, a critical error occurred on this page.</p>
-      </div>
+      <>
+        <h1>{error.name}</h1>
+        <pre>{error.stack}</pre>
+      </>
     );
   }
+
+  return (
+    <>
+      <h1>Error</h1>
+      <p>Sorry, a critical error occurred on this page.</p>
+    </>
+  );
 }
 
-export { ErrorPage as ErrorPageWithoutStyle };
-export default withStyles(s)(ErrorPage);
+ErrorPageWithoutStyle.propTypes = {
+  error: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    stack: PropTypes.string.isRequired,
+  }),
+};
+
+ErrorPageWithoutStyle.defaultProps = {
+  error: null,
+};
+
+export default function ErrorPage(props) {
+  useStyles(s);
+  return ErrorPageWithoutStyle(props);
+}
diff --git a/src/routes/home/Home.js b/src/routes/home/Home.js
index 7c89ffaa6..215d256d1 100644
--- a/src/routes/home/Home.js
+++ b/src/routes/home/Home.js
@@ -7,43 +7,40 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Home.css';
 
-class Home extends React.Component {
-  static propTypes = {
-    news: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        link: PropTypes.string.isRequired,
-        content: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>React.js News</h1>
-          {this.props.news.map(item => (
-            <article key={item.link} className={s.newsItem}>
-              <h1 className={s.newsTitle}>
-                <a href={item.link}>{item.title}</a>
-              </h1>
-              <div
-                className={s.newsDesc}
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: item.content }}
-              />
-            </article>
-          ))}
-        </div>
+export default function Home({ news }) {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>React.js News</h1>
+        {news.map(item => (
+          <article key={item.link} className={s.newsItem}>
+            <h1 className={s.newsTitle}>
+              <a href={item.link}>{item.title}</a>
+            </h1>
+            <div
+              className={s.newsDesc}
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: item.content }}
+            />
+          </article>
+        ))}
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Home);
+Home.propTypes = {
+  news: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      link: PropTypes.string.isRequired,
+      content: PropTypes.string,
+    }),
+  ).isRequired,
+};
diff --git a/src/routes/login/Login.js b/src/routes/login/Login.js
index 5991f44ae..28affd9ad 100644
--- a/src/routes/login/Login.js
+++ b/src/routes/login/Login.js
@@ -7,122 +7,120 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Login.css';
 
-class Login extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-  };
+export default function Login({ title }) {
+  useStyles(s);
 
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{this.props.title}</h1>
-          <p className={s.lead}>
-            Log in with your username or company email address.
-          </p>
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <p className={s.lead}>
+          Log in with your username or company email address.
+        </p>
+        <div className={s.formGroup}>
+          <a className={s.facebook} href="/login/facebook">
+            <svg
+              className={s.icon}
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M22 16l1-5h-5V7c0-1.544.784-2 3-2h2V0h-4c-4.072 0-7 2.435-7 7v4H7v5h5v14h6V16h4z" />
+            </svg>
+            <span>Log in with Facebook</span>
+          </a>
+        </div>
+        <div className={s.formGroup}>
+          <a className={s.google} href="/login/google">
+            <svg
+              className={s.icon}
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d={
+                  'M30 13h-4V9h-2v4h-4v2h4v4h2v-4h4m-15 2s-2-1.15-2-2c0 0-.5-1.828 1-3 ' +
+                  '1.537-1.2 3-3.035 3-5 0-2.336-1.046-5-3-6h3l2.387-1H10C5.835 0 2 3.345 2 7c0 ' +
+                  '3.735 2.85 6.56 7.086 6.56.295 0 .58-.006.86-.025-.273.526-.47 1.12-.47 1.735 ' +
+                  '0 1.037.817 2.042 1.523 2.73H9c-5.16 0-9 2.593-9 6 0 3.355 4.87 6 10.03 6 5.882 ' +
+                  '0 9.97-3 9.97-7 0-2.69-2.545-4.264-5-6zm-4-4c-2.395 0-5.587-2.857-6-6C4.587 ' +
+                  '3.856 6.607.93 9 1c2.394.07 4.603 2.908 5.017 6.052C14.43 10.195 13 13 11 ' +
+                  '13zm-1 15c-3.566 0-7-1.29-7-4 0-2.658 3.434-5.038 7-5 .832.01 2 0 2 0 1 0 ' +
+                  '2.88.88 4 2 1 1 1 2.674 1 3 0 3-1.986 4-7 4z'
+                }
+              />
+            </svg>
+            <span>Log in with Google</span>
+          </a>
+        </div>
+        <div className={s.formGroup}>
+          <a className={s.twitter} href="/login/twitter">
+            <svg
+              className={s.icon}
+              width="30"
+              height="30"
+              viewBox="0 0 30 30"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d={
+                  'M30 6.708c-1.105.49-2.756 1.143-4 1.292 1.273-.762 2.54-2.56 ' +
+                  '3-4-.97.577-2.087 1.355-3.227 1.773L25 5c-1.12-1.197-2.23-2-4-2-3.398 0-6 ' +
+                  '2.602-6 6 0 .4.047.7.11.956L15 10C9 10 5.034 8.724 2 5c-.53.908-1 1.872-1 ' +
+                  '3 0 2.136 1.348 3.894 3 5-1.01-.033-2.17-.542-3-1 0 2.98 4.186 6.432 7 7-1 ' +
+                  '1-4.623.074-5 0 .784 2.447 3.31 3.95 6 4-2.105 1.648-4.647 2.51-7.53 2.51-.5 ' +
+                  '0-.988-.03-1.47-.084C2.723 27.17 6.523 28 10 28c11.322 0 17-8.867 17-17 ' +
+                  '0-.268.008-.736 0-1 1.2-.868 2.172-2.058 3-3.292z'
+                }
+              />
+            </svg>
+            <span>Log in with Twitter</span>
+          </a>
+        </div>
+        <strong className={s.lineThrough}>OR</strong>
+        <form method="post">
           <div className={s.formGroup}>
-            <a className={s.facebook} href="/login/facebook">
-              <svg
-                className={s.icon}
-                width="30"
-                height="30"
-                viewBox="0 0 30 30"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M22 16l1-5h-5V7c0-1.544.784-2 3-2h2V0h-4c-4.072 0-7 2.435-7 7v4H7v5h5v14h6V16h4z" />
-              </svg>
-              <span>Log in with Facebook</span>
-            </a>
+            <label className={s.label} htmlFor="usernameOrEmail">
+              Username or email address:
+              <input
+                className={s.input}
+                id="usernameOrEmail"
+                type="text"
+                name="usernameOrEmail"
+                autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+              />
+            </label>
           </div>
           <div className={s.formGroup}>
-            <a className={s.google} href="/login/google">
-              <svg
-                className={s.icon}
-                width="30"
-                height="30"
-                viewBox="0 0 30 30"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={
-                    'M30 13h-4V9h-2v4h-4v2h4v4h2v-4h4m-15 2s-2-1.15-2-2c0 0-.5-1.828 1-3 ' +
-                    '1.537-1.2 3-3.035 3-5 0-2.336-1.046-5-3-6h3l2.387-1H10C5.835 0 2 3.345 2 7c0 ' +
-                    '3.735 2.85 6.56 7.086 6.56.295 0 .58-.006.86-.025-.273.526-.47 1.12-.47 1.735 ' +
-                    '0 1.037.817 2.042 1.523 2.73H9c-5.16 0-9 2.593-9 6 0 3.355 4.87 6 10.03 6 5.882 ' +
-                    '0 9.97-3 9.97-7 0-2.69-2.545-4.264-5-6zm-4-4c-2.395 0-5.587-2.857-6-6C4.587 ' +
-                    '3.856 6.607.93 9 1c2.394.07 4.603 2.908 5.017 6.052C14.43 10.195 13 13 11 ' +
-                    '13zm-1 15c-3.566 0-7-1.29-7-4 0-2.658 3.434-5.038 7-5 .832.01 2 0 2 0 1 0 ' +
-                    '2.88.88 4 2 1 1 1 2.674 1 3 0 3-1.986 4-7 4z'
-                  }
-                />
-              </svg>
-              <span>Log in with Google</span>
-            </a>
+            <label className={s.label} htmlFor="password">
+              Password:
+              <input
+                className={s.input}
+                id="password"
+                type="password"
+                name="password"
+              />
+            </label>
           </div>
           <div className={s.formGroup}>
-            <a className={s.twitter} href="/login/twitter">
-              <svg
-                className={s.icon}
-                width="30"
-                height="30"
-                viewBox="0 0 30 30"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d={
-                    'M30 6.708c-1.105.49-2.756 1.143-4 1.292 1.273-.762 2.54-2.56 ' +
-                    '3-4-.97.577-2.087 1.355-3.227 1.773L25 5c-1.12-1.197-2.23-2-4-2-3.398 0-6 ' +
-                    '2.602-6 6 0 .4.047.7.11.956L15 10C9 10 5.034 8.724 2 5c-.53.908-1 1.872-1 ' +
-                    '3 0 2.136 1.348 3.894 3 5-1.01-.033-2.17-.542-3-1 0 2.98 4.186 6.432 7 7-1 ' +
-                    '1-4.623.074-5 0 .784 2.447 3.31 3.95 6 4-2.105 1.648-4.647 2.51-7.53 2.51-.5 ' +
-                    '0-.988-.03-1.47-.084C2.723 27.17 6.523 28 10 28c11.322 0 17-8.867 17-17 ' +
-                    '0-.268.008-.736 0-1 1.2-.868 2.172-2.058 3-3.292z'
-                  }
-                />
-              </svg>
-              <span>Log in with Twitter</span>
-            </a>
+            <button className={s.button} type="submit">
+              Log in
+            </button>
           </div>
-          <strong className={s.lineThrough}>OR</strong>
-          <form method="post">
-            <div className={s.formGroup}>
-              <label className={s.label} htmlFor="usernameOrEmail">
-                Username or email address:
-                <input
-                  className={s.input}
-                  id="usernameOrEmail"
-                  type="text"
-                  name="usernameOrEmail"
-                  autoFocus // eslint-disable-line jsx-a11y/no-autofocus
-                />
-              </label>
-            </div>
-            <div className={s.formGroup}>
-              <label className={s.label} htmlFor="password">
-                Password:
-                <input
-                  className={s.input}
-                  id="password"
-                  type="password"
-                  name="password"
-                />
-              </label>
-            </div>
-            <div className={s.formGroup}>
-              <button className={s.button} type="submit">
-                Log in
-              </button>
-            </div>
-          </form>
-        </div>
+        </form>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Login);
+Login.propTypes = {
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/routes/not-found/NotFound.js b/src/routes/not-found/NotFound.js
index e6bbf2ec7..f8fc1d6d9 100644
--- a/src/routes/not-found/NotFound.js
+++ b/src/routes/not-found/NotFound.js
@@ -7,26 +7,24 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './NotFound.css';
 
-class NotFound extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-  };
+export default function NotFound({ title }) {
+  useStyles(s);
 
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{this.props.title}</h1>
-          <p>Sorry, the page you were trying to view does not exist.</p>
-        </div>
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <p>Sorry, the page you were trying to view does not exist.</p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(NotFound);
+NotFound.propTypes = {
+  title: PropTypes.string.isRequired,
+};
diff --git a/src/routes/register/Register.js b/src/routes/register/Register.js
index 0a7fc257a..517e25543 100644
--- a/src/routes/register/Register.js
+++ b/src/routes/register/Register.js
@@ -7,26 +7,23 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
+import useStyles from 'isomorphic-style-loader/useStyles';
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Register.css';
 
-class Register extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-  };
-
-  render() {
-    return (
-      <div className={s.root}>
-        <div className={s.container}>
-          <h1>{this.props.title}</h1>
-          <p>...</p>
-        </div>
+export default function Register({ title }) {
+  useStyles(s);
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1>{title}</h1>
+        <p>...</p>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-export default withStyles(s)(Register);
+Register.propTypes = {
+  title: PropTypes.string.isRequired,
+};