4
Assuming the code below (line 15):
import React from 'react'
import ReactDOM from 'react-dom'
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
function App() {
function handleClick(item) {
alert(`Você clicou no item ${item}!`)
}
return (
<>
{items.map((item) => (
// Note na linha abaixo, em que uso uma arrow function:
<button key={item} onClick={() => handleClick(item)}>
Item {item}
</button>
))}
</>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Note that I need to pass an argument to mine Handler event (as I did on line 15). I used a Arrow Function, calling the function handleClick
, passing the desired argument (in the example, item
).
Currently, I know there are two ways to do this:
- Using Arrow functions, as shown in the example above (
{() => eventHandler(...args)}
); - Using
Function.prototype.bind
({this.handleClick.bind(this, ...args)}
).
However, according to the documentation, these two options create a new function at each render, which may affect performance in certain cases.
These warnings can be seen here and here.
So the question is, assuming that it is necessary to pass an argument of the render
, there is some way to do it without after a performance (since the React documentation only cites the two examples)?
The documentation cites an alternative, which is to use data-Attributes.
– NoobSaibot