Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does calling curried function in render have negative performance impact?

I've read that it's good practice to declare function as component's method instead of inlining it in render, because every time parent component is rendered it creates new function and messes up with child's shouldComponentUpdate.

I.e. this: <button onClick={this.handleClick} /> is better than that: <button onClick={e => someAction(e)} />

But what about curried functions? Is the following considered as creating new function?

class Parent extends Component {
  handleClick = data => event => someAction(data);

  render() {
    const data = 123;
    return <button onClick={this.handleClick(data)} />;
  }
}

I know that the "performance impact" may be unnoticable there, but I find partially applicating function paramaters while passing down the component tree very convienent and I'm wondering if it's against best practices.

like image 296
Selenir Avatar asked Apr 18 '18 19:04

Selenir


People also ask

Are curried functions useful?

Currying is helpful when you have to frequently call a function with a fixed argument. Considering, for example, the following function: If we want to define the function error , warn , and info , for every type, we have two options. Currying provides a shorter, concise, and more readable solution.

How do you call a currying function?

Currying is a function that takes one argument at a time and returns a new function expecting the next argument. It is a transformation of functions that translates a function from callable as f(a, b, c) into callable as f(a)(b)(c).

What is currying function in react?

Currying is the technique of converting a function that takes multiple arguments into a sequence of functions that each takes a single argument.

Why currying is useful in Scala?

Advantages of Currying Function in Scala One benefit is that Scala currying makes creating anonymous functions easier. Scala Currying also makes it easier to pass around a function as a first-class object. You can keep applying parameters when you find them.


1 Answers

Yes it has negative performance impact because of the extra function invocation. But do you really have to worry about it? Most likely not. There are popular React patterns that use closures in render, like https://reactjs.org/docs/render-props.html Measure first to avoid spending energy on imaginary performance bottlenecks.

like image 151
Red Mercury Avatar answered Oct 26 '22 23:10

Red Mercury