I want to understand how hoisting works with respect to react ponent. Please check =/src/index.js

I have included Test, Test2 and const hello variables to test hoisting.

According to function hoisting, (reference: Function hoisting), Test function in example could be used before declaration.

But, Test2 is a function expression here, (reference: function expression hoisting), Test2 function should not be used before declaration. It should throw reference error. But, it doesn't throw in react ponent. why?

Also, hello is a const and should not be used before declaration.(Reference: const hoisting It should also throw an error ideally. Why error is not thrown?

Note: My understanding could be pletely wrong. Looking to understand the reasoning here.

I want to understand how hoisting works with respect to react ponent. Please check https://codesandbox.io/s/react-hello-world-forked-mzbyn6?file=/src/index.js

I have included Test, Test2 and const hello variables to test hoisting.

According to function hoisting, (reference: Function hoisting), Test function in example could be used before declaration.

But, Test2 is a function expression here, (reference: function expression hoisting), Test2 function should not be used before declaration. It should throw reference error. But, it doesn't throw in react ponent. why?

Also, hello is a const and should not be used before declaration.(Reference: const hoisting It should also throw an error ideally. Why error is not thrown?

Note: My understanding could be pletely wrong. Looking to understand the reasoning here.

• javascript
• reactjs
• hoisting

• The way SO works, your whole question (including any necessary code) has to be in your question, not just linked. Three reasons: People shouldn't have to go off-site to help you; some sites are blocked for some users; and links rot, making the question and its answers useless to people in the future. Please put a minimal reproducible example in the question. More: How do I ask a good question? and Something in my web site or project doesn't work. Can I just paste a link to it? – T.J. Crowder Commented Apr 8, 2022 at 7:09
• Note: Stack Snippets support React, including JSX; here's how to do one. – T.J. Crowder Commented Apr 8, 2022 at 7:09
• App() is executed by <App />, inside React.render(<App />, ...). By that time, hello has been declared. Why are you expecting an error? – a.h.g. Commented Apr 8, 2022 at 7:23

2 Answers 2

Test, Test1 and also hello const are being used from inside App.

App doesn't get executed before their initialization, it just gets declared. By the time App is executed both functions and const are declared and initialized. That's why you don't get an error.

If you want to test the error for the const just put a console.log(hello) above the declaration, but outside of a function that will get called later.

because the App ponent is just declared before initializing the Test and Test1 ponents, it is called after initializing them.

I think this example can show you when you should expect a reference error

Here You should expect an error

Uncaught ReferenceError: Cannot access 'test' before initialization

 const main = () => {
  console.log("TEST", test())
}

// using main() function before initializing the test() function used inside it
main()

const test = () => {
  return "TEST Function"
}

but here you will not get any error because use called main() function after declaring test() function

"TEST" "TEST Function"

const main = () => {
  console.log("TEST", test())
}

const test = () => {
  return "TEST Function"
}

// using the function after initializing the test function used inside 
main()