diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js index a794d4aa4bad..bfdaf1c13d1b 100644 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js @@ -19,6 +19,7 @@ import * as User from '../../../libs/actions/User'; import TextInput from '../../TextInput'; import CategoryShortcutBar from '../CategoryShortcutBar'; import * as StyleUtils from '../../../styles/StyleUtils'; +import useSingleExecution from '../../../hooks/useSingleExecution'; const propTypes = { /** Function to add the selected emoji to the main compose text input */ @@ -49,6 +50,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t const [filteredEmojis, setFilteredEmojis] = useState(allEmojis); const [headerIndices, setHeaderIndices] = useState(headerRowIndices); const {windowWidth} = useWindowDimensions(); + const {singleExecution} = useSingleExecution(); useEffect(() => { setFilteredEmojis(allEmojis); @@ -150,7 +152,7 @@ function EmojiPickerMenu({preferredLocale, onEmojiSelected, preferredSkinTone, t return ( addToFrequentAndSelectEmoji(emoji, item)} + onPress={singleExecution((emoji) => addToFrequentAndSelectEmoji(emoji, item))} emoji={emojiCode} /> ); diff --git a/src/hooks/useSingleExecution.js b/src/hooks/useSingleExecution.js index 22c2907c9420..6c28087e933c 100644 --- a/src/hooks/useSingleExecution.js +++ b/src/hooks/useSingleExecution.js @@ -1,5 +1,5 @@ import {InteractionManager} from 'react-native'; -import {useCallback, useState} from 'react'; +import {useCallback, useState, useRef} from 'react'; /** * With any action passed in, it will only allow 1 such action to occur at a time. @@ -8,27 +8,32 @@ import {useCallback, useState} from 'react'; */ export default function useSingleExecution() { const [isExecuting, setIsExecuting] = useState(false); + const isExecutingRef = useRef(); - const singleExecution = useCallback( - (action) => () => { - if (isExecuting) { - return; - } - - setIsExecuting(true); + isExecutingRef.current = isExecuting; - const execution = action(); - InteractionManager.runAfterInteractions(() => { - if (!(execution instanceof Promise)) { - setIsExecuting(false); + const singleExecution = useCallback( + (action) => + (...params) => { + if (isExecutingRef.current) { return; } - execution.finally(() => { - setIsExecuting(false); + + setIsExecuting(true); + isExecutingRef.current = true; + + const execution = action(params); + InteractionManager.runAfterInteractions(() => { + if (!(execution instanceof Promise)) { + setIsExecuting(false); + return; + } + execution.finally(() => { + setIsExecuting(false); + }); }); - }); - }, - [isExecuting], + }, + [], ); return {isExecuting, singleExecution};