Anonymous function in React-Native

Question

I am a beginner in react native and recently, I encountered an infinite loop when I put a function in onPress property directly. in some cases, direct function call works, but in this case, I have to use an anonymous function. What exactly is happening when I use an anonymous function? Why does it not cause an infinite loop?

   export default function App()
   {
     const [state, setState] = useState({
       searchQuery: "",
       active: false,
       data: []
     });

     function setSearchQuery(val) {
       setState({...state, searchQuery: val});
     }
     function setActive(val) {
       setState({...state, active: val});
     }
     function setData(val) {
       setState({...state, data: val});
     }
     function keyboardDissmiss() {
       setState({...state, active: false});
       Keyboard.dismiss();
     }

     return (
       <TouchableWithoutFeedback onPress={keyboardDissmiss}>
         <SafeAreaView style={GlobalStyles.droidSafeArea}>
           <View style={{height: 50,alignItems: 'center', backgroundColor: "blue"}}>
             <Text>{state.searchQuery}</Text>
           </View>
           <View style={{flex:1}}></View>
           <NavBar state={state.active} style={styles.container} onPress={() => setActive(true)}> 
             {state.active && 
               <SearchBar 
                 value={state.searchQuery} 
                 onBlur={() => setActive(false)} 
                 search={setSearchQuery}
               />}
           </NavBar>
         </SafeAreaView>
       </TouchableWithoutFeedback>
    );
}

Answer 1

I assume that before you had onPress={setActive(true)} , but event listeners require a function, the value that you are passing is actually evaluating the result of your function setActive, instead of setting setActive as the event listener

the event listener must not have any parameter, so in order to have setActive get called with the value of true, when the element is pressed, you need to wrap it in another function that takes no parameters (and therefore you can pass the function itself, and the return value of the function).

It doesn't have to be an arrow function, you could've defined a setActiveToTrue which takes no parameters, and simply calls setActive(true) , but that's too much of a hassle, and that's what arrow functions are for

Answer 2

onPress={handleMethod(val)}

In the above case handleMethod function is called as soon as render happen, so it encounters an infinite loop.

To avoid that case, you need to follow this:

onPress={() => handleMethod(val)}

If you don't have any arguments to pass to the handler method, you can do this

onPress={handleMethod}

onPress expects a reference of the function, not the function call