Merge pull request #29561 from kacper-mikolajczak/perf/composer-updat…

…es-fixes

Composer - optimise rendering behaviour for onKeyPress & onSubmit

src/hooks/useDebounce.js

@@ -1,5 +1,5 @@
 import lodashDebounce from 'lodash/debounce';
-import {useEffect, useRef} from 'react';
+import {useCallback, useEffect, useRef} from 'react';
 
 /**
  * Create and return a debounced function.
@@ -27,11 +27,13 @@ export default function useDebounce(func, wait, options) {
         return debouncedFn.cancel;
     }, [func, wait, leading, maxWait, trailing]);
 
-    return (...args) => {
+    const debounceCallback = useCallback((...args) => {
         const debouncedFn = debouncedFnRef.current;
 
         if (debouncedFn) {
             debouncedFn(...args);
         }
-    };
+    }, []);
+
+    return debounceCallback;
 }

src/pages/home/report/ReportActionCompose/SuggestionMention.js

@@ -1,17 +1,15 @@
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MentionSuggestions from '@components/MentionSuggestions';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import * as SuggestionsUtils from '@libs/SuggestionUtils';
 import * as UserUtils from '@libs/UserUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import * as SuggestionProps from './suggestionProps';
 
 /**
@@ -29,17 +27,13 @@ const defaultSuggestionsValues = {
 };
 
 const propTypes = {
-    /** Personal details of all users */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** A ref to this component */
     forwardedRef: PropTypes.shape({current: PropTypes.shape({})}),
 
     ...SuggestionProps.implementationBaseProps,
 };
 
 const defaultProps = {
-    personalDetails: {},
     forwardedRef: null,
 };
 
@@ -49,14 +43,14 @@ function SuggestionMention({
     selection,
     setSelection,
     isComposerFullSize,
-    personalDetails,
     updateComment,
     composerHeight,
     forwardedRef,
     isAutoSuggestionPickerLarge,
     measureParentContainer,
     isComposerFocused,
 }) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const {translate} = useLocalize();
     const previousValue = usePrevious(value);
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
@@ -316,8 +310,4 @@ const SuggestionMentionWithRef = React.forwardRef((props, ref) => (
 
 SuggestionMentionWithRef.displayName = 'SuggestionMentionWithRef';
 
-export default withOnyx({
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-})(SuggestionMentionWithRef);
+export default SuggestionMentionWithRef;