diff --git a/docs/basic/getting-started/forward-create-ref.md b/docs/basic/getting-started/forward-create-ref.md index 991d5089..fe0d9f7a 100644 --- a/docs/basic/getting-started/forward-create-ref.md +++ b/docs/basic/getting-started/forward-create-ref.md @@ -28,6 +28,30 @@ export const FancyButton = React.forwardRef((props, ref) => ( )); ``` +
+ + + Side note: the `ref` you get from `forwardRef` is mutable so you can assign to it if needed. + + + + This was done [on purpose](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/43265/). You can make it immutable if you have to - assign `React.Ref` if you want to ensure nobody reassigns it: + + ```tsx + type Props = { children: React.ReactNode; type: "submit" | "button" }; + export type Ref = HTMLButtonElement; + export const FancyButton = React.forwardRef( + (props: Props, ref: React.Ref) => ( // <-- here! + + ) + ); + ``` + +
+ + If you are grabbing the props of a component that forwards refs, use [`ComponentPropsWithRef`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a05cc538a42243c632f054e42eab483ebf1560ab/types/react/index.d.ts#L770). More info: https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315