From df22e81a138664846910075348576a6a1e4d7904 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tammerg=C3=A5rd?=
 <44197016+filiptammergard@users.noreply.github.com>
Date: Mon, 4 Sep 2023 20:31:24 +0200
Subject: [PATCH] Remove invalid example without forwardRef (#640)

---
 docs/advanced/patterns_by_usecase.md | 29 +---------------------------
 1 file changed, 1 insertion(+), 28 deletions(-)

diff --git a/docs/advanced/patterns_by_usecase.md b/docs/advanced/patterns_by_usecase.md
index 4a8fdb86..b9eb8f08 100644
--- a/docs/advanced/patterns_by_usecase.md
+++ b/docs/advanced/patterns_by_usecase.md
@@ -35,9 +35,7 @@ export function Button(props: ButtonProps) {
 
 [_See this in the TS Playground_](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUI4wPQtwCuqyA5lowQ4A7fMAhC4AQTBgAFAEo4Ab0Zw4bOABUAnmCzkARAQgQDZOMHRCI8NKmA8hyAEYAbfTAhwYu-WQPOHDCeQgZwAD5wBqgcziDAMGGRBpSoWIkRnEIAJlgEwEJY2WQAdLIATADM5eXyqurslDAcUBIAPABCQSHevgC8RiYGAHxwqK7ZANYAVnBtLF3B4sP19RrWcFhQxFD1TS3tiz0+egOBS6GjMFgAHvDzR8uMAL7MDBqgYO4gWEIwyDAxEJGLdILALH8tgQ8PpHkIAArEMDoW7XHLobB4GAlADCJEghT+iIgyLaZHOITIoxUDDUqD0uGAyFcxLAAH4AFxjGBQAo8egMV4MUHQQjCUTiOBw2RgJGoLlw1moRQ0tS4cSoeBKMYMpkspEAGjgJRNqXgzzgfTgspJqAFag02S8qBI6QAFny4AB3BJunVYRnM1l7dIHOYUyVKE0lM0WljDAXPIA)
 
-**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.
-
-In future, the need to `forwardRef` may go away in React 17+, but for now we still have to deal with this. 🙃
+**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.
 
 <details>
 <summary>
@@ -168,33 +166,8 @@ export const FancyButton = forwardRef<Ref, Props>((props, ref) => (
     {props.children}
   </button>
 ));
-
-// second layer button, no need for forwardRef (TODO: doublecheck this)
-export interface DoubleWrappedProps
-  extends React.ComponentPropsWithRef<typeof FancyButton> {
-  specialProp?: string;
-}
-export function DoubleWrappedButton(props: DoubleWrappedProps) {
-  const { specialProp, ref, ...rest } = props;
-  return <button ref={ref} {...rest} />;
-}
-
-// usage
-import { useRef } from "react";
-
-function App() {
-  const btnRef = useRef<HTMLButtonElement>(null!);
-  return (
-    <DoubleWrappedButton type="button" ref={btnRef}>
-      {" "}
-      text{" "}
-    </DoubleWrappedButton>
-  );
-}
 ```
 
-_[TS Playground link](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwCwAUIwPTNwBGaWHArjDBAB2AGjgB3YDAAWcSgTgFoY5FAAmwQQHNGMAJ5huABWJh0AXjgBvOLinAANqsqCAXJiowAdNjwwAchCqWDRwegZuAESoPOwgkhFwAD5wEex8AoIJAL70DFgAHpCwofrc2PIWABIAKgCyADIAQulCAKL2WCBYgjC5BUXwuEKo8ABiyIK4us38QnAWPvieilDKauUAPOWixhCmAHwAFIdgJqiicgCU8-twh4xwcBtps4KyWARmlnJZNvZoqD8yC6ZgitV0AGF-qhAcCsAkwlgvqc9qhPIisvsHo8rCjTJ5bA4nN0stiNswXhksQxLpdcowWGxUFghoJVHB-rosFBeK9GP1oPANDBuQQ8NwACIQGIdADqUGQYAMql2pjgBRFbPQiy8EJIkEE3RgqtQsskUk2iIg8nGk2mLUEt0s2NQBlwwGQ9lVAH43CMoBpNLlSXlCoKFDxJjBgHMpTKsPLFcqZhkTmc3HH2HKFUqsCqztdnQxHqyRlY4K6WR6vSYLh9RJ5G5Qy78LHjULlHpQYDwoG9ng73p9vh9fpZG55mzBfsx9sGGQxWHAeKhkJosIwCJH8DG3gBBJWHQvY0vwdgwQTlebuXyeFdYTY1BoptodLo9I6CHj2ewAQku2Ldr2-aZtmSZ5i+byIqClJCAkchfOel6jrcIr5PA5KgQmObJg61IhkAA)_
-
 ## Polymorphic Components (e.g. with `as` props)
 
 > "Polymorphic Components" = passing a component to be rendered, e.g. with `as` props