useMount$ Double render & no render

[GregOnNet]

Qwik Version

0.0.34

Operating System (or Browser)

Mac

Node Version (if applicable)

16

Which component is affected?

Qwik Runtime

Expected Behaviour

• Renders content once

Actual Behaviour

• The content gets either rendered twice or not at all.

https://user-images.githubusercontent.com/444278/178813577-7cf2d9dc-346d-41d4-a89b-e293c6497d02.mp4

Additional Information

Reproduction

git clone https://github.com/GregOnNet/kanban-board
cd kanban-board

git checkout bug/double-render

npm install

# Console 1
npm run dev

# Console 2
npm run api:start

# Open Browser at http://localhost:3000
# Open DevTools (Cache disabled)
# Reload the page several times
# Notice that sometimes the six instead of three lists are displayed
# Notice that sometimes no list is displayed

[manucorporat]

Try to update to latest 0.0.36 we have introduced changes to make authoring of custom events simpler:

diff --git a/src/board/kanban-board-list-card-form.tsx b/src/board/kanban-board-list-card-form.tsx
index 53cdc5f..5a3ea4a 100644
--- a/src/board/kanban-board-list-card-form.tsx
+++ b/src/board/kanban-board-list-card-form.tsx
@@ -1,9 +1,9 @@
-import { component$, Host, QRL, useStore } from '@builder.io/qwik'
+import { component$, Host, PropFunction, useStore } from '@builder.io/qwik'
 import { CardDraft, List } from './models'

 export interface CardProps {
   list: List
-  onClickCreateQrl?: QRL<(card: CardDraft) => void>
+  onClickCreate$?: PropFunction<(card: CardDraft) => void>
 }

 export const KanbanBoardListCardForm = component$((props: CardProps) => {
@@ -22,7 +22,7 @@ export const KanbanBoardListCardForm = component$((props: CardProps) => {
         }
       />
       <button
-        onClick$={async () => await props.onClickCreateQrl?.invoke(cardDraft)}
+        onClick$={async () => await props.onClickCreate$?.(cardDraft)}
       >
         Create
       </button>
diff --git a/src/board/kanban-board-list-card.tsx b/src/board/kanban-board-list-card.tsx
index 30f3608..bf5ec51 100644
--- a/src/board/kanban-board-list-card.tsx
+++ b/src/board/kanban-board-list-card.tsx
@@ -1,17 +1,17 @@
-import { component$, Host, QRL } from '@builder.io/qwik';
+import { component$, Host, PropFunction } from '@builder.io/qwik';
 import { Card } from './models';

 export interface CardProps {
   card: Card;
-  onClickRemoveQrl?: QRL<(card: Card) => void>;
+  onClickRemove$?: PropFunction<(card: Card) => void>;
 }

 export const KanbanBoardListCard = component$(
-  ({ card, onClickRemoveQrl }: CardProps) => {
+  ({ card, onClickRemove$ }: CardProps) => {
     return (
       <Host class="card">
         <p>{card.text}</p>
-        <button onClick$={async () => await onClickRemoveQrl?.invoke(card)}>
+        <button onClick$={async () => await onClickRemove$?.(card)}>
           DELETE
         </button>
       </Host>
diff --git a/src/board/kanban-board-list.tsx b/src/board/kanban-board-list.tsx
index 38dbf02..e899459 100644
--- a/src/board/kanban-board-list.tsx
+++ b/src/board/kanban-board-list.tsx
@@ -36,7 +36,7 @@ export const KanbanBoardList = component$((props: KanbanListProps) => {
       <KanbanBoardListCardForm
         list={props.list}
         onClickCreate$={async cardDraft =>
-          await createCardFromDraft.invoke(cardDraft)
+          await createCardFromDraft(cardDraft)
         }
       ></KanbanBoardListCardForm>

@@ -45,7 +45,7 @@ export const KanbanBoardList = component$((props: KanbanListProps) => {
           key={card.id}
           card={card}
           onClickRemove$={async cardForRemoval =>
-            await removeTodoFromList.invoke(cardForRemoval)
+            await removeTodoFromList(cardForRemoval)
           }
         ></KanbanBoardListCard>
       ))}

``

[GregOnNet]

Solved in 0.036. Thank you very much.

Thank you for the hint concerning PropFunction! It works.

[manucorporat]

Hope the new syntax for custom props feels more natural and less magic!

[GregOnNet]

Yes it is a big improvement. Thank you.

Viele Grüße Gregor Woiwode Twitter https://twitter.com/GregOnNet, Medium @.***>, YouTube https://youtube.com/GregOnDevNet, GitHub https://github.com/GregOnNet.

📱 +49175 520 9316 📫 @.*** 🏡 William-Zipperer Str. 73, 04177 Leipzig

On Thu, 14 Jul 2022 at 12:19, Manu MA @.***> wrote:

Hope the new syntax for custom props feels more natural and less magic!

— Reply to this email directly, view it on GitHub https://github.com/BuilderIO/qwik/issues/762#issuecomment-1184265901, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADMO5RIGO66DTLQZIJ4WSDVT7SUTANCNFSM53PZIEZA . You are receiving this because you modified the open/close state.Message ID: @.***>