Skip to content
Advertisement

Different between anonymous function and directly calling the function in a React component

Sorry this is more about lack of enough JS knowledge I think but my question is in my component if I have <td>{() => this.renderCell(item, col)}</td> method being used like that it won’t work but being called normally like I have in the component below then it works: What’s the difference?

class TableBody extends Component {
  renderCell = (item, column) => {
    if (column.content) return column.content(item);

    return _.get(item, column.path);
  };

  render() {
    const { data, columns } = this.props;
    return (
      <tbody>
        {data.map((item) => (
          <tr>
            {columns.map((col) => (
              <td>{this.renderCell(item, col)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    );
  }
}

Advertisement

Answer

sorry that I can’t just comment on this. But what happens is that when you call a function from inside an arrow function in React, like this:

<td>{() => myFunction()}</td>

It runs when you perform a specific action on that element, for example, when you click on a button:

<button onClick={() => myFunction} />

When you don’t call it from inside an arrow function, like you are doing in your code snippet, that function gets called automatically, so, it renders your code:

// Runs automatically
<td>{myFunction()}</td>

// Only on specific trigger:
<td>{() => myFunction()}</td>
Advertisement