I'm trying to understand how things work under the hood inside components when I execute a program in react, and specifically the order of execution of code when a component is created. When I ask this question, people confuse the order of execution of code inside the component with the lifecycle of the component, an example of what I mean by the order of execution is the following:

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

let's say I have a component named 'Test' and this component renders an element, and inside the component decide to declare some variables and functions, my question is what happens when we run the program, do the elements returned get rendered to the screen then the code inside the component gets evaluated (i.e variables and functions declared) or the code inside the component is evaluated then the elements get rendered to the screen?

(If there is an issue with how the question is asked or anything unclear from my side, inform me please I'll try to clear it more for you)