SolidJS•7mo ago

Whole page component rerenders in default Solid-Start project

When I'm trying to use input field, the whole page rerender after loading data from resource, causing input to lost focus. How to reproduce: 1. Start new solid start project ( pnpm create solid && pnpm install) 2. create does-rerender route: ( file: src/routes/does-rerender.tsx): (it's from tutorial)

import { createSignal, createResource } from "solid-js";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

const DoesRerender = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

import { createSignal, createResource } from "solid-js";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

const DoesRerender = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

3. Start server: pnpm dev After typing 1 Luke Skywalker record is shown, but whole page rerenders and input does lost focus

4 Replies

mdynnl•7mo ago

There's a Suspense boundary at app.tsx and it's rendering fallback because user resource is accessed and reloads in response to userId getting set, which is expected. If you need to contain the resource, simply wrap it with another Suspense boundary.

<Suspense fallback="now this will be hit instead of the root one">
  <pre>{JSON.stringify(user(), null, 2)}</pre>
</Suspense>

<Suspense fallback="now this will be hit instead of the root one">
  <pre>{JSON.stringify(user(), null, 2)}</pre>
</Suspense>

dswistowskiOP•7mo ago

🤦‍♂️ sometimes I'm so stupid, makes sense, will try 🍰

mdynnl•7mo ago

that's most of us sometimes 🤣

dswistowskiOP•7mo ago

works as expected now 🙂 thanks again for help

Gaming

Programming

Whole page component rerenders in default Solid-Start project