diff --git a/.changeset/curvy-timers-decide.md b/.changeset/curvy-timers-decide.md
new file mode 100644
index 000000000..c0049b9b2
--- /dev/null
+++ b/.changeset/curvy-timers-decide.md
@@ -0,0 +1,6 @@
+---
+'@emotion/styled-base': major
+'@emotion/styled': major
+---
+
+Remove support for deprecated `innerRef` prop
diff --git a/.changeset/two-baboons-mate.md b/.changeset/two-baboons-mate.md
new file mode 100644
index 000000000..87ff37858
--- /dev/null
+++ b/.changeset/two-baboons-mate.md
@@ -0,0 +1,11 @@
+---
+'@emotion/core': major
+'emotion-theming': major
+'@emotion/native': major
+'@emotion/primitives-core': major
+'@emotion/primitives': major
+'@emotion/styled-base': major
+'@emotion/styled': major
+---
+
+Use hooks internally for improved bundle size and a better tree in React DevTools
diff --git a/.github/ISSUE_TEMPLATE/--documentation-issue.md b/.github/ISSUE_TEMPLATE/--documentation-issue.md
index f6287ec84..18b401494 100644
--- a/.github/ISSUE_TEMPLATE/--documentation-issue.md
+++ b/.github/ISSUE_TEMPLATE/--documentation-issue.md
@@ -24,6 +24,6 @@ assignees: ''
 
 <!--
   If existing documentation is available, but needs to be improved,
-  is wrong, or unclear, please post here the relevant 
+  is wrong, or unclear, please post here the relevant
   https://emotion.sh/docs URLs
 -->
diff --git a/.github/ISSUE_TEMPLATE/--feature-request.md b/.github/ISSUE_TEMPLATE/--feature-request.md
index a7369d6b7..1e5662df3 100644
--- a/.github/ISSUE_TEMPLATE/--feature-request.md
+++ b/.github/ISSUE_TEMPLATE/--feature-request.md
@@ -6,7 +6,6 @@ labels: feature request, needs triage
 assignees: ''
 ---
 
-
 **The problem**
 
 <!-- A clear and concise description of what the problem is. e.g. I'm always frustrated when [...] -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index eeb8e591b..9c0e1e1d9 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -15,22 +15,27 @@ merge of your pull request!
 -->
 
 <!-- What changes are being made? (What feature/bug is being fixed here?) -->
+
 **What**:
 
 <!-- Why are these changes necessary? -->
+
 **Why**:
 
 <!-- How were these changes implemented? -->
+
 **How**:
 
 <!-- Have you done all of these things?  -->
+
 **Checklist**:
+
 <!-- add "N/A" to the end of each line that's irrelevant to your changes -->
 <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
+
 - [ ] Documentation
 - [ ] Tests
 - [ ] Code complete
 - [ ] Changeset <!-- This is necessary if your changes should release any packages. Run `yarn changeset` to create a changeset -->
 
-
 <!-- feel free to add additional comments -->
diff --git a/docs/css-prop.mdx b/docs/css-prop.mdx
index d3abce3ed..a1ebe2504 100644
--- a/docs/css-prop.mdx
+++ b/docs/css-prop.mdx
@@ -13,11 +13,11 @@ There are 2 ways to get started with the `css` prop.
 
 Both methods result in the same compiled code.
 After adding the preset or setting the pragma as a comment, compiled jsx code will use emotion's `jsx` function instead of `React.createElement`.
-  
-| | Input | Output |
+
+|        | Input                      | Output                                              |
 | ------ | -------------------------- | --------------------------------------------------- |
 | Before | `<img src="avatar.png" />` | `React.createElement('img', { src: 'avatar.png' })` |
-| After | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })` |
+| After  | `<img src="avatar.png" />` | `jsx('img', { src: 'avatar.png' })`                 |
 
 #### Babel Preset
 
diff --git a/package.json b/package.json
index 4516471b9..e50824d27 100644
--- a/package.json
+++ b/package.json
@@ -26,8 +26,8 @@
     "release": "yarn build && changeset publish"
   },
   "resolutions": {
-    "**/react": "16.8.1",
-    "**/react-dom": "16.8.1",
+    "**/react": "16.11.0",
+    "**/react-dom": "16.11.0",
     "**/browserslist": "^3.2.8",
     "**/graphql-type-json": "0.2.4"
   },
@@ -174,10 +174,10 @@
     "@manypkg/cli": "^0.5.2",
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
-    "@testing-library/react": "^8.0.2",
+    "@testing-library/react": "^9.3.2",
     "@types/jest": "^23.0.2",
     "@types/node": "^10.11.4",
-    "@types/react": "^16.8.20",
+    "@types/react": "^16.9.11",
     "babel-check-duplicated-nodes": "^1.0.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
@@ -236,9 +236,9 @@
     "puppeteer": "^1.6.0",
     "raf": "^3.4.0",
     "razzle": "^2.4.0",
-    "react": "^16.5.2",
+    "react": "^16.11.0",
     "react-art": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react-dom": "^16.11.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-live": "1.10.0",
@@ -247,7 +247,7 @@
     "react-primitives": "^0.7.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.5",
-    "react-test-renderer": "^16.3.2",
+    "react-test-renderer": "16.8.6",
     "stylis": "3.5.4",
     "stylis-rule-sheet": "^0.0.10",
     "svg-tag-names": "^1.1.1",
diff --git a/packages/core/__tests__/class-names.js b/packages/core/__tests__/class-names.js
index 09da3122c..ef9ca1c9c 100644
--- a/packages/core/__tests__/class-names.js
+++ b/packages/core/__tests__/class-names.js
@@ -35,7 +35,6 @@ it('should get the theme', () => {
       </ClassNames>
     </ThemeProvider>
   )
-
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
diff --git a/packages/core/__tests__/css.js b/packages/core/__tests__/css.js
index 467bf3fba..37986765b 100644
--- a/packages/core/__tests__/css.js
+++ b/packages/core/__tests__/css.js
@@ -50,7 +50,6 @@ test('theming with the css prop', () => {
       <div css={theme => ({ color: theme.primary })} />
     </ThemeProvider>
   )
-
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
diff --git a/packages/core/__tests__/global-insertion-after-others.js b/packages/core/__tests__/global-insertion-after-others.js
new file mode 100644
index 000000000..b87819d6d
--- /dev/null
+++ b/packages/core/__tests__/global-insertion-after-others.js
@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx, Global } from '@emotion/core'
+import { render } from '@testing-library/react'
+
+let getDataAttributes = () =>
+  Array.from(document.querySelectorAll('style[data-emotion]'), x =>
+    x.getAttribute('data-emotion')
+  )
+
+test('Global style element insertion after insertion of other styles', () => {
+  let Comp = ({ second }) => (
+    <div>
+      <div
+        css={{
+          color: 'green'
+        }}
+      />
+      {second && (
+        <Global
+          styles={{
+            html: {
+              backgroundColor: 'hotpink'
+            }
+          }}
+        />
+      )}
+    </div>
+  )
+  let { rerender } = render(<Comp />)
+  expect(getDataAttributes()).toEqual(['css'])
+  rerender(<Comp second />)
+  expect(getDataAttributes()).toEqual(['css-global', 'css'])
+})
diff --git a/packages/core/package.json b/packages/core/package.json
index 95978bd8c..aac085d56 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -27,17 +27,17 @@
     "@emotion/utils": "0.11.2"
   },
   "peerDependencies": {
-    "react": ">=16.3.0"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.0.0-next.1",
-    "@types/react": "^16.8.20",
+    "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
     "emotion": "^11.0.0-next.0",
     "emotion-server": "^11.0.0-next.0",
     "emotion-theming": "^11.0.0-next.1",
     "html-tag-names": "^1.1.2",
-    "react": "^16.5.2",
+    "react": "^16.11.0",
     "svg-tag-names": "^1.1.1"
   },
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/core",
diff --git a/packages/core/src/class-names.js b/packages/core/src/class-names.js
index e99313b4d..5e66a2cd3 100644
--- a/packages/core/src/class-names.js
+++ b/packages/core/src/class-names.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react'
+import { useContext } from 'react'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
 import { withEmotionCache, ThemeContext } from './context'
@@ -71,65 +72,63 @@ function merge(
 
 type Props = {
   children: ({
-    css: (...args: Array<any>) => string,
+    css: (...args: any) => string,
     cx: (...args: Array<ClassNameArg>) => string,
     theme: Object
   }) => React.Node
 }
 
-export const ClassNames = withEmotionCache<Props>((props, context) => {
-  return (
-    <ThemeContext.Consumer>
-      {theme => {
-        let rules = ''
-        let serializedHashes = ''
-        let hasRendered = false
+export const ClassNames: React.AbstractComponent<Props> = withEmotionCache(
+  (props, cache) => {
+    let rules = ''
+    let serializedHashes = ''
+    let hasRendered = false
 
-        let css = (...args: Array<any>) => {
-          if (hasRendered && process.env.NODE_ENV !== 'production') {
-            throw new Error('css can only be used during render')
-          }
-          let serialized = serializeStyles(args, context.registered)
-          if (isBrowser) {
-            insertStyles(context, serialized, false)
-          } else {
-            let res = insertStyles(context, serialized, false)
-            if (res !== undefined) {
-              rules += res
-            }
-          }
-          if (!isBrowser) {
-            serializedHashes += ` ${serialized.name}`
-          }
-          return `${context.key}-${serialized.name}`
-        }
-        let cx = (...args: Array<ClassNameArg>) => {
-          if (hasRendered && process.env.NODE_ENV !== 'production') {
-            throw new Error('cx can only be used during render')
-          }
-          return merge(context.registered, css, classnames(args))
-        }
-        let content = { css, cx, theme }
-        let ele = props.children(content)
-        hasRendered = true
-        if (!isBrowser && rules.length !== 0) {
-          return (
-            <React.Fragment>
-              <style
-                {...{
-                  [`data-emotion-${context.key}`]: serializedHashes.substring(
-                    1
-                  ),
-                  dangerouslySetInnerHTML: { __html: rules },
-                  nonce: context.sheet.nonce
-                }}
-              />
-              {ele}
-            </React.Fragment>
-          )
+    let css = (...args: Array<any>) => {
+      if (hasRendered && process.env.NODE_ENV !== 'production') {
+        throw new Error('css can only be used during render')
+      }
+      let serialized = serializeStyles(args, cache.registered)
+      if (isBrowser) {
+        insertStyles(cache, serialized, false)
+      } else {
+        let res = insertStyles(cache, serialized, false)
+        if (res !== undefined) {
+          rules += res
         }
-        return ele
-      }}
-    </ThemeContext.Consumer>
-  )
-})
+      }
+      if (!isBrowser) {
+        serializedHashes += ` ${serialized.name}`
+      }
+      return `${cache.key}-${serialized.name}`
+    }
+    let cx = (...args: Array<ClassNameArg>) => {
+      if (hasRendered && process.env.NODE_ENV !== 'production') {
+        throw new Error('cx can only be used during render')
+      }
+      return merge(cache.registered, css, classnames(args))
+    }
+    let content = {
+      css,
+      cx,
+      theme: useContext(ThemeContext)
+    }
+    let ele = props.children(content)
+    hasRendered = true
+    if (!isBrowser && rules.length !== 0) {
+      return (
+        <React.Fragment>
+          <style
+            {...{
+              [`data-emotion-${cache.key}`]: serializedHashes.substring(1),
+              dangerouslySetInnerHTML: { __html: rules },
+              nonce: cache.sheet.nonce
+            }}
+          />
+          {ele}
+        </React.Fragment>
+      )
+    }
+    return ele
+  }
+)
diff --git a/packages/core/src/context.js b/packages/core/src/context.js
index 868cb2f1e..2d4352a51 100644
--- a/packages/core/src/context.js
+++ b/packages/core/src/context.js
@@ -1,6 +1,7 @@
 // @flow
 import { type EmotionCache } from '@emotion/utils'
 import * as React from 'react'
+import { useContext, forwardRef } from 'react'
 import createCache from '@emotion/cache'
 import { isBrowser } from './utils'
 
@@ -17,60 +18,40 @@ let EmotionCacheContext: React.Context<EmotionCache | null> = React.createContex
 export let ThemeContext = React.createContext<Object>({})
 export let CacheProvider = EmotionCacheContext.Provider
 
-let withEmotionCache = function withEmotionCache<Props>(
-  func: (props: Props, cache: EmotionCache, ref: React.Ref<*>) => React.Node
-): React.StatelessFunctionalComponent<Props> {
-  let render = (props: Props, ref: React.Ref<*>) => {
-    return (
-      <EmotionCacheContext.Consumer>
-        {(
-          // $FlowFixMe we know it won't be null
-          cache: EmotionCache
-        ) => {
-          return func(props, cache, ref)
-        }}
-      </EmotionCacheContext.Consumer>
-    )
-  }
+let withEmotionCache = function withEmotionCache<Props, Ref: React.Ref<*>>(
+  func: (props: Props, cache: EmotionCache, ref: Ref) => React.Node
+): React.AbstractComponent<Props> {
   // $FlowFixMe
-  return React.forwardRef(render)
+  return forwardRef((props: Props, ref: Ref) => {
+    // the cache will never be null in the browser
+    let cache = ((useContext(EmotionCacheContext): any): EmotionCache)
+
+    return func(props, cache, ref)
+  })
 }
 
 if (!isBrowser) {
-  class BasicProvider extends React.Component<
-    { children: EmotionCache => React.Node },
-    { value: EmotionCache }
-  > {
-    state = { value: createCache() }
-    render() {
-      return (
-        <EmotionCacheContext.Provider {...this.state}>
-          {this.props.children(this.state.value)}
-        </EmotionCacheContext.Provider>
-      )
-    }
-  }
-
   withEmotionCache = function withEmotionCache<Props>(
     func: (props: Props, cache: EmotionCache) => React.Node
   ): React.StatelessFunctionalComponent<Props> {
-    return (props: Props) => (
-      <EmotionCacheContext.Consumer>
-        {context => {
-          if (context === null) {
-            return (
-              <BasicProvider>
-                {newContext => {
-                  return func(props, newContext)
-                }}
-              </BasicProvider>
-            )
-          } else {
-            return func(props, context)
-          }
-        }}
-      </EmotionCacheContext.Consumer>
-    )
+    return (props: Props) => {
+      let cache = useContext(EmotionCacheContext)
+      if (cache === null) {
+        // yes, we're potentially creating this on every render
+        // it doesn't actually matter though since it's only on the server
+        // so there will only every be a single render
+        // that could change in the future because of suspense and etc. but for now,
+        // this works and i don't want to optimise for a future thing that we aren't sure about
+        cache = createCache()
+        return (
+          <EmotionCacheContext.Provider value={cache}>
+            {func(props, cache)}
+          </EmotionCacheContext.Provider>
+        )
+      } else {
+        return func(props, cache)
+      }
+    }
   }
 }
 
diff --git a/packages/core/src/global.js b/packages/core/src/global.js
index 78664b940..06c77b70e 100644
--- a/packages/core/src/global.js
+++ b/packages/core/src/global.js
@@ -1,11 +1,7 @@
 // @flow
 import * as React from 'react'
 import { withEmotionCache, ThemeContext } from './context'
-import {
-  type EmotionCache,
-  type SerializedStyles,
-  insertStyles
-} from '@emotion/utils'
+import { insertStyles } from '@emotion/utils'
 import { isBrowser } from './utils'
 
 import { StyleSheet } from '@emotion/sheet'
@@ -19,13 +15,16 @@ type GlobalProps = {
 
 let warnedAboutCssPropForGlobal = false
 
-export let Global: React.StatelessFunctionalComponent<
+// maintain place over rerenders.
+// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
+// initial client-side render from SSR, use place of hydrating tag
+
+export let Global: React.AbstractComponent<
   GlobalProps
 > = /* #__PURE__ */ withEmotionCache((props: GlobalProps, cache) => {
   if (
     process.env.NODE_ENV !== 'production' &&
-    !warnedAboutCssPropForGlobal &&
-    // check for className as well since the user is
+    !warnedAboutCssPropForGlobal && // check for className as well since the user is
     // probably using the custom createElement which
     // means it will be turned into a className prop
     // $FlowFixMe I don't really want to add it to the type since it shouldn't be used
@@ -38,111 +37,96 @@ export let Global: React.StatelessFunctionalComponent<
   }
   let styles = props.styles
 
-  if (typeof styles === 'function') {
-    return (
-      <ThemeContext.Consumer>
-        {theme => {
-          let serialized = serializeStyles([styles(theme)])
-
-          return <InnerGlobal serialized={serialized} cache={cache} />
-        }}
-      </ThemeContext.Consumer>
-    )
-  }
-  let serialized = serializeStyles([styles])
-
-  return <InnerGlobal serialized={serialized} cache={cache} />
-})
+  let serialized = serializeStyles([
+    typeof styles === 'function'
+      ? styles(React.useContext(ThemeContext))
+      : styles
+  ])
+
+  if (!isBrowser) {
+    let serializedNames = serialized.name
+    let serializedStyles = serialized.styles
+    let next = serialized.next
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name
+      serializedStyles += next.styles
+      next = next.next
+    }
 
-type InnerGlobalProps = {
-  serialized: SerializedStyles,
-  cache: EmotionCache
-}
+    let shouldCache = cache.compat === true
 
-// maintain place over rerenders.
-// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
-// initial client-side render from SSR, use place of hydrating tag
-
-class InnerGlobal extends React.Component<InnerGlobalProps> {
-  sheet: StyleSheet
-  componentDidMount() {
-    this.sheet = new StyleSheet({
-      key: `${this.props.cache.key}-global`,
-      nonce: this.props.cache.sheet.nonce,
-      container: this.props.cache.sheet.container
-    })
-    // $FlowFixMe
-    let node: HTMLStyleElement | null = document.querySelector(
-      `style[data-emotion-${this.props.cache.key}="${
-        this.props.serialized.name
-      }"]`
+    let rules = cache.insert(
+      ``,
+      { name: serializedNames, styles: serializedStyles },
+      cache.sheet,
+      shouldCache
     )
 
-    if (node !== null) {
-      this.sheet.tags.push(node)
-    }
-    if (this.props.cache.sheet.tags.length) {
-      this.sheet.before = this.props.cache.sheet.tags[0]
-    }
-    this.insertStyles()
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.serialized.name !== this.props.serialized.name) {
-      this.insertStyles()
-    }
-  }
-  insertStyles() {
-    if (this.props.serialized.next !== undefined) {
-      // insert keyframes
-      insertStyles(this.props.cache, this.props.serialized.next, true)
+    if (shouldCache) {
+      return null
     }
-    if (this.sheet.tags.length) {
-      // if this doesn't exist then it will be null so the style element will be appended
-      let element = this.sheet.tags[this.sheet.tags.length - 1]
-        .nextElementSibling
-      this.sheet.before = ((element: any): Element | null)
-      this.sheet.flush()
-    }
-    this.props.cache.insert(``, this.props.serialized, this.sheet, false)
-  }
 
-  componentWillUnmount() {
-    this.sheet.flush()
+    return (
+      <style
+        {...{
+          [`data-emotion-${cache.key}`]: serializedNames,
+          dangerouslySetInnerHTML: { __html: rules },
+          nonce: cache.sheet.nonce
+        }}
+      />
+    )
   }
-  render() {
-    if (!isBrowser) {
-      let { serialized } = this.props
-
-      let serializedNames = serialized.name
-      let serializedStyles = serialized.styles
-      let next = serialized.next
-      while (next !== undefined) {
-        serializedNames += ' ' + next.name
-        serializedStyles += next.styles
-        next = next.next
-      }
-
-      let shouldCache = this.props.cache.compat === true
 
-      let rules = this.props.cache.insert(
-        ``,
-        { name: serializedNames, styles: serializedStyles },
-        this.sheet,
-        shouldCache
+  // yes, i know these hooks are used conditionally
+  // but it is based on a constant that will never change at runtime
+  // it's effectively like having two implementations and switching them out
+  // so it's not actually breaking anything
+
+  let sheetRef = React.useRef()
+
+  React.useLayoutEffect(
+    () => {
+      let sheet = new StyleSheet({
+        key: `${cache.key}-global`,
+        nonce: cache.sheet.nonce,
+        container: cache.sheet.container
+      })
+      // $FlowFixMe
+      let node: HTMLStyleElement | null = document.querySelector(
+        `style[data-emotion-${cache.key}="${serialized.name}"]`
       )
 
-      if (!shouldCache) {
-        return (
-          <style
-            {...{
-              [`data-emotion-${this.props.cache.key}`]: serializedNames,
-              dangerouslySetInnerHTML: { __html: rules },
-              nonce: this.props.cache.sheet.nonce
-            }}
-          />
-        )
+      if (node !== null) {
+        sheet.tags.push(node)
       }
-    }
-    return null
-  }
-}
+      if (cache.sheet.tags.length) {
+        sheet.before = cache.sheet.tags[0]
+      }
+      sheetRef.current = sheet
+      return () => {
+        sheet.flush()
+      }
+    },
+    [cache]
+  )
+
+  React.useLayoutEffect(
+    () => {
+      if (serialized.next !== undefined) {
+        // insert keyframes
+        insertStyles(cache, serialized.next, true)
+      }
+      let sheet: StyleSheet = ((sheetRef.current: any): StyleSheet)
+      if (sheet.tags.length) {
+        // if this doesn't exist then it will be null so the style element will be appended
+        let element = sheet.tags[sheet.tags.length - 1].nextElementSibling
+        sheet.before = ((element: any): Element | null)
+        sheet.flush()
+      }
+      cache.insert(``, serialized, sheet, false)
+    },
+    [cache, serialized.name]
+  )
+
+  return null
+})
diff --git a/packages/core/src/jsx.js b/packages/core/src/jsx.js
index 8a014f2c6..992226b29 100644
--- a/packages/core/src/jsx.js
+++ b/packages/core/src/jsx.js
@@ -16,8 +16,12 @@ let labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'
 
 let hasOwnProperty = Object.prototype.hasOwnProperty
 
-let render = (cache, props, theme: null | Object, ref) => {
-  let cssProp = theme === null ? props.css : props.css(theme)
+let Emotion = withEmotionCache((props, cache, ref) => {
+  let cssProp = props.css
+
+  if (typeof cssProp === 'function') {
+    cssProp = cssProp(React.useContext(ThemeContext))
+  }
 
   // so that using `css` from `emotion` and passing the result to the css prop works
   // not passing the registered cache to serializeStyles because it would
@@ -93,18 +97,6 @@ let render = (cache, props, theme: null | Object, ref) => {
     )
   }
   return ele
-}
-
-let Emotion = /* #__PURE__ */ withEmotionCache((props, cache, ref) => {
-  // use Context.read for the theme when it's stable
-  if (typeof props.css === 'function') {
-    return (
-      <ThemeContext.Consumer>
-        {theme => render(cache, props, theme, ref)}
-      </ThemeContext.Consumer>
-    )
-  }
-  return render(cache, props, null, ref)
 })
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/core/types/tests.tsx b/packages/core/types/tests.tsx
index fc9a6a565..b0107b84a 100644
--- a/packages/core/types/tests.tsx
+++ b/packages/core/types/tests.tsx
@@ -19,11 +19,11 @@ interface TestTheme0 {
 
 declare const getRandomColor: () => string
 
-const ComponentWithCache = withEmotionCache((_props: {}, context) => {
+const ComponentWithCache = withEmotionCache((_props: {}, cache) => {
   return (
     <div
       onClick={() =>
-        context.sheet.insert(`div { backgroundColor: ${getRandomColor()} }`)
+        cache.sheet.insert(`div { backgroundColor: ${getRandomColor()} }`)
       }
     />
   )
diff --git a/packages/create-emotion/test/inline.test.js b/packages/create-emotion/test/inline.test.js
index a24fb0e8c..a85bda807 100644
--- a/packages/create-emotion/test/inline.test.js
+++ b/packages/create-emotion/test/inline.test.js
@@ -2,8 +2,6 @@
  * @jest-environment node
  * @flow
  */
-import React from 'react'
-import { renderToString } from 'react-dom/server'
 import {
   getComponents,
   getInjectedRules,
@@ -13,17 +11,24 @@ import {
 } from '../../emotion-server/test/util'
 import { JSDOM } from 'jsdom'
 
+let React
+let renderToString
 let emotion
 let emotionServer
 let reactEmotion
 
+const resetAllModules = () => {
+  jest.resetModules()
+  React = require('react')
+  renderToString = require('react-dom/server').renderToString
+  emotion = require('./emotion-instance')
+  emotionServer = require('./emotion-instance')
+  reactEmotion = require('./emotion-instance')
+}
+
 describe('renderStylesToString', () => {
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
-  })
+  beforeEach(resetAllModules)
+
   test('renders styles with ids', () => {
     const { Page1, Page2 } = getComponents(emotion, reactEmotion)
     expect(
@@ -43,16 +48,13 @@ describe('renderStylesToString', () => {
   })
 })
 describe('hydration', () => {
+  beforeEach(resetAllModules)
+
   afterAll(() => {
     global.document = undefined
     global.window = undefined
   })
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
-  })
+
   test('only inserts rules that are not in the critical css', () => {
     const { Page1 } = getComponents(emotion, reactEmotion)
     const html = emotionServer.renderStylesToString(renderToString(<Page1 />))
@@ -61,10 +63,8 @@ describe('hydration', () => {
     global.document = window.document
     global.window = window
     setHtml(html, document)
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
+
+    resetAllModules()
 
     expect(emotion.cache.registered).toEqual({})
 
diff --git a/packages/create-emotion/test/stream.test.js b/packages/create-emotion/test/stream.test.js
index 6d18523cb..27935abc0 100644
--- a/packages/create-emotion/test/stream.test.js
+++ b/packages/create-emotion/test/stream.test.js
@@ -2,42 +2,41 @@
  * @jest-environment node
  * @flow
  */
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import {
-  getComponents,
-  getInjectedRules,
-  createBigComponent,
-  getCssFromChunks,
-  setHtml,
-  renderToStringWithStream
-} from '../../emotion-server/test/util'
 import { JSDOM } from 'jsdom'
 
+let React
+let renderToString
 let emotion
 let emotionServer
 let reactEmotion
+let util
+
+const resetAllModules = () => {
+  jest.resetModules()
+  React = require('react')
+  renderToString = require('react-dom/server').renderToString
+  emotion = require('./emotion-instance')
+  emotionServer = require('./emotion-instance')
+  reactEmotion = require('./emotion-instance')
+  util = require('../../emotion-server/test/util')
+}
 
 describe('renderStylesToNodeStream', () => {
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
-  })
+  beforeEach(resetAllModules)
+
   test('renders styles with ids', async () => {
-    const { Page1, Page2 } = getComponents(emotion, reactEmotion)
+    const { Page1, Page2 } = util.getComponents(emotion, reactEmotion)
     expect(
-      await renderToStringWithStream(<Page1 />, emotionServer)
+      await util.renderToStringWithStream(<Page1 />, emotionServer)
     ).toMatchSnapshot()
     expect(
-      await renderToStringWithStream(<Page2 />, emotionServer)
+      await util.renderToStringWithStream(<Page2 />, emotionServer)
     ).toMatchSnapshot()
   })
   test('renders large recursive component', async () => {
-    const BigComponent = createBigComponent(emotion)
+    const BigComponent = util.createBigComponent(emotion)
     expect(
-      await renderToStringWithStream(
+      await util.renderToStringWithStream(
         <BigComponent count={200} />,
         emotionServer
       )
@@ -45,33 +44,29 @@ describe('renderStylesToNodeStream', () => {
   })
 })
 describe('hydration', () => {
+  beforeEach(resetAllModules)
+
   afterAll(() => {
     global.document = undefined
     global.window = undefined
   })
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
-  })
+
   test('only inserts rules that are not in the critical css', async () => {
-    const { Page1 } = getComponents(emotion, reactEmotion)
-    const html = await renderToStringWithStream(<Page1 />, emotionServer)
+    const { Page1 } = util.getComponents(emotion, reactEmotion)
+    const html = await util.renderToStringWithStream(<Page1 />, emotionServer)
     expect(html).toMatchSnapshot()
     const { window } = new JSDOM(html)
     global.document = window.document
     global.window = window
-    setHtml(html, document)
-    jest.resetModules()
-    emotion = require('./emotion-instance')
-    emotionServer = require('./emotion-instance')
-    reactEmotion = require('./emotion-instance')
+    util.setHtml(html, document)
+
+    resetAllModules()
+
     expect(emotion.cache.registered).toEqual({})
 
-    const { Page1: NewPage1 } = getComponents(emotion, reactEmotion)
+    const { Page1: NewPage1 } = util.getComponents(emotion, reactEmotion)
     renderToString(<NewPage1 />)
-    expect(getInjectedRules()).toMatchSnapshot()
-    expect(getCssFromChunks(emotion, document)).toMatchSnapshot()
+    expect(util.getInjectedRules()).toMatchSnapshot()
+    expect(util.getCssFromChunks(emotion, document)).toMatchSnapshot()
   })
 })
diff --git a/packages/emotion-server/test/inline.test.js b/packages/emotion-server/test/inline.test.js
index 83fa287f6..00a43195c 100644
--- a/packages/emotion-server/test/inline.test.js
+++ b/packages/emotion-server/test/inline.test.js
@@ -2,30 +2,30 @@
  * @jest-environment node
  * @flow
  */
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import {
-  getComponents,
-  getInjectedRules,
-  createBigComponent,
-  getCssFromChunks,
-  setHtml
-} from './util'
 import { JSDOM } from 'jsdom'
 
+let React
+let renderToString
 let emotion
 let emotionServer
 let reactEmotion
+let util
+
+const resetAllModules = () => {
+  jest.resetModules()
+  React = require('react')
+  renderToString = require('react-dom/server').renderToString
+  emotion = require('emotion')
+  emotionServer = require('emotion-server')
+  reactEmotion = require('@emotion/styled')
+  util = require('./util')
+}
 
 describe('renderStylesToString', () => {
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
-  })
+  beforeEach(resetAllModules)
+
   test('renders styles with ids', () => {
-    const { Page1, Page2 } = getComponents(emotion, reactEmotion)
+    const { Page1, Page2 } = util.getComponents(emotion, reactEmotion)
     expect(
       emotionServer.renderStylesToString(renderToString(<Page1 />))
     ).toMatchSnapshot()
@@ -45,7 +45,7 @@ describe('renderStylesToString', () => {
     expect(output).toMatchSnapshot()
   })
   test('renders large recursive component', () => {
-    const BigComponent = createBigComponent(emotion)
+    const BigComponent = util.createBigComponent(emotion)
     expect(
       emotionServer.renderStylesToString(
         renderToString(<BigComponent count={200} />)
@@ -54,37 +54,31 @@ describe('renderStylesToString', () => {
   })
 })
 describe('hydration', () => {
+  beforeEach(resetAllModules)
+
   afterAll(() => {
     global.document = undefined
     global.window = undefined
   })
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
-  })
+
   test('only inserts rules that are not in the critical css', () => {
-    const { Page1 } = getComponents(emotion, reactEmotion)
+    const { Page1 } = util.getComponents(emotion, reactEmotion)
     const html = emotionServer.renderStylesToString(renderToString(<Page1 />))
     expect(html).toMatchSnapshot()
 
     const { window } = new JSDOM(html)
     global.document = window.document
     global.window = window
-    setHtml(html, document)
+    util.setHtml(html, document)
 
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
+    resetAllModules()
 
     expect(emotion.cache.registered).toEqual({})
 
-    const { Page1: NewPage1 } = getComponents(emotion, reactEmotion)
+    const { Page1: NewPage1 } = util.getComponents(emotion, reactEmotion)
 
     renderToString(<NewPage1 />)
-    expect(getInjectedRules()).toMatchSnapshot()
-    expect(getCssFromChunks(emotion, document)).toMatchSnapshot()
+    expect(util.getInjectedRules()).toMatchSnapshot()
+    expect(util.getCssFromChunks(emotion, document)).toMatchSnapshot()
   })
 })
diff --git a/packages/emotion-server/test/stream.test.js b/packages/emotion-server/test/stream.test.js
index 539a8bc00..f8733c679 100644
--- a/packages/emotion-server/test/stream.test.js
+++ b/packages/emotion-server/test/stream.test.js
@@ -2,42 +2,41 @@
  * @jest-environment node
  * @flow
  */
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import {
-  getComponents,
-  getInjectedRules,
-  createBigComponent,
-  getCssFromChunks,
-  setHtml,
-  renderToStringWithStream
-} from './util'
 import { JSDOM } from 'jsdom'
 
+let React
+let renderToString
 let emotion
 let emotionServer
 let reactEmotion
+let util
+
+const resetAllModules = () => {
+  jest.resetModules()
+  React = require('react')
+  renderToString = require('react-dom/server').renderToString
+  emotion = require('emotion')
+  emotionServer = require('emotion-server')
+  reactEmotion = require('@emotion/styled')
+  util = require('./util')
+}
 
 describe('renderStylesToNodeStream', () => {
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
-  })
+  beforeEach(resetAllModules)
+
   test('renders styles with ids', async () => {
-    const { Page1, Page2 } = getComponents(emotion, reactEmotion)
+    const { Page1, Page2 } = util.getComponents(emotion, reactEmotion)
     expect(
-      await renderToStringWithStream(<Page1 />, emotionServer)
+      await util.renderToStringWithStream(<Page1 />, emotionServer)
     ).toMatchSnapshot()
     expect(
-      await renderToStringWithStream(<Page2 />, emotionServer)
+      await util.renderToStringWithStream(<Page2 />, emotionServer)
     ).toMatchSnapshot()
   })
   test('renders large recursive component', async () => {
-    const BigComponent = createBigComponent(emotion)
+    const BigComponent = util.createBigComponent(emotion)
     expect(
-      await renderToStringWithStream(
+      await util.renderToStringWithStream(
         <BigComponent count={200} />,
         emotionServer
       )
@@ -45,33 +44,29 @@ describe('renderStylesToNodeStream', () => {
   })
 })
 describe('hydration', () => {
+  beforeEach(resetAllModules)
+
   afterAll(() => {
     global.document = undefined
     global.window = undefined
   })
-  beforeEach(() => {
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
-  })
+
   test('only inserts rules that are not in the critical css', async () => {
-    const { Page1 } = getComponents(emotion, reactEmotion)
-    const html = await renderToStringWithStream(<Page1 />, emotionServer)
+    const { Page1 } = util.getComponents(emotion, reactEmotion)
+    const html = await util.renderToStringWithStream(<Page1 />, emotionServer)
     expect(html).toMatchSnapshot()
     const { window } = new JSDOM(html)
     global.document = window.document
     global.window = window
-    setHtml(html, document)
-    jest.resetModules()
-    emotion = require('emotion')
-    emotionServer = require('emotion-server')
-    reactEmotion = require('@emotion/styled')
+    util.setHtml(html, document)
+
+    resetAllModules()
+
     expect(emotion.cache.registered).toEqual({})
 
-    const { Page1: NewPage1 } = getComponents(emotion, reactEmotion)
+    const { Page1: NewPage1 } = util.getComponents(emotion, reactEmotion)
     renderToString(<NewPage1 />)
-    expect(getInjectedRules()).toMatchSnapshot()
-    expect(getCssFromChunks(emotion, document)).toMatchSnapshot()
+    expect(util.getInjectedRules()).toMatchSnapshot()
+    expect(util.getCssFromChunks(emotion, document)).toMatchSnapshot()
   })
 })
diff --git a/packages/emotion-theming/README.md b/packages/emotion-theming/README.md
index 37226d875..5109a4d85 100644
--- a/packages/emotion-theming/README.md
+++ b/packages/emotion-theming/README.md
@@ -167,14 +167,9 @@ const theme = {
   }
 }
 
-function SomeText (props) {
+function SomeText(props) {
   const theme = useTheme()
-  return (
-    <div
-      css={{ color: theme.colors.primary }}
-      {...props}
-    />
-  )
+  return <div css={{ color: theme.colors.primary }} {...props} />
 }
 
 render(
diff --git a/packages/emotion-theming/package.json b/packages/emotion-theming/package.json
index 6ffabb433..c40d4246e 100644
--- a/packages/emotion-theming/package.json
+++ b/packages/emotion-theming/package.json
@@ -34,9 +34,9 @@
   "devDependencies": {
     "@emotion/core": "^11.0.0-next.1",
     "@emotion/styled": "^11.0.0-next.1",
-    "@types/react": "^16.8.20",
+    "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.5.5",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "react": ">=16.8.0"
   },
   "umd:main": "dist/emotion-theming.umd.min.js",
   "browser": {
diff --git a/packages/emotion-theming/src/theme-provider.js b/packages/emotion-theming/src/theme-provider.js
index 09b243feb..bf523a25f 100644
--- a/packages/emotion-theming/src/theme-provider.js
+++ b/packages/emotion-theming/src/theme-provider.js
@@ -42,19 +42,15 @@ type Props = {
 }
 
 let ThemeProvider = (props: Props) => {
+  let theme = React.useContext(ThemeContext)
+
+  if (props.theme !== theme) {
+    theme = createCacheWithTheme(theme)(props.theme)
+  }
   return (
-    <ThemeContext.Consumer>
-      {theme => {
-        if (props.theme !== theme) {
-          theme = createCacheWithTheme(theme)(props.theme)
-        }
-        return (
-          <ThemeContext.Provider value={theme}>
-            {props.children}
-          </ThemeContext.Provider>
-        )
-      }}
-    </ThemeContext.Consumer>
+    <ThemeContext.Provider value={theme}>
+      {props.children}
+    </ThemeContext.Provider>
   )
 }
 
diff --git a/packages/emotion-theming/src/with-theme.js b/packages/emotion-theming/src/with-theme.js
index d09d37f7e..5520b4934 100644
--- a/packages/emotion-theming/src/with-theme.js
+++ b/packages/emotion-theming/src/with-theme.js
@@ -6,19 +6,16 @@ import { ThemeContext } from '@emotion/core'
 type Props = { theme: Object }
 
 // should we change this to be forwardRef/withCSSContext style so it doesn't merge with props?
+// should we remove this altogether and tell people to useContext
 
 export default function withTheme<Config: {}>(
   Component: React.AbstractComponent<Config>
 ): React.AbstractComponent<$Diff<Config, Props>> {
   const componentName = Component.displayName || Component.name || 'Component'
   let render = (props, ref) => {
-    return (
-      <ThemeContext.Consumer>
-        {theme => {
-          return <Component theme={theme} ref={ref} {...props} />
-        }}
-      </ThemeContext.Consumer>
-    )
+    let theme = React.useContext(ThemeContext)
+
+    return <Component theme={theme} ref={ref} {...props} />
   }
   // $FlowFixMe
   let WithTheme = React.forwardRef(render)
diff --git a/packages/eslint-plugin-emotion/docs/rules/syntax-preference.md b/packages/eslint-plugin-emotion/docs/rules/syntax-preference.md
index 47989d981..3c112ead8 100644
--- a/packages/eslint-plugin-emotion/docs/rules/syntax-preference.md
+++ b/packages/eslint-plugin-emotion/docs/rules/syntax-preference.md
@@ -2,12 +2,11 @@
 
 [Styled](https://emotion.sh/docs/styled) accepts string styles or object styles.
 
-
 ## Rule Details
 
 This rule aims to choose between syntaxes.
 
-Examples of **incorrect** code for this rule, when ```emotion/syntax-preference: [2, "string"]```:
+Examples of **incorrect** code for this rule, when `emotion/syntax-preference: [2, "string"]`:
 
 ```js
 const H1 = styled.h1({
@@ -21,7 +20,7 @@ const H1 = styled('h1')({
 // --> Styles should be written using strings.
 ```
 
-Examples of **incorrect** code for this rule, when ```emotion/syntax-preference: [2, "object"]```:
+Examples of **incorrect** code for this rule, when `emotion/syntax-preference: [2, "object"]`:
 
 ```js
 const H1 = styled.h1`
diff --git a/packages/jest-emotion/package.json b/packages/jest-emotion/package.json
index 8d2c0e5bf..514a57835 100644
--- a/packages/jest-emotion/package.json
+++ b/packages/jest-emotion/package.json
@@ -28,8 +28,8 @@
     "preact": "^8.2.9",
     "preact-render-to-json": "^3.6.6",
     "pretty-format": "^22.4.3",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
   },
   "author": "Kye Hohenberger",
   "homepage": "https://emotion.sh",
diff --git a/packages/native/package.json b/packages/native/package.json
index 51a035417..8e6fb1170 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -13,7 +13,7 @@
   ],
   "devDependencies": {
     "emotion-theming": "^11.0.0-next.1",
-    "react": "^16.5.2",
+    "react": "^16.11.0",
     "react-native": "^0.57.0"
   },
   "dependencies": {
diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
index 523e18a8f..312c97d51 100644
--- a/packages/primitives-core/package.json
+++ b/packages/primitives-core/package.json
@@ -17,11 +17,11 @@
   },
   "peerDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
   "homepage": "https://emotion.sh",
   "repository": "https://github.com/emotion-js/emotion/tree/master/packages/primitives-core",
diff --git a/packages/primitives-core/src/styled.js b/packages/primitives-core/src/styled.js
index 848934be2..f017d6fba 100644
--- a/packages/primitives-core/src/styled.js
+++ b/packages/primitives-core/src/styled.js
@@ -4,7 +4,7 @@ import { testAlwaysTrue, pickAssign, interleave } from './utils'
 import { ThemeContext } from '@emotion/core'
 import { createCss } from './css'
 
-let defaultPickTest = prop => prop !== 'theme' && prop !== 'innerRef'
+let defaultPickTest = prop => prop !== 'theme'
 
 type options = {
   getShouldForwardProp: (cmp: React.ElementType) => (prop: string) => boolean
@@ -31,33 +31,21 @@ export function createStyled(
       // do we really want to use the same infra as the web since it only really uses theming?
       // $FlowFixMe
       let Styled = React.forwardRef((props, ref) => {
-        return (
-          <ThemeContext.Consumer>
-            {theme => {
-              let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
-                theme: props.theme || theme
-              })
-              let stylesWithStyleProp = styles
-              if (props.style) {
-                stylesWithStyleProp = styles.concat(props.style)
-              }
-              const emotionStyles = css.apply(mergedProps, stylesWithStyleProp)
+        let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
+          theme: props.theme || React.useContext(ThemeContext)
+        })
+        let stylesWithStyleProp = styles
+        if (props.style) {
+          stylesWithStyleProp = styles.concat(props.style)
+        }
+        const emotionStyles = css.apply(mergedProps, stylesWithStyleProp)
 
-              if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-                console.error(
-                  'innerRef is no longer supported, please use ref instead'
-                )
-              }
-
-              return React.createElement(
-                component,
-                pickAssign(pickTest, {}, props, {
-                  ref: ref,
-                  style: emotionStyles
-                })
-              )
-            }}
-          </ThemeContext.Consumer>
+        return React.createElement(
+          component,
+          pickAssign(pickTest, {}, props, {
+            ref: ref,
+            style: emotionStyles
+          })
         )
       })
       // $FlowFixMe
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 966c27c8c..475f0f16f 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -16,14 +16,14 @@
     "babel-plugin-emotion": "^11.0.0-next.1"
   },
   "peerDependencies": {
-    "react": ">=16.3.0",
+    "react": ">=16.8.0",
     "react-primitives": "^0.7.0"
   },
   "devDependencies": {
     "emotion-theming": "^11.0.0-next.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
-    "react": "^16.5.2",
+    "react": "^16.11.0",
     "react-primitives": "^0.7.0"
   },
   "homepage": "https://emotion.sh",
diff --git a/packages/primitives/src/test-props.js b/packages/primitives/src/test-props.js
index 9a30d76ae..aa19f7f78 100644
--- a/packages/primitives/src/test-props.js
+++ b/packages/primitives/src/test-props.js
@@ -60,5 +60,5 @@ export function testPickPropsOnPrimitiveComponent(prop: string) {
 }
 
 export function testPickPropsOnOtherComponent(prop: string) {
-  return prop !== 'theme' && prop !== 'innerRef'
+  return prop !== 'theme'
 }
diff --git a/packages/styled-base/package.json b/packages/styled-base/package.json
index a114e7ce2..ab3385dab 100644
--- a/packages/styled-base/package.json
+++ b/packages/styled-base/package.json
@@ -22,13 +22,13 @@
   },
   "devDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "@types/react": "^16.8.20",
+    "@types/react": "^16.9.11",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
   "peerDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "react": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/styled-base/src/index.js b/packages/styled-base/src/index.js
index 568649278..9bd65eb37 100644
--- a/packages/styled-base/src/index.js
+++ b/packages/styled-base/src/index.js
@@ -79,103 +79,88 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
 
     // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class
     const Styled: PrivateStyledComponent<Props> = withEmotionCache(
-      (props, context, ref) => {
-        return (
-          <ThemeContext.Consumer>
-            {theme => {
-              const finalTag = (shouldUseAs && props.as) || baseTag
-
-              let className = ''
-              let classInterpolations = []
-              let mergedProps = props
-              if (props.theme == null) {
-                mergedProps = {}
-                for (let key in props) {
-                  mergedProps[key] = props[key]
-                }
-                mergedProps.theme = theme
-              }
-
-              if (typeof props.className === 'string') {
-                className = getRegisteredStyles(
-                  context.registered,
-                  classInterpolations,
-                  props.className
-                )
-              } else if (props.className != null) {
-                className = `${props.className} `
-              }
-
-              const serialized = serializeStyles(
-                styles.concat(classInterpolations),
-                context.registered,
-                mergedProps
-              )
-              const rules = insertStyles(
-                context,
-                serialized,
-                typeof finalTag === 'string'
-              )
-              className += `${context.key}-${serialized.name}`
-              if (targetClassName !== undefined) {
-                className += ` ${targetClassName}`
-              }
-
-              const finalShouldForwardProp =
-                shouldUseAs && shouldForwardProp === undefined
-                  ? getDefaultShouldForwardProp(finalTag)
-                  : defaultShouldForwardProp
-
-              let newProps = {}
-
-              for (let key in props) {
-                if (shouldUseAs && key === 'as') continue
-
-                if (
-                  // $FlowFixMe
-                  finalShouldForwardProp(key)
-                ) {
-                  newProps[key] = props[key]
-                }
-              }
-
-              newProps.className = className
-
-              newProps.ref = ref || props.innerRef
-              if (process.env.NODE_ENV !== 'production' && props.innerRef) {
-                console.error(
-                  '`innerRef` is deprecated and will be removed in a future major version of Emotion, please use the `ref` prop instead' +
-                    (identifierName === undefined
-                      ? ''
-                      : ` in the usage of \`${identifierName}\``)
-                )
-              }
-
-              const ele = React.createElement(finalTag, newProps)
-              if (!isBrowser && rules !== undefined) {
-                let serializedNames = serialized.name
-                let next = serialized.next
-                while (next !== undefined) {
-                  serializedNames += ' ' + next.name
-                  next = next.next
-                }
-                return (
-                  <React.Fragment>
-                    <style
-                      {...{
-                        [`data-emotion-${context.key}`]: serializedNames,
-                        dangerouslySetInnerHTML: { __html: rules },
-                        nonce: context.sheet.nonce
-                      }}
-                    />
-                    {ele}
-                  </React.Fragment>
-                )
-              }
-              return ele
-            }}
-          </ThemeContext.Consumer>
+      (props, cache, ref) => {
+        const finalTag = (shouldUseAs && props.as) || baseTag
+
+        let className = ''
+        let classInterpolations = []
+        let mergedProps = props
+        if (props.theme == null) {
+          mergedProps = {}
+          for (let key in props) {
+            mergedProps[key] = props[key]
+          }
+          mergedProps.theme = React.useContext(ThemeContext)
+        }
+
+        if (typeof props.className === 'string') {
+          className = getRegisteredStyles(
+            cache.registered,
+            classInterpolations,
+            props.className
+          )
+        } else if (props.className != null) {
+          className = `${props.className} `
+        }
+
+        const serialized = serializeStyles(
+          styles.concat(classInterpolations),
+          cache.registered,
+          mergedProps
         )
+        const rules = insertStyles(
+          cache,
+          serialized,
+          typeof finalTag === 'string'
+        )
+        className += `${cache.key}-${serialized.name}`
+        if (targetClassName !== undefined) {
+          className += ` ${targetClassName}`
+        }
+
+        const finalShouldForwardProp =
+          shouldUseAs && shouldForwardProp === undefined
+            ? getDefaultShouldForwardProp(finalTag)
+            : defaultShouldForwardProp
+
+        let newProps = {}
+
+        for (let key in props) {
+          if (shouldUseAs && key === 'as') continue
+
+          if (
+            // $FlowFixMe
+            finalShouldForwardProp(key)
+          ) {
+            newProps[key] = props[key]
+          }
+        }
+
+        newProps.className = className
+        newProps.ref = ref
+
+        const ele = React.createElement(finalTag, newProps)
+        if (!isBrowser && rules !== undefined) {
+          let serializedNames = serialized.name
+          let next = serialized.next
+          while (next !== undefined) {
+            serializedNames += ' ' + next.name
+            next = next.next
+          }
+          return (
+            <React.Fragment>
+              <style
+                {...{
+                  [`data-emotion-${cache.key}`]: serializedNames,
+                  dangerouslySetInnerHTML: { __html: rules },
+                  nonce: cache.sheet.nonce
+                }}
+              />
+              {ele}
+            </React.Fragment>
+          )
+        }
+        return ele
       }
     )
 
diff --git a/packages/styled-base/src/utils.js b/packages/styled-base/src/utils.js
index c06191fd0..b533e46b6 100644
--- a/packages/styled-base/src/utils.js
+++ b/packages/styled-base/src/utils.js
@@ -27,8 +27,7 @@ export type PrivateStyledComponent<Props> = StyledComponent<Props> & {
 }
 
 const testOmitPropsOnStringTag = isPropValid
-const testOmitPropsOnComponent = (key: string) =>
-  key !== 'theme' && key !== 'innerRef'
+const testOmitPropsOnComponent = (key: string) => key !== 'theme'
 
 export const getDefaultShouldForwardProp = (tag: ElementType) =>
   typeof tag === 'string' &&
diff --git a/packages/styled/__tests__/styled-dom.js b/packages/styled/__tests__/styled-dom.js
index 885b3fd61..cd5b54cb0 100644
--- a/packages/styled/__tests__/styled-dom.js
+++ b/packages/styled/__tests__/styled-dom.js
@@ -2,7 +2,6 @@
 import * as React from 'react'
 import styled from '@emotion/styled'
 import { render, cleanup } from '@testing-library/react'
-import { ignoreConsoleErrors } from 'test-utils'
 
 afterEach(cleanup)
 
@@ -24,84 +23,3 @@ test('ref', () => {
   )
   expect(node).toBe(document.getElementById('thing'))
 })
-
-test('innerRef', () => {
-  ignoreConsoleErrors(() => {
-    const H1 = styled.h1`
-      font-size: 12px;
-    `
-    let node
-
-    render(
-      <H1
-        innerRef={val => {
-          node = val
-        }}
-        id="thing"
-      >
-        hello world
-      </H1>
-    )
-    expect(node).toBe(document.getElementById('thing'))
-    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "\`innerRef\` is deprecated and will be removed in a future major version of Emotion, please use the \`ref\` prop instead",
-  ],
-]
-`)
-  })
-})
-
-test('innerRef and ref', () => {
-  ignoreConsoleErrors(() => {
-    const H1 = styled.h1`
-      font-size: 12px;
-    `
-    let innerRef = React.createRef()
-    let ref = React.createRef()
-
-    render(
-      <H1 innerRef={innerRef} ref={ref} id="thing">
-        hello world
-      </H1>
-    )
-    expect(ref.current).toBe(document.getElementById('thing'))
-    expect(innerRef.current).toBeNull()
-    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "\`innerRef\` is deprecated and will be removed in a future major version of Emotion, please use the \`ref\` prop instead",
-  ],
-]
-`)
-  })
-})
-
-test('innerRef warning with label', () => {
-  ignoreConsoleErrors(() => {
-    const H1 = styled('h1', { label: 'H1' })`
-      font-size: 12px;
-    `
-    let node
-
-    render(
-      <H1
-        innerRef={val => {
-          node = val
-        }}
-        id="thing"
-      >
-        hello world
-      </H1>
-    )
-    expect(node).toBe(document.getElementById('thing'))
-    expect((console.error: any).mock.calls).toMatchInlineSnapshot(`
-Array [
-  Array [
-    "\`innerRef\` is deprecated and will be removed in a future major version of Emotion, please use the \`ref\` prop instead in the usage of \`H1\`",
-  ],
-]
-`)
-  })
-})
diff --git a/packages/styled/package.json b/packages/styled/package.json
index 6aab544b1..564e87e96 100644
--- a/packages/styled/package.json
+++ b/packages/styled/package.json
@@ -17,11 +17,11 @@
   "devDependencies": {
     "@emotion/core": "^11.0.0-next.1",
     "dtslint": "^0.3.0",
-    "react": "^16.5.2"
+    "react": "^16.11.0"
   },
   "peerDependencies": {
     "@emotion/core": "^11.0.0-next.1",
-    "react": ">=16.3.0"
+    "react": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/playgrounds/cra/package.json b/playgrounds/cra/package.json
index 01c8e1127..4ba6007ae 100644
--- a/playgrounds/cra/package.json
+++ b/playgrounds/cra/package.json
@@ -3,8 +3,8 @@
   "version": "0.6.17",
   "private": true,
   "dependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-scripts": "1.1.5"
   },
   "scripts": {
@@ -14,4 +14,4 @@
     "eject": "react-scripts eject",
     "test:typescript": "exit 0"
   }
-}
\ No newline at end of file
+}
diff --git a/playgrounds/razzle/package.json b/playgrounds/razzle/package.json
index 2f9d9b45a..5b88a946f 100644
--- a/playgrounds/razzle/package.json
+++ b/playgrounds/razzle/package.json
@@ -14,8 +14,8 @@
     "express": "^4.16.3",
     "raf": "^3.4.0",
     "razzle": "^2.4.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-router-dom": "^4.2.2"
   }
-}
\ No newline at end of file
+}
diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json
index c1ed77ae2..56e52cac5 100644
--- a/scripts/benchmarks/package.json
+++ b/scripts/benchmarks/package.json
@@ -17,8 +17,8 @@
     "http-server": "^0.11.1",
     "parcel": "^1.10.3",
     "puppeteer": "^1.6.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-native-web": "0.9.6",
     "stats-analysis": "^2.0.0"
   },
diff --git a/site/package.json b/site/package.json
index 1d36ffb52..07403d208 100644
--- a/site/package.json
+++ b/site/package.json
@@ -32,8 +32,8 @@
     "graphql-type-json": "^0.2.4",
     "normalize.css": "^8.0.0",
     "open-color": "^1.5.1",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "react-helmet": "^5.2.0",
     "react-icons": "^2.2.7",
     "react-live": "1.10.0",
@@ -54,4 +54,4 @@
     "start:site": "gatsby develop",
     "test:typescript": "exit 0"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 3de8cd0d6..e2df9b917 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -977,7 +977,7 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -991,6 +991,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2":
+  version "7.7.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.0.tgz#9b309d493864d69e0b9ec093e1426535a76b4b94"
+  integrity sha512-xdf3hZAzoqL9q7ItTe/KyUGw214oXdHmq2XhW8ANRuo2KMX+s17RK+z4DsQiPkdOqCjep14eNTneRoiTs9T1AQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -1502,6 +1509,15 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^12.0.9"
 
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
 "@jimp/bmp@^0.6.4":
   version "0.6.4"
   resolved "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.6.4.tgz#0f4b94486e979d82c83e1e87cd00b756afb26e49"
@@ -1911,24 +1927,26 @@
   resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
-"@testing-library/dom@^5.5.4":
-  version "5.6.1"
-  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz#705a1cb4a039b877c1e69e916824038e837ab637"
-  integrity sha512-Y1T2bjtvQMewffn1CJ28kpgnuvPYKsBcZMagEH0ppfEMZPDc8AkkEnTk4smrGZKw0cblNB3lhM2FMnpfLExlHg==
+"@testing-library/dom@^6.3.0":
+  version "6.10.0"
+  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-6.10.0.tgz#c7e7d613faca159846379949db65abf8ab214999"
+  integrity sha512-8Tq4aRDeukB+6WE0rVXO1TlS38uu05CpbHgEa9SLR3JWuBajOVEPk9HgOfOFOqWqoo5nEIthXBgLobbofEhuUg==
   dependencies:
-    "@babel/runtime" "^7.5.5"
+    "@babel/runtime" "^7.6.2"
     "@sheerun/mutationobserver-shim" "^0.3.2"
+    "@types/testing-library__dom" "^6.0.0"
     aria-query "3.0.0"
-    pretty-format "^24.8.0"
-    wait-for-expect "^1.2.0"
+    pretty-format "^24.9.0"
+    wait-for-expect "^3.0.0"
 
-"@testing-library/react@^8.0.2":
-  version "8.0.7"
-  resolved "https://registry.npmjs.org/@testing-library/react/-/react-8.0.7.tgz#b5992c9156e926850a0e3a7c882ae1aed83b1c77"
-  integrity sha512-6XoeWSr3UCdxMswbkW0BmuXYw8a6w+stt+5gg4D4zAcljfhXETQ5o28bjJFwNab4OPg8gBNK8KIVot86L4Q8Vg==
+"@testing-library/react@^9.3.2":
+  version "9.3.2"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-9.3.2.tgz#418000daa980dafd2d9420cc733d661daece9aa0"
+  integrity sha512-J6ftWtm218tOLS175MF9eWCxGp+X+cUXCpkPIin8KAXWtyZbr9CbqJ8M8QNd6spZxJDAGlw+leLG4MJWLlqVgg==
   dependencies:
-    "@babel/runtime" "^7.5.4"
-    "@testing-library/dom" "^5.5.4"
+    "@babel/runtime" "^7.6.0"
+    "@testing-library/dom" "^6.3.0"
+    "@types/testing-library__react" "^9.1.0"
 
 "@types/babel__core@^7.1.0":
   version "7.1.2"
@@ -2101,7 +2119,14 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.12", "@types/react@^16.8.20", "@types/react@^16.8.6":
+"@types/react-dom@*":
+  version "16.9.3"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.3.tgz#4006ff0e13958af91313869077c04cb20d9b9d04"
+  integrity sha512-FUuZKXPr9qlzUT9lhuzrZgLjH63TvNn28Ch3MvKG4B+F52zQtO8DtE0Opbncy3xaucNZM2WIPfuNTgkbKx5Brg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^16.8.12", "@types/react@^16.8.6":
   version "16.8.24"
   resolved "https://registry.npmjs.org/@types/react/-/react-16.8.24.tgz#8d1ea1fcbfa214220da3d3c04e506f1077b0deac"
   integrity sha512-VpFHUoD37YNY2+lr/+c7qL/tZsIU/bKuskUF3tmGUArbxIcQdb5j3zvo4cuuzu2A6UaVmVn7sJ4PgWYNFEBGzg==
@@ -2109,6 +2134,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.11":
+  version "16.9.11"
+  resolved "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
+  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2126,6 +2159,21 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
+  version "6.10.0"
+  resolved "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.10.0.tgz#590d76e3875a7c536dc744eb530cbf51b6483404"
+  integrity sha512-mL/GMlyQxiZplbUuFNwA0vAI3k3uJNSf6slr5AVve9TXmfLfyefNT0uHHnxwdYuPMxYD5gI/+dgAvc/5opW9JQ==
+  dependencies:
+    pretty-format "^24.3.0"
+
+"@types/testing-library__react@^9.1.0":
+  version "9.1.2"
+  resolved "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351"
+  integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q==
+  dependencies:
+    "@types/react-dom" "*"
+    "@types/testing-library__dom" "*"
+
 "@types/tmp@^0.0.32":
   version "0.0.32"
   resolved "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.32.tgz#0d3cb31022f8427ea58c008af32b80da126ca4e3"
@@ -2153,11 +2201,23 @@
     "@types/unist" "*"
     "@types/vfile-message" "*"
 
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
+
 "@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
   version "12.0.12"
   resolved "https://registry.npmjs.org/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
   integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
 
+"@types/yargs@^13.0.0":
+  version "13.0.3"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
+  integrity sha512-K8/LfZq2duW33XW/tFwEAfnZlqIfVsoyRB3kfXdPXYhl0nfM8mmh7GS0jg7WrX2Dgq/0Ha/pR1PaR+BvmWwjiQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
@@ -18643,6 +18703,16 @@ pretty-format@^23.4.1, pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^24.3.0, pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
 pretty-format@^24.8.0:
   version "24.8.0"
   resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-24.8.0.tgz#8dae7044f58db7cb8be245383b565a963e3c27f2"
@@ -19278,15 +19348,15 @@ react-devtools-core@^3.4.2:
     shell-quote "^1.6.1"
     ws "^3.3.1"
 
-react-dom@16.8.1, "react-dom@^15 || ^16", react-dom@^16.5.2:
-  version "16.8.1"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
-  integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==
+react-dom@16.11.0, "react-dom@^15 || ^16", react-dom@^16.11.0:
+  version "16.11.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.11.0.tgz#7e7c4a5a85a569d565c2462f5d345da2dd849af5"
+  integrity sha512-nrRyIUE1e7j8PaXSPtyRKtz+2y9ubW/ghNgqKFHHAHaeP0fpF5uXR+sq8IMRHC+ZUxw7W9NyCDTBtwWxvkb0iA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
+    scheduler "^0.17.0"
 
 react-error-overlay@^2.0.0:
   version "2.0.2"
@@ -19567,7 +19637,7 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.3.2:
+react-test-renderer@16.8.6, react-test-renderer@^16.0.0-0:
   version "16.8.6"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
   integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
@@ -19590,15 +19660,14 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@16.8.1, "react@^15 || ^16", react@^16.5.2, react@^16.8.4:
-  version "16.8.1"
-  resolved "https://registry.npmjs.org/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
-  integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==
+react@16.11.0, "react@^15 || ^16", react@^16.11.0, react@^16.8.4:
+  version "16.11.0"
+  resolved "https://registry.npmjs.org/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
+  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.1"
 
 read-chunk@^1.0.1:
   version "1.0.1"
@@ -20758,7 +20827,7 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-scheduler@^0.13.1, scheduler@^0.13.2, scheduler@^0.13.6:
+scheduler@^0.13.2, scheduler@^0.13.6:
   version "0.13.6"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
   integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
@@ -20766,6 +20835,14 @@ scheduler@^0.13.1, scheduler@^0.13.2, scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -23519,10 +23596,10 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.2.0.tgz#fdab6a26e87d2039101db88bff3d8158e5c3e13f"
-  integrity sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==
+wait-for-expect@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.1.tgz#ec204a76b0038f17711e575720aaf28505ac7185"
+  integrity sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==
 
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"