Reusable [React](/courses/reactjs) components often need to accept standard [HTML](/courses/html) props, custom variants, children, callbacks, and sometimes refs without manually recreating all browser element types. [React](/courses/reactjs) provides utility types that make these APIs easier to build correctly. ### Example: Reusable Button You might start with: ```tsx type ButtonProps = { children: React.ReactNode; disabled?: boolean; onClick?: () => void; }; ``` But native buttons support many more props: ```text type name value aria-* data-* onFocus onBlur onKeyDown form ``` Manually rewriting all of them is unnecessary. ### Reuse Native Button Props ```tsx type ButtonProps = React.ComponentPropsWithoutRef<"button"> & { variant?: "primary" | "secondary"; }; function Button({ variant = "primary", className, ...props }: ButtonProps) { return ( ``` while also adding: ```tsx variant ``` ### ComponentPropsWithRef If the wrapper intentionally supports a ref in modern React: ```tsx type ButtonProps = React.ComponentPropsWithRef<"button"> & { variant?: "primary" | "secondary"; }; ``` In React 19: ```tsx function Button({ ref, variant = "primary", ...props }: ButtonProps) { return ( ); } return

{props.message}

; } ``` This is safer than making every prop optional: ```tsx type AlertProps = { type: string; message?: string; retry?: () => void; }; ``` because that allows invalid states. ### Extend Existing Component Props You can also derive props from another component: ```tsx type BaseButtonProps = React.ComponentProps; ``` This can be useful when one reusable component builds on another. ### Avoid any in Reusable Component APIs A reusable component may be used throughout an application or library. If its public API contains: ```tsx data: any onChange: (value: any) => void ``` [TypeScript](/courses/typescript) cannot protect consumers. Use proper domain types, unions, or generics instead. ### Do You Need React.FC? You may encounter: ```tsx const Button: React.FC = (props) => { // ... }; ``` This is valid, but it is not required. A simple typed [function](/javascript/functions-in-javascript) is often enough: ```tsx function Button(props: ButtonProps) { // ... } ``` The important part is the quality of the component's prop types, not whether `React.FC` is used. ### Practical Decision Guide ```text Normal component props? → type or interface Accept renderable children? → ReactNode Wrap native HTML element? → ComponentPropsWithoutRef Native wrapper also exposes ref? → ComponentPropsWithRef Only a few valid modes? → union types Different modes require different props? → discriminated union Same component supports many data models? → generics ``` ### Interview-Ready Answer Reusable React components should expose precise TypeScript APIs without unnecessarily recreating native [HTML](/courses/html) types. `ComponentPropsWithoutRef` can extend native element props, while `ComponentPropsWithRef` also includes ref support. `ReactNode` commonly types children, unions restrict valid variants, discriminated unions prevent invalid prop combinations, and generics keep reusable data-driven components type-safe.