Assumindo o código abaixo (linha 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 que eu preciso passar um argumento para o meu handler de evento (conforme fiz na linha 15). Para isso, usei uma arrow function, que chama a função handleClick
, passando o argumento desejado (no exemplo, item
).
Atualmente, sei que existem duas formas de se fazer isso:
- Usando arrow functions, como mostrado no exemplo acima (
{() => eventHandler(...args)}
); - Usando
Function.prototype.bind
({this.handleClick.bind(this, ...args)}
).
No entanto, de acordo com a documentação, essas duas opções criam uma nova função a cada renderização, o que pode afetar a performance em certos casos.
ℹ️ Esses avisos podem ser vistos aqui e aqui.
Então, a pergunta é: assumindo que realmente seja necessário passar um argumento do render
, há alguma forma de fazê-lo sem after a performance (já que a documentação do React só cita os dois exemplos)?