Why does this loop infinitely
The following code calls serverFunc endlessly
But if I change it to
it no longer loops. The two should be functionally identical. So why does the IIFE cause an infinite loop?
export default function Test() {
const [people, setPeople] = createStore([
{ id: '19' },
{ id: '11' },
]);
const serverFunc = async (id: string): Promise<string> => {
'use server';
console.log('running serverFunc');
return 'Not Found';
};
return (
<For each={people}>
{(person, index) => {
return (
<div>
{index() + 1}: {person.id}
<span>{createAsync(() => serverFunc(person.id))()}</span>
</div>
);
}}
</For>
);
}export default function Test() {
const [people, setPeople] = createStore([
{ id: '19' },
{ id: '11' },
]);
const serverFunc = async (id: string): Promise<string> => {
'use server';
console.log('running serverFunc');
return 'Not Found';
};
return (
<For each={people}>
{(person, index) => {
return (
<div>
{index() + 1}: {person.id}
<span>{createAsync(() => serverFunc(person.id))()}</span>
</div>
);
}}
</For>
);
}But if I change it to
<For each={people}>
{(person, index) => {
const response = createAsync(() => serverFunc(person.id));
return (
<div>
{index() + 1}: {person.id}
<span>{response()}</span>
</div>
);
}}
</For> <For each={people}>
{(person, index) => {
const response = createAsync(() => serverFunc(person.id));
return (
<div>
{index() + 1}: {person.id}
<span>{response()}</span>
</div>
);
}}
</For>it no longer loops. The two should be functionally identical. So why does the IIFE cause an infinite loop?
