SolidJS•3d ago

Any way to redo this logic without an infinite loop?

I have a page where I'm getting data from a createAsync and then dynamically rendering this in a <Show/>, however, to get the data to get guaranteed instead of possibly undefined I have to use the render prop, which goes into an issue shown here: https://github.com/solidjs/solid/issues/1149. Essentially I cannot use a <For/> loop inside this, as I get an infinite loop - I have to use an <Index/> loop. Is there some other way to do this pattern or am I basically stuck using <Index/>? To be clear, the issue seems to be in the same component. If I have a child component that uses a <For/> it doesn't seem to cause an infinite loop. Is the only solution other than exclusively using an Index making a page component that is independent of the route?

GitHub

Issues · solidjs/solid

A declarative, efficient, and flexible JavaScript library for building user interfaces. - Issues · solidjs/solid

8 Replies

quinnvaughnOP•3d ago

To be clear on the last part of the question, I meant something like

type DataType = { id: number; name: string };

const DataList = (props: { data: DataType[] }) => (
  <For each={props.data}>
    {(item) => <div>{item.name}</div>}
  </For>
);

const App = () => {
  const [data] = createResource<DataType[]>(async () => {
    const response = await fetch("/api/data");
    return response.json();
  });

  return (
    <Show when={data()} fallback={<p>Loading...</p>}>
      {(data) => <DataList data={data} />}
    </Show>
  );
};

type DataType = { id: number; name: string };

const DataList = (props: { data: DataType[] }) => (
  <For each={props.data}>
    {(item) => <div>{item.name}</div>}
  </For>
);

const App = () => {
  const [data] = createResource<DataType[]>(async () => {
    const response = await fetch("/api/data");
    return response.json();
  });

  return (
    <Show when={data()} fallback={<p>Loading...</p>}>
      {(data) => <DataList data={data} />}
    </Show>
  );
};

I'd rather not do that if I don't have to and just keep the page inside the route. (this is ChatGPT code it's not actually the code I have - I'm using createAsync not createResource)

REEEEE•3d ago

It should work fine I think. Do you have code example of what your code looks like now? I can't tell what the issue is from the description

quinnvaughnOP•3d ago

Basically if I have a for loop directly inside the Show render prop component (as opposed to inside it but in another component) I'm getting infinite loops, and only the <Index/> is working. Could that be a different issue, like what I'm actually looping over?

quinnvaughnOP•3d ago

So take this one, which is inside the <Show/>, I had to switch it from a <For/> because it was basically crashing.

peerreynders•3d ago

Perhaps something else is going on. This doesn't cause an infinite loop:

// file: src/routes/about.tsx
import { For, Show } from 'solid-js';
import { createAsync } from '@solidjs/router';
import { Title } from '@solidjs/meta';

type DataType = { id: number; name: string };

async function getData() {
  'use server';
  await new Promise((resolve) => setTimeout(resolve, 300));

  return [
    { id: 0, name: 'zero' },
    { id: 1, name: 'one' },
    { id: 2, name: 'two' },
  ];
}

export default function About() {
  const data = createAsync(getData);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Show when={data()}>
        {(items) => (
          <For each={items()}>{(item) => <div>{item.name}</div>}</For>
        )}
      </Show>
    </main>
  );
}

// file: src/routes/about.tsx
import { For, Show } from 'solid-js';
import { createAsync } from '@solidjs/router';
import { Title } from '@solidjs/meta';

type DataType = { id: number; name: string };

async function getData() {
  'use server';
  await new Promise((resolve) => setTimeout(resolve, 300));

  return [
    { id: 0, name: 'zero' },
    { id: 1, name: 'one' },
    { id: 2, name: 'two' },
  ];
}

export default function About() {
  const data = createAsync(getData);

  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <Show when={data()}>
        {(items) => (
          <For each={items()}>{(item) => <div>{item.name}</div>}</For>
        )}
      </Show>
    </main>
  );
}

quinnvaughnOP•3d ago

Certainly possible. This is a relatively complex form page and I can try removing some things and give some updates. It could also be a @felte/solid issue, I don't want to rule that out.

REEEEE•3d ago

Oh it's definitely a felte thing I had this issue in a project use data('propertyName') instead of data().propertyName same thing with errors

quinnvaughnOP•3d ago

I'll test this out and let you know, thanks. Still do find it generally easier to work with than modular forms though, I really hated getValues() returning possibly undefined values and having to use a render prop component everywhere

Gaming

Programming

Any way to redo this logic without an infinite loop?

Did you find this page helpful?