React – Dictionary Pattern

Profundicemos por qué esto realmente funciona.

Component Definition vs Instantiation: En el contentDict, estamos definiendo lo que debe renderizarse para cada state, pero en realidad no estamos creando instancias de estos components todavía. La sintaxis como <ActivityIndicator /> o <Text>Error</Text> en este context solo describe lo que debe renderizarse, no lo está renderizando realmente.

JSX y React Elements: En React, cuando escribes JSX como <ActivityIndicator />, estás creando un React element, que es una descripción ligera de lo que se debe render. No es lo mismo que instanciar un component.

Render Time: La instanciación y rendering real del component solo ocurre cuando React procesa el return statement y decide qué necesita actualizarse en el DOM. En este punto, React mirará el valor del contenido, verá qué component necesita render, y luego instanciar y renderizar ese component específico.

Performance: Este approach es eficiente porque React solo instancia y renderiza el component que coincide con el viewState actual. Los otros components definidos en contentDict permanecen como descripciones ligeras hasta que se necesiten.