Calling function via direct or Arrow function

Question

As you know I’m joining this world of Javascript/React Native... In my studies I have noticed in some examples how certain functions are called.

• Example 1: In this example the onCancel function is called when the user presses Touchableopacity:

<TouchableOpacity onPress={this.props.onCancel}>
    <Text style={styles.button}>Cancelar</Text>
</TouchableOpacity>

• Example 2: In this example the setState function, which changes the state of the component, is called when the user presses Touchableopacity, but note that here it is present in an Arrow function, unlike example 1:

<TouchableOpacity style={styles.addButton} onPress={() => this.setState({ showAddTask: true })}>
    <Icon name='plus' size={20} color={commonStyles.colors.secondary} />
</TouchableOpacity>

• Example 3:In this example the toggleFilter function is called when the user presses Touchableopacity and just like in Example 1 the same does not apply to an Arrow Function:

<TouchableOpacity onPress={this.toggleFilter}>
    <Icon />
</TouchableOpacity>

• Example 4: In this example the setState function, which changes the state of the component, is called when the user changes the content of Textinput, but note that here it is present in an Arrow function, unlike example 1:

<TextInput onChangeText={desc => this.setState({ desc })} value={this.state.desc} />

• Example 5: In this example I have the getDateTimePicker function which returns a Datetimepicker component. Since this is a class component right after I return a JSX in the render, note that I call getDateTimePicker directly, without Arrow Function, and it will return the Datetimepicker component:

getDateTimePicker = () => {
    return (
        <DateTimePicker 
            value={this.state.date} 
            onChange={(_, date) => this.setState({ date })} 
            mode='date' 
        />
    )
}
    
render() {
   return (
        <Text style={styles.header}>Nova Tarefa</Text>                    
        {this.getDateTimePicker()}
)}

Because sometimes we call "direct" functions without parentheses, other times we call direct with parentheses (example 5) and other times we put inside Arrows functions as in the above examples?

Answer 1

The explanation will follow by the examples and summary at the end. Below:

Example 1:

<TouchableOpacity onPress={this.props.onCancel}>
   <Text style={styles.button}>Cancelar</Text>
</TouchableOpacity>

In this first example, the function onCancel is passed her reference to the event. So, this function, after the event Opress is executed, it has all the event parameters. If the event onPress, is set, waiting for a parameter (Event), this parameter will be referenced to the function parameters onCancel.

Example 2:

<TouchableOpacity style={styles.addButton} onPress={() => this.setState({ showAddTask: true })}>
    <Icon name='plus' size={20} color={commonStyles.colors.secondary} />
</TouchableOpacity>

In this second example, the function that is called when running the event is not the setState, the function that is called is an anonymous function and in that function there is the procedure to call the setState. Note that the anonymity function called, it overrides any event parameters, leaving the anonymity function without parameters.

Example 3:

<TouchableOpacity onPress={this.toggleFilter}>
   <Icon />
</TouchableOpacity>

Repeat the explanation of Example 1. The toggleFilter function is referenced to the onPress event, making it have all the characteristics of the event settings.

Example 4:

<TextInput onChangeText={desc => this.setState({ desc })} value={this.state.desc} />

Repeat the explanation of example 2, with the addendum that now the anonymity function, collects the parameter of the event definition. When firing the event the anonymity function is called, with the attribute desc and that function that performs the procedure to call the function setState.

Example 5:

getDateTimePicker = () => {
  return (
    <DateTimePicker 
        value={this.state.date} 
        onChange={(_, date) => this.setState({ date })} 
        mode='date' 
    />
  )
 }

 render() {
    return (
      <Text style={styles.header}>Nova Tarefa</Text>                    
      {this.getDateTimePicker()}
  )}

In example 5, you are creating a getDateTimePicker attribute and passing an anonymous function to it. This function, it is called when calling the attribute, causing this.getDateTimePicker(), to perform the procedures defined in the anonymity function.

---

After this long explanation of each item, follow the conclusion.

Your doubt is divided into two segments, the passage of references of functions in javascript ( Example 1, Example 2, Example 3 and Example 4) and the creation of functions and attributes (Example 5).

In passing functions as parameters to events, understand that events will expect a callback function to perform; this function can be passed as a reference or you can create an anonymous function and perform its callback function within that function (Example 2 and Example 4). In this first situation, the use of callback causes the reference of the function to be passed directly to the event, sometimes you cannot pass a certain item that is in the scope of the function to your callback. In another case, using the functions Anonimas you have the freedom to call attributes that will be executed within the function (Example 1 and Example 3). But note, the callback of the event, is not the function you are calling in there, but the anonymity function. You create a function, which it calls its function.

The use of one or the other, depends on the situation, but knowing this, I hope it has become clear about this passage of functions as parameters.

Example 5, is creating an attribute and passing a function to it and after that, you are calling this function to perform, with parentheses. Without parentheses would be passed her reference.

In the end, it is to understand that without parentheses is reference passage of the function and with parentheses is the execution of the function.

I hope I’ve helped.