video/.agents/skills/vercel-composition-patterns/rules/react19-no-forwardref.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
React 19 API Changes	MEDIUM	cleaner component definitions and context usage	react19, refs, context, hooks

React 19 API Changes

⚠️ React 19+ only. Skip this if you're on React 18 or earlier.

In React 19, ref is now a regular prop (no forwardRef wrapper needed), and use() replaces useContext().

Incorrect (forwardRef in React 19):

const ComposerInput = forwardRef<TextInput, Props>((props, ref) => {
  return <TextInput ref={ref} {...props} />
})

Correct (ref as a regular prop):

function ComposerInput({ ref, ...props }: Props & { ref?: React.Ref<TextInput> }) {
  return <TextInput ref={ref} {...props} />
}

Incorrect (useContext in React 19):

const value = useContext(MyContext)

Correct (use instead of useContext):

const value = use(MyContext)

use() can also be called conditionally, unlike useContext().