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
+ }
+
+ 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.
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(
- (props, ref) => {
- return (
-
-
- {props.children}
-
- );
- }
- );
+ function CustomTextInput(props: CustomTextInputProps, ref: ForwardedRef) {
+ return (
+
+
+ {props.children}
+
+ );
+ };
+
+ export default forwardRef(CustomTextInput);
+
+ // ParentComponent.tsx
function ParentComponent() {
const ref = useRef();