Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug?]: Reactivity is paused / behaves weird while the next page is loading #1090

Closed
2 tasks done
illiaChaban opened this issue Oct 22, 2023 · 1 comment
Closed
2 tasks done

[Bug?]: Reactivity is paused / behaves weird while the next page is loading #1090

illiaChaban opened this issue Oct 22, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@illiaChaban
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

Behavior for reactivity is different between solid-js SPA and solid-start during navigating between pages.
Here's codesandbox for normal solid-js behavior and here's the same code translated to solid-start (below)

When you navigate between pages for the first time, the "exit count" inside a normal version results in "2", while in solid start it results in "1". Also there's a delay between "set" action and when this action is logged inside the "createEffect". In solid start version (code below), "setExitCount(...)" line inside "onExit" callback seems to get delayed until (i'm assuming until "done" is called inside "onExit" callback or when "onEnter" is called).

What's curious if "setExitCount" is wrapped in "setTimeout(..., 0)", it executes much faster than normal inline version. It makes me think that there's some manual reactivity delay going on

I'd expect the exact same behavior in both cases

// @refresh reload
import { Suspense, createEffect, createSignal, lazy } from "solid-js";
import {
  Body,
  ErrorBoundary,
  Head,
  Html,
  Meta,
  Scripts,
  Title,
  useLocation,
} from "solid-start";
import { Transition } from "solid-transition-group";

const Home = lazy(() => import("./routes/index"));
const TestScale = lazy(async () => {
  await wait(2000);
  return import("./routes/test-scale");
});

export default function Root() {
  const location = useLocation();
  const [enterCount, setEnterCount] = createSignal(0);
  const [exitCount, setExitCount] = createSignal(0);

  createEffect(() => {
    console.log({ exitCount: exitCount() });
  });

  return (
    <Html lang="en">
      <Head>
        <Title>SolidStart - With TailwindCSS</Title>
        <Meta charset="utf-8" />
        <Meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body class="overscroll-none">
        <Suspense>
          <ErrorBoundary>
            <div>
              <p>Exit count: {exitCount()}</p>
              <p>Enter count: {enterCount()}</p>
              <Transition
                onEnter={(el, done) => {
                  setEnterCount((v) => v + 1);
                  done();
                }}
                onExit={async (el, done) => {
                  setExitCount((v) => v + 1);
                  await wait(1000);
                  setExitCount((v) => v + 1);
                  done();
                }}
              >
                {location.pathname === "/" ? <Home /> : <TestScale />}
              </Transition>
            </div>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

const wait = (time = 0) => new Promise((res) => setTimeout(res, time));

Expected behavior 🤔

Same behavior as in normal solid-js version with synchronous callbacks and effects

Steps to reproduce 🕹

Steps:

  1. Navigate to codesandbox and observe normal solid-js behavior
  2. Try to replicate the same with solid-start (copy code above)
  3. Observe weird reactivity issue during page navigate

Context 🔦

No response

Your environment 🌎

"devDependencies": {
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.28",
    "solid-start-node": "^0.3.6",
    "tailwindcss": "^3.3.3",
    "typescript": "^4.9.5",
    "vite": "^4.4.9"
  },
  "dependencies": {
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "pipe-ts": "^0.0.9",
    "solid-js": "^1.7.12",
    "solid-start": "^0.3.6",
    "solid-start-static": "^0.3.6",
    "solid-transition-group": "^0.2.3"
  },
  "engines": {
    "node": "18"
  }
@illiaChaban illiaChaban added the bug Something isn't working label Oct 22, 2023
@ryansolid
Copy link
Member

This is called a Transition. The router bakes them in. https://www.solidjs.com/tutorial/async_transitions. You can use useRouting to observe this state change in regards to the router or nest Suspense to break out of it.

In setting up for SolidStart's next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed by mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ryansolid @illiaChaban