What is JSX's hoisting behavior?

My code runs now but I wonder what's going on 🙂 if I place

const a = Test;
function Test() {}
console.log(a);

const a = Test;
function Test() {}
console.log(a);

inside a .jsx that is outside a function, undefined will be printed. However if I place it inside a function that is called with render the function will be printed. So what is the hoisting behavior under JSX?

6 Replies

lxsmnsyc•7mo ago

Where are you testing this specifically

coz•7mo ago

My computer. However you can reproduce it on the JavaScript starter given at the beginner tutorial on https://stackblitz.com/github/solidjs/templates/tree/master/js

StackBlitz

Solidjs - Templates - StackBlitz

Vite + solid templates

lxsmnsyc•7mo ago

ahh, it's a bit different when it comes to dev mode, thanks to HMR. This is unlikely to be fixed, unfortunately Longer explanation: HMR replaces every function declaration with variable declaration. Hoisting should still work for inner references however for top-level, this produces "undefined" because you're trying to access a variable that is yet to be declared (function declaration behaves too differently). The reason it's a "wont fix" is because there's no way to effectively re-assign a function declaration in-place while conditionally maintaining its reference

coz•7mo ago

Isn't HMR happening only on reload? If I bring down the server and start it over, and trigger a full reload in the browser with Ctrl + F5 it still happens on the first load It happens with JSX but not JS

lxsmnsyc•7mo ago

No I'm talking about the compilation for HMR to work with SolidJS. Also, HMR doesn't happen on "reload". HMR and reload are two separate things

coz•7mo ago

Oooh Thanks for the info

Gaming

Programming

What is JSX's hoisting behavior?