const BasicFunctionalComponent = props => {
return (
<div>
{constantVariable}
</div>
)
}
export default BasicFunctionalComponent
const constantVariable = '**how I am initialized**?'
in example above I just create a basic functional component and after exporting it just initialized a constant variable set as a string. then I used it inside JSX above expected to go throw error 'Cannot access 'constantVariable' before initialization'. but all's good
Because BasicFunctionalComponent will get called much later. It's basically an asynchronous function from the perspective of this file you showed us. By the time that function is called, constantVariable will be defined.
Let's start with a much more clear example:
const fx = () => {
console.log(v)
}
// fx() // Call it here and it throws error
const v = 1
// fx() // Call it here and it's ok
console.log('Fin!')
The reason behind why it does not throw ReferenceError is basically because the component function is not called before the initialization of the constantVariable.