Back to Langfuse

React 19 API Changes

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

3.172.1797 B
Original Source

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):

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

Correct (ref as a regular prop):

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

Incorrect (useContext in React 19):

tsx
const value = useContext(MyContext)

Correct (use instead of useContext):

tsx
const value = use(MyContext)

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