Estoy tratando de entender cómo funcionan las cosas bajo el capó dentro de los componentes cuando ejecuto un programa en reacción, y específicamente el orden de ejecución del código cuando se crea un componente. Cuando hago esta pregunta, la gente confunde el orden de ejecución del código dentro del componente con el ciclo de vida del componente, un ejemplo de lo que quiero decir con el orden de ejecución es el siguiente:

 function Test(){ let testVar = 'testing'; function test(){ } return( <div className="test-element">I here just for testing purposes</div> ) }

digamos que tengo un componente llamado 'Prueba' y este componente representa un elemento, y dentro del componente decido declarar algunas variables y funciones, mi pregunta es qué sucede cuando ejecutamos el programa, ¿los elementos devueltos se representan en la pantalla? ¿Se evalúa el código dentro del componente (es decir, se declaran variables y funciones) o se evalúa el código dentro del componente y luego los elementos se representan en la pantalla?

(Si hay un problema con la forma en que se hace la pregunta o algo que no está claro por mi parte, infórmeme, intentaré aclararlo más para usted)