S
SolidJS•2y ago
dswistowski

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
mdynnl•2y 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>
dswistowski
dswistowskiOP•2y ago
🤦‍♂️ sometimes I'm so stupid, makes sense, will try 🍰
mdynnl
mdynnl•2y ago
that's most of us sometimes 🤣
dswistowski
dswistowskiOP•2y ago
works as expected now 🙂 thanks again for help

Did you find this page helpful?