React Native difference between nested arrow function and normal arrow function

Question

let arr;
for (var i = 0; i < 4; i++) {
  arr.push(
    <ListItem key={i}> // native-base component
      <Button
        onPress={this.pick(curJob, i)}>
      </Button>
    </ListItem>
  )
}


render(){
  return (
    { arr }
  )
}

In this code, what is the difference between the two functions?

Function 1.

pick = (job,index) => {
  console.log(job);
  console.log(index);
}

Function 2.

pick = (job,index) => () => {
  console.log(job);
  console.log(index);
}

I found that function 2 works fine but function 1 returns error (maximum call stack size exceeded) I wonder what is the difference between the two functions and if function1 can be called call-back function.

The second one is a function that returns another function. – Roberto Zvjerković Jan 21 '20 at 10:24 — Roberto Zvjerković, Jan 21 '20 at 10:24

score 0 · Accepted Answer · answered Jan 21 '20 at 10:25

The second one is invalid.

The prototype of an arrow functions is the following :

variableName = (arguments) => {
    Body
}

Your onPress should be : onPress = {() => this.pick(curJob,i)}>, otherwise, the function is called everytime a render happens, so always. With the () => before, you are telling the program to run this.pick only onPress

score 0 · Answer 2 · answered Jan 21 '20 at 10:26

 pick = (job,index) => () => {
                console.log(job);
                console.log(index);
           }

this is just function returning a function its equal to

nestedfunc(job, index) => {
  console.log(job);
  console.log(index);
}


pick = (job,index) => nestedfunc(job,index);

React Native difference between nested arrow function and normal arrow function

2 Answers2