Performance issue when Dispatching Redux Actions from KeyEvent Listener? #88
Description
We have an issue when calling a function that does some redux store dispatch and computations, it will take considerably longer when called from the KeyEvent listener, than calling it directly from, for example, a Button onPress.
In the attached code, if I call the saveData function directly from the Button onPress it takes between 6 and 20 milliseconds.
If I call the function from within the KeyEvent, it will take a lot longer. Consistently between 40 and 60+ milliseconds.
I've created a repo to show the issue.
https://github.com/fdibQat/rn-keyevent-perfomance
In this case, using an anonymized repo, with such small times it's not really a problem, but we have some more real-life complex code where a 1-second operation takes 6 or 7 seconds when called from the KeyEvent listener, which is very much noticeable.
import React, { useEffect, useState } from "react"; import { Button, StyleSheet, Text, View } from "react-native"; import KeyEvent from "react-native-keyevent"; import { TestData, TestItem, addItemToTestData } from "./testSlice"; import { useSelector, useDispatch } from "react-redux"; import { RootState } from "./store"; const KeyCatcher = () => { const testData = useSelector((state: RootState) => state.testData); const [keyCode, setKeyCode] = useState("nothing has been pressed yet"); const KEYBOARD_KEYS = { arrowDown: 20, arrowLeft: 21, arrowRight: 22, arrowUp: 19, f1: 131, f2: 132, f3: 133, f4: 134, f5: 135, f6: 136, f7: 137, tab: 61, } as const; type KeyboardKeys = (typeof KEYBOARD_KEYS)[keyof typeof KEYBOARD_KEYS]; const dispatch = useDispatch(); // Heavy operation mock function const heavyOperation = (testData: TestData[], itemToAdd: TestItem) => { const start = performance.now(); const sum = testData.reduce((acc, testDataItem) => { const abcSum = testDataItem.testItems?.reduce( (abcAcc, item) => abcAcc + item.abc, 0 ) || 0; return acc + abcSum; }, 0); const total = sum + itemToAdd.abc; const end = performance.now(); console.log(`Time taken to execute heavy operation is ${end - start}ms.`); return total; }; const saveData = (calledFrom: string) => { console.log(">>> Save data started: <<<"); console.log("Called from:", calledFrom); const start = performance.now(); const itemToAdd = { abc: 1, name: "TEST 3", price: 1, sequence: 1, status: true, updatedAt: new Date().toISOString(), value: 1, volume: 1, xCode: "Y3", xyz: 1, yCode: "Y3", }; const randomHeavyOp = heavyOperation(testData, itemToAdd); console.log("Total randomHeavyOp value:", randomHeavyOp); testData.forEach((testDataItem) => { const similarItem = testDataItem.testItems?.find( (item) => item.name === itemToAdd.name ); if (similarItem) { console.log("Found a similar item with name:", similarItem.name); } else { console.log("No similar item found"); } }); dispatch(addItemToTestData({ testID: "LN123567", testItem: itemToAdd })); console.log(">>> Save data finished <<<"); const end = performance.now(); console.log("Time taken to execute add function is: ", end - start, "ms."); }; useEffect(() => { KeyEvent.onKeyDownListener( (keyEvent: { keyCode: KeyboardKeys; action: string; pressedKey: string; }) => { console.log( "Key pressed:", keyEvent.keyCode, keyEvent.action, keyEvent.pressedKey ); setKeyCode(keyEvent.keyCode.toString()); switch (keyEvent.keyCode) { case KEYBOARD_KEYS.f2: saveData("F2 Key pressed"); break; default: break; } } ); return () => KeyEvent.removeKeyDownListener(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <View style={styles.container}> <Text> Key Code pressed: {keyCode} {testData[0].testItems.length} </Text> <Button title="Save this" onPress={() => saveData("Button onPress")} /> </View> ); }; export default KeyCatcher; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#9fb4b6", alignItems: "center", justifyContent: "center", borderWidth: 1, borderColor: "black", }, });