How to pass variables to a function reference?

Question

In react native when you have functions that need to run at render and must pass variables, most people suggest that one should use

onPress{() => this.functionName(variable)}

However when working with large lists and complex components you have to optimize your code. Creating a new function for every renderItem in a flatList reduces performance, sometimes hugely so depending on how many functions per renderItem you are creating. So the suggestion is to move from creating a function at render to using a function reference. Like this:

functionName = () => {
   //code
}

onPress={this.functionName}

However I haven't been able to figure out how to pass variables to the function with this method.

If you do this:

onPress={this.functionName(variable}

It will just run the function instantly on component load.

Any ideas?

Answer 1

I highly recommend using currying to pass an argument.

Currying is the process in which you separate a function into several functions that each take a single argument. The reason why this method works really well, in this case, is because when you call a function on the render method, the argument passed is automatically the event, so to pass the second argument, the function would have to be curried in order receive the next argument.

You would define your function as such:

functionName = variable => event => {
 //code 
}

You can then go ahead and call your function in the render method:

onPress={this.functionName(variable)}

This is a great article if you would like to learn more: Currying In JS

This method is extremely elegant and useful because it removes the need to wrap your function call in an anonymous function inside the render method of React.

In any other case, you can also do what the official React Docs suggest: React Docs on passing arguments to event handlers

Good luck!