From 9adef6e47a56810e721b930566928dd08532710c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= <kacpermikolajczak10@gmail.com>
Date: Wed, 20 Sep 2023 20:19:27 +0200
Subject: [PATCH 1/4] add ForwardRef note to STYLE.md

---
 contributingGuides/STYLE.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md
index b615104f6aab..0a88ecd7bda8 100644
--- a/contributingGuides/STYLE.md
+++ b/contributingGuides/STYLE.md
@@ -491,6 +491,19 @@ When writing a function component you must ALWAYS add a `displayName` property a
     export default Avatar;
 ```
 
+## Forwarding refs
+
+When forwarding a ref define named component and pass it directly to the `forwardRef`. By doing this we remove potential extra layer in React tree in form of anonymous component.
+
+```javascript
+    function FancyInput(props, ref) {
+        ...
+        return <input {...props} ref={ref} />
+    }
+
+    export default React.forwardRef(FancyInput)
+```
+
 ## Stateless components vs Pure Components vs Class based components vs Render Props - When to use what?
 
 Class components are DEPRECATED. Use function components and React hooks.

From 93d58d5a95ae621c85f51e6aa41756973d513da9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= <kacpermikolajczak10@gmail.com>
Date: Wed, 20 Sep 2023 20:23:52 +0200
Subject: [PATCH 2/4] add changes to ForwardRef section in TS_CHEATSHEET

---
 contributingGuides/TS_CHEATSHEET.md | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/contributingGuides/TS_CHEATSHEET.md b/contributingGuides/TS_CHEATSHEET.md
index df6d70b5ae90..1e330dafb7cf 100644
--- a/contributingGuides/TS_CHEATSHEET.md
+++ b/contributingGuides/TS_CHEATSHEET.md
@@ -43,7 +43,9 @@
 - [1.2](#forwardRef) **`forwardRef`**
 
   ```ts
-  import { forwardRef, useRef, ReactNode } from "react";
+  // CustomTextInput.tsx
+
+  import { forwardRef, useRef, ReactNode, ForwardedRef } from "react";
   import { TextInput, View } from "react-native";
 
   export type CustomTextInputProps = {
@@ -51,16 +53,18 @@
     children?: ReactNode;
   };
 
-  const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(
-    (props, ref) => {
-      return (
-        <View>
-          <TextInput ref={ref} />
-          {props.children}
-        </View>
-      );
-    }
-  );
+  function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef<TextInput>) {
+    return (
+      <View>
+        <TextInput ref={ref} />
+        {props.children}
+      </View>
+    );
+  };
+
+  export default forwardRef(CustomTextInput);
+
+  // ParentComponent.tsx
 
   function ParentComponent() {
     const ref = useRef<TextInput>();

From ceee888aac987759cb98395bcae4aaccc942c2ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= <kacpermikolajczak10@gmail.com>
Date: Wed, 20 Sep 2023 20:27:31 +0200
Subject: [PATCH 3/4] add generic component annotation to forwardRef section in
 TS_CHEATSHEET

---
 contributingGuides/TS_CHEATSHEET.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contributingGuides/TS_CHEATSHEET.md b/contributingGuides/TS_CHEATSHEET.md
index 1e330dafb7cf..199127acda97 100644
--- a/contributingGuides/TS_CHEATSHEET.md
+++ b/contributingGuides/TS_CHEATSHEET.md
@@ -48,12 +48,12 @@
   import { forwardRef, useRef, ReactNode, ForwardedRef } from "react";
   import { TextInput, View } from "react-native";
 
-  export type CustomTextInputProps = {
-    label: string;
+  export type CustomTextInputProps<T> = {
+    label: T;
     children?: ReactNode;
   };
 
-  function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef<TextInput>) {
+  function CustomTextInput<T>(props: CustomTextInputProps<T>, ref: ForwardedRef<TextInput>) {
     return (
       <View>
         <TextInput ref={ref} />

From aed5aa94232abe7e049b389fe5eb793ec5356456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Miko=C5=82ajczak?= <kacpermikolajczak10@gmail.com>
Date: Wed, 20 Sep 2023 20:30:41 +0200
Subject: [PATCH 4/4] Revert "add generic component annotation to forwardRef
 section in TS_CHEATSHEET"

This reverts commit ceee888aac987759cb98395bcae4aaccc942c2ff.
---
 contributingGuides/TS_CHEATSHEET.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/contributingGuides/TS_CHEATSHEET.md b/contributingGuides/TS_CHEATSHEET.md
index 199127acda97..1e330dafb7cf 100644
--- a/contributingGuides/TS_CHEATSHEET.md
+++ b/contributingGuides/TS_CHEATSHEET.md
@@ -48,12 +48,12 @@
   import { forwardRef, useRef, ReactNode, ForwardedRef } from "react";
   import { TextInput, View } from "react-native";
 
-  export type CustomTextInputProps<T> = {
-    label: T;
+  export type CustomTextInputProps = {
+    label: string;
     children?: ReactNode;
   };
 
-  function CustomTextInput<T>(props: CustomTextInputProps<T>, ref: ForwardedRef<TextInput>) {
+  function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef<TextInput>) {
     return (
       <View>
         <TextInput ref={ref} />