OnClick function with parameter in redux component "presentation"

Question

What is the best way to pass an object as an argument to a function in a redux view component?

I have a container <BookList />. Inside the BookList, I present a component <BookListRow/>for each book.

I want to make a button in each BookListRow to delete a book. So I do this:

const BookListRow = ({book, deleteBook}) => {
  return (
    <tr>
      <td>
        <button className="btn btn-sm btn-danger"
                onClick={() => {deleteBook(book}}
        >
          <i className="glyphicon glyphicon-remove"></i>
        </button>
      </td>
      <td><a href={book.watchHref} target="_blank">Watch</a></td>
      <td><Link to={'/book/' + book.id}>{book.title}</Link></td>
      <td>{book.authorId}</td>
      <td>{book.category}</td>
      <td>{book.length}</td>
    </tr>
  );
};

It works! But I read that it is better to avoid arrow functions in JSX due to poor performance. So which is better?

Answer 1

You can use the class component:

class BookListRow extends React.Component {
  onBtnClick = () => {
    this.props.deleteBook(this.props.book);
  };

  render () {
    return (
      ...
        onClick={this.onBtnClick}
      ...
    )
  }
}

, , memoization

: http://codepen.io/CodinCat/pen/NpwLRE?editors=0011

onclick ​​ . Map, , , .

- PoC. , onClick, , .

memoization, https://github.com/caiogondim/fast-memoize.js