A veces encuentro construcciones en código de otras personas que se ven así:
const TextField = () => { const renderLabel = () => {..} const renderInput = () => {...} const renderFooter = () => {...} return ( <div> { renderLabel(); renderInput(); renderFooter(); } </div> ) }Entiendo por qué lo usan de esta manera, porque puede ser una situación en la que el "retorno" es demasiado pequeño para dividirlo en componentes separados y, al mismo tiempo, quiero que se vea más cómodo de entender.
Pero solo una pregunta aquí, ¿por qué en todas partes la gente usa funciones para estos "renderLabel", "renderInput", etc.?
¿Qué contras del camino cuando solo los creo como variables?
const renderLabel = <div>...</div>
y luego renderizarlo?
No conozco esas funciones en su ejemplo, pero las uso para generar el componente que necesito según un parámetro.
Por ejemplo, cuando construyo contenido de pestañas, puedo escribir algo como esto:
diseño:
<button onClick={() => setActiveTab('tab1')}>Tab 1</button> <button onClick={() => setActiveTab('tab2')}>Tab 2</button> <div>{generateTabContent(activeTab)}</div>generar función de contenido de pestaña:
function generateTabContent(activeTab) { switch (activeTab) { case 'tab1': return <Tab1 /> // etc... } }Esta función es pura (acepta el parámetro, en lugar de llamar al valor del estado), y se puede extraer a la carpeta utils si es necesario.