Import useEffect normally (#5501)

The `Layout` isn't wrapped in an ErrorBoundary, and this particular usage of
`useEffect` seems to trip up HMR in the sandbox when replacing the app code.
Instead, use a direct named import, which might be handled more nicely in vite.

Author: masenf

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -34,7 +34,7 @@ function AppWrap({children}) {
 
 
 export function Layout({children}) {
-    React.useEffect(() => {
+    useEffect(() => {
     // Make contexts and state objects available globally for dynamic eval'd components
     let windowImports = {
 {% for library_alias, library_path in  window_libraries %}

reflex/compiler/compiler.py

@@ -37,7 +37,9 @@ def _apply_common_imports(
     imports: dict[str, list[ImportVar]],
 ):
     imports.setdefault("@emotion/react", []).append(ImportVar("jsx"))
-    imports.setdefault("react", []).append(ImportVar("Fragment"))
+    imports.setdefault("react", []).extend(
+        [ImportVar("Fragment"), ImportVar("useEffect")],
+    )
 
 
 def _compile_document_root(root: Component) -> str: