Tengo curiosidad por saber cuál es una forma más eficiente de manejar la lógica de la lista. Por ejemplo...
El componente del artículo
export default function Item({data}) => { return <div> <h1>{data.name} <button> Do Something </button> </div> }El componente Lista
export default function List({list}) => { return <div> {list.map(item) => <Item data={item} />} </div> }El componente principal
export default function Main() { return <div> <List list={someList} /> </div> }Si quiero hacer algo con el botón en el componente Elemento, ¿es mejor colocar la lógica dentro del componente Elemento de esta manera:
export default function Item({data}) => { const handleDoSomething = () => { logic goes here } return <div> <h1>{data.name} <button onClick={() => handleDoSomething()}> Do Something </button> </div> }¿O debería propagar el evento al componente Lista y manejarlo allí de esta manera:
export default function Item({data, handleButtonClick}) => { return <div> <h1>{data.name} <button onClick={() => handleButtonClick()}> Do Something </button> </div> } export default function Main() { const handleDoSomething = () => { logic goes here } return <div> <List list={someList} handleButtonClick={() => handleDoSomething()} /> </div> }¿Qué es mejor para hacer esto? Quiero un mejor rendimiento.
Supongo que es mejor propagar el evento al componente Lista porque la función del controlador solo se declarará una vez, en lugar de una vez por cada botón que represente.
Y por cierto, si no pasa ningún argumento personalizado a su función de controlador, no necesita crear una función de flecha, simplemente puede hacer:
<button onClick={handleButtonClick}> Do Something </button>