diff --git a/client/state/reactContext.tsx b/client/state/reactContext.tsx
index b41cc94..2c7f774 100644
--- a/client/state/reactContext.tsx
+++ b/client/state/reactContext.tsx
@@ -33,20 +33,16 @@ export function ConsumeState({ children }: ConsumeStateProps) {
 
 export function injectState<P extends { appState: AppState }>(
   Component: React.ComponentType<P>
-): React.ComponentClass<Omit<P, "appState">> {
-  return class extends React.Component<Omit<P, "appState">> {
-    render() {
-      const consumeState = (state: AppState | null) => {
-        if (state == null) {
-          throw new Error(
-            "Component with injectState must be mounted inside ProvideState"
-          );
-        }
-        // tslint:disable-next-line:no-object-literal-type-assertion
-        const allProps: Readonly<P> = {...this.props, appState: state} as Readonly<P>;
-        return <Component {...allProps} />;
-      };
-      return <StateContext.Consumer>{consumeState}</StateContext.Consumer>;
+): React.FunctionComponent<Omit<P, "appState">> {
+  return function InjectState(props) {
+    const state = React.useContext(StateContext);
+    if (state == null) {
+      throw new Error(
+        "Component with injectState must be mounted inside ProvideState"
+      );
     }
-  };
+    // tslint:disable-next-line: no-object-literal-type-assertion
+    const allProps: Readonly<P> = {...props, appState: state} as Readonly<P>;
+    return <Component {...allProps} />;
+  }
 }