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();