Vi muchos artículos que decían que definir la función en línea en la función de renderizado en reaccionar puede causar problemas de rendimiento.
Por lo tanto, recomiendan definir la función fuera de la función de renderizado y usarla donde la necesite ( onClick , etc.).
Creé un código de muestra que tengo una lista de botones y cada botón aumentará el estado por el índice en la lista, pero es un error de lanzamiento.
Cómo puedo pasar el parámetro y no usar la función en línea en onClick
const App = () => { const [number, setNumber] = useState(1); const increaseNumber = (num) => { setNumber((prevState) => prevState + num); }; return ( <div> {[...Array(5)].map((item, index) => ( <button key={index} onClick={increaseNumber(index)}> {`increase by ${index}`} </button> ))} <div>{number}</div> </div> ); }; export default App;Prefacio mi respuesta diciendo que realmente debe perfilar su aplicación e identificar problemas de rendimiento específicos antes de intentar optimizar cualquier cosa. En este caso, podría evitar crear una nueva devolución de llamada con cada iteración del mapa mediante el uso de atributos de datos .
function App() { const [number, setNumber] = useState(1); const increaseNumber = (event) => { const index = parseInt(event.target.dataset.index); setNumber((prevState) => prevState + index); }; return ( <div> {[...Array(5)].map((item, index) => ( <button key={index} onClick={increaseNumber} data-index={index}> {`increase by ${index}`} </button> ))} <div>{number}</div> </div> ); } export default App; Por lo general, la única vez que le importaría crear una nueva devolución de llamada por procesamiento es cuando la devolución de llamada se usa como accesorio en un componente secundario. Usar algo comouseCallback puede ayudar a evitar renderizaciones secundarias innecesarias en esos casos.
Cuando los argumentos se arreglan como si fuera su caso, puede usar useMemo :
import { useMemo, useState } from "react"; const indexes = [...Array(5)].map((_item, idx) => idx); const App = () => { const [number, setNumber] = useState(1); const increaseNumber = useMemo(() => { return indexes.map(index => () => setNumber(prevNumber => prevNumber + index)); }, [indexes]); return ( <div> {indexes.map(index => ( <button key={index} onClick={increaseNumber[index]}> increase by {index} </button> ))} <div>{number}</div> </div> ); };Cree su propio componente de botón y pase el índice:
const IncreaseButton = ({ setNumber, index }) => { const increaseByIndex = useCallback(() => { return setNumber(prevValue => prevValue + index); }, [setNumber, index]); return <button onClick={increaseByIndex}>increase by {index}</button>; };Puede pasar un elemento como una función que se ha memorizado al apoyo onClick de los elementos del botón de react .
const App = () => { const [number, setNumber] = useState(1); const increaseNumber = (num) => () => { setNumber((prevState) => prevState + num); }; const btns = useMemo(() => { // here I am using lodash memoize function you may use your own let inc = _.memoize(increaseNumber) return Array(500).fill(0).map((_, index) => inc(index)) }, []) return ( <div> {btns.map((item, index) => ( <button key={index} onClick={item}> {`increase by ${index}`} </button> ))} <div>{number}</div> </div> ); };