Hay un componente que recibe props.
Los accesorios tienen la forma de una matriz, para cada elemento de esta matriz, una función devolverá un componente diferente para representar.
function MainComponent ({ data }) => { // data is props, an array const specialFunction = (index) => { switch (index) { case 0: return <Component0 />; case 1: return <Component1 />; case 2: return <Component2 />; default: return null; } }; ... return ( ... data.map((item, index) => { ... // do other stuff with item <div>{specialFunction(index)}</div> // the function that we talk about ... );¿Hay alguna manera de memorizar el resultado de esto si los accesorios no van a cambiar? ¿O alguna forma de escribirlo mejor?
Hay un par de maneras de lograr esto:
const [components] = useState([<Component0 />, <Component1 />, <Component2 />])
Y luego solo use components[index] cuando intente renderizar.
useCallback para memorizar tu función.useCallback con una matriz de dependencia vacía será el mejor enfoque aquí. useCallback devolverá una versión memorizada de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Dado que nuestra matriz de dependencia es [] , se inicializará solo una vez y la función memorizada devuelta se usará en llamadas de funciones posteriores.
const specialFunction = useCallback((index) => { switch (index) { case 0: return <Component0 />; case 1: return <Component1 />; case 2: return <Component2 />; default: return null; } }, []);Otro patrón, creo que en este caso el más elegante es usar:
const components = { 0: <Component0 />, 1: <Component1 />, 2: <Component2 />, } /* or const components = [<Component0 />, <Component1 />, <Component2 />] */ function MainComponent ({ data }) => { ... return ( ... data.map((item, index) => <div>{components[index] || null}</div> ... );