Remove React.forwardRef

Author: Andarist

.changeset/twelve-gifts-do.md

@@ -0,0 +1,7 @@
+---
+'@emotion/primitives-core': major
+'@emotion/styled': major
+'@emotion/react': major
+---
+
+Refs are no longer internally forwarded using `React.forwardRef`.

packages/primitives-core/src/styled.ts

@@ -50,7 +50,7 @@ export function createStyled(
       }
 
       // do we really want to use the same infra as the web since it only really uses theming?
-      let Styled = React.forwardRef<unknown, StyledProps>((props, ref) => {
+      let Styled: React.FC<StyledProps> = props => {
         const finalTag =
           (shouldUseAs && (props.as as React.ElementType)) || component
 
@@ -78,12 +78,9 @@ export function createStyled(
           }
         }
         newProps.style = [css.apply(mergedProps, styles), props.style]
-        if (ref) {
-          newProps.ref = ref
-        }
 
         return React.createElement(finalTag, newProps)
-      })
+      }
 
       Styled.displayName = `emotion(${getDisplayName(component)})`
 

packages/react/src/context.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useContext, forwardRef } from 'react'
+import { useContext } from 'react'
 import createCache, { EmotionCache } from '@emotion/cache'
 import isDevelopment from '#is-development'
 import isBrowser from '#is-browser'
@@ -27,23 +27,14 @@ export let __unsafe_useEmotionCache = function useEmotionCache() {
   return useContext(EmotionCacheContext)
 }
 
-let withEmotionCache = function withEmotionCache<Props, RefType = any>(
-  func: (
-    props: React.PropsWithoutRef<Props>,
-    context: EmotionCache,
-    ref?: React.ForwardedRef<RefType>
-  ) => React.ReactNode
-):
-  | React.FC<React.PropsWithoutRef<Props> & React.RefAttributes<RefType>>
-  | React.ForwardRefExoticComponent<
-      React.PropsWithoutRef<Props> & React.RefAttributes<RefType>
-    > {
-  return forwardRef<RefType, Props>((props, ref) => {
+let withEmotionCache = function withEmotionCache<Props>(
+  func: (props: Props, context: EmotionCache) => React.ReactNode
+): React.FC<Props> {
+  return props => {
     // the cache will never be null in the browser
     let cache = useContext(EmotionCacheContext)!
-
-    return func(props, cache, ref)
-  })
+    return func(props, cache)
+  }
 }
 
 if (!isBrowser) {

packages/react/src/theming.tsx

@@ -85,19 +85,16 @@ export function withTheme<
   C extends React.ComponentType<React.ComponentProps<C>>
 >(
   Component: C
-): React.ForwardRefExoticComponent<
+): React.FC<
   DistributiveOmit<React.ComponentProps<C>, 'theme'> & { theme?: Theme }
->
-export function withTheme(
-  Component: React.ComponentType<any>
-): React.ForwardRefExoticComponent<any> {
+> {
   const componentName = Component.displayName || Component.name || 'Component'
 
-  let WithTheme = React.forwardRef(function render(props, ref) {
+  let WithTheme: React.FC<any> = function render(props) {
     let theme = React.useContext(ThemeContext)
 
-    return <Component theme={theme} ref={ref} {...props} />
-  })
+    return <Component theme={theme} {...props} />
+  }
 
   WithTheme.displayName = `WithTheme(${componentName})`