Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

View sourceReactArchitecture

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
title
React 19 API Changes
impact
MEDIUM
impactDescription
cleaner component definitions and context usage
tags
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):

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().