Skip to content

Commit df22e81

Browse files
Remove invalid example without forwardRef (typescript-cheatsheets#640)
1 parent c1785bb commit df22e81

File tree

1 file changed

+1
-28
lines changed

1 file changed

+1
-28
lines changed

docs/advanced/patterns_by_usecase.md

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,7 @@ export function Button(props: ButtonProps) {
3535

3636
[_See this in the TS Playground_](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUI4wPQtwCuqyA5lowQ4A7fMAhC4AQTBgAFAEo4Ab0Zw4bOABUAnmCzkARAQgQDZOMHRCI8NKmA8hyAEYAbfTAhwYu-WQPOHDCeQgZwAD5wBqgcziDAMGGRBpSoWIkRnEIAJlgEwEJY2WQAdLIATADM5eXyqurslDAcUBIAPABCQSHevgC8RiYGAHxwqK7ZANYAVnBtLF3B4sP19RrWcFhQxFD1TS3tiz0+egOBS6GjMFgAHvDzR8uMAL7MDBqgYO4gWEIwyDAxEJGLdILALH8tgQ8PpHkIAArEMDoW7XHLobB4GAlADCJEghT+iIgyLaZHOITIoxUDDUqD0uGAyFcxLAAH4AFxjGBQAo8egMV4MUHQQjCUTiOBw2RgJGoLlw1moRQ0tS4cSoeBKMYMpkspEAGjgJRNqXgzzgfTgspJqAFag02S8qBI6QAFny4AB3BJunVYRnM1l7dIHOYUyVKE0lM0WljDAXPIA)
3737

38-
**Forwarding Refs**: As [the React docs themselves note](https://reactjs.org/docs/forwarding-refs.html), most usecases will not need to obtain a ref to the inner element. But for people making reusable component libraries, you will need to `forwardRef` the underlying element, and then you can use `ComponentPropsWithRef` to grab props for your wrapper component. Check [our docs on forwarding Refs](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/) for more.
39-
40-
In future, the need to `forwardRef` may go away in React 17+, but for now we still have to deal with this. 🙃
38+
**Forwarding Refs**: Most use cases will not need to obtain a ref to the inner element. When building reusable component libraries, however, `forwardRef` is often needed for exposing the underlying DOM node of an inner component to a parent component. Then you can use `ComponentPropsWithRef` to grab props for your wrapper component. Check [our docs on forwarding Refs](https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/) for more.
4139

4240
<details>
4341
<summary>
@@ -168,33 +166,8 @@ export const FancyButton = forwardRef<Ref, Props>((props, ref) => (
168166
{props.children}
169167
</button>
170168
));
171-
172-
// second layer button, no need for forwardRef (TODO: doublecheck this)
173-
export interface DoubleWrappedProps
174-
extends React.ComponentPropsWithRef<typeof FancyButton> {
175-
specialProp?: string;
176-
}
177-
export function DoubleWrappedButton(props: DoubleWrappedProps) {
178-
const { specialProp, ref, ...rest } = props;
179-
return <button ref={ref} {...rest} />;
180-
}
181-
182-
// usage
183-
import { useRef } from "react";
184-
185-
function App() {
186-
const btnRef = useRef<HTMLButtonElement>(null!);
187-
return (
188-
<DoubleWrappedButton type="button" ref={btnRef}>
189-
{" "}
190-
text{" "}
191-
</DoubleWrappedButton>
192-
);
193-
}
194169
```
195170

196-
_[TS Playground link](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUIwPTNwBGaWHArjDBAB2AGjgB3YDAAWcSgTgFoY5FAAmwQQHNGMAJ5huABWJh0AXjgBvOLinAANqsqCAXJiowAdNjwwAchCqWDRwegZuAESoPOwgkhFwAD5wEex8AoIJAL70DFgAHpCwofrc2PIWABIAKgCyADIAQulCAKL2WCBYgjC5BUXwuEKo8ABiyIK4us38QnAWPvieilDKauUAPOWixhCmAHwAFIdgJqiicgCU8-twh4xwcBtps4KyWARmlnJZNvZoqD8yC6ZgitV0AGF-qhAcCsAkwlgvqc9qhPIisvsHo8rCjTJ5bA4nN0stiNswXhksQxLpdcowWGxUFghoJVHB-rosFBeK9GP1oPANDBuQQ8NwACIQGIdADqUGQYAMql2pjgBRFbPQiy8EJIkEE3RgqtQsskUk2iIg8nGk2mLUEt0s2NQBlwwGQ9lVAH43CMoBpNLlSXlCoKFDxJjBgHMpTKsPLFcqZhkTmc3HH2HKFUqsCqztdnQxHqyRlY4K6WR6vSYLh9RJ5G5Qy78LHjULlHpQYDwoG9ng73p9vh9fpZG55mzBfsx9sGGQxWHAeKhkJosIwCJH8DG3gBBJWHQvY0vwdgwQTlebuXyeFdYTY1BoptodLo9I6CHj2ewAQku2Ldr2-aZtmSZ5i+byIqClJCAkchfOel6jrcIr5PA5KgQmObJg61IhkAA)_
197-
198171
## Polymorphic Components (e.g. with `as` props)
199172

200173
> "Polymorphic Components" = passing a component to be rendered, e.g. with `as` props

0 commit comments

Comments
 (0)