Updating parent component state causes child to lose state

[nmathew98]

Describe the bug

The parent component renders a list of buttons (Child) which if clicked displays a dialog. If the child then updates state in the parent, the dialog is closed.

Your Example Website or App

https://github.com/nmathew98/qwery/blob/dev/packages/example-solid/src/App.tsx#L191

Steps to Reproduce the Bug or Issue

1. Create a thread
2. Click 'View whole thread'
3. Share a thought
4. Reply to the thought
5. Result: Dialog closes but reopening the dialog, the reply is there
6. Expected result: Dialog does not close

Expected behavior

The dialog should not close when the parent state is updated

Screenshots or Videos

Screen.Recording.2024-03-30.at.2.35.56.PM.mov

Platform

• OS: macOS Sonoma 14.4
• Browser: Safari
• Version: 17.4

Additional context

• The GitHub repo is not a minimal example but the issue as far as I've checked the issue does not stem from the third party state management library which is being used

• Components used are shadcn solid which are built upon Kobalte

• Data is being updated correctly, just the Child is losing its state

• Problematic line is here: https://github.com/nmathew98/qwery/blob/dev/packages/example-solid/src/App.tsx#L191 which causes state in the parent to update

[birkskyum]

My recommendation would be to start cutting away as much as possible to narrow down further if this relates to the kobalte Dialog implementation, solid-js, or something else.

[nmathew98]

will get to it, its a rabbit hole I didn't want to go down haha. don't feel like it'll be a kobalte related issue because solid is doing the rerender when state in parent changes

for reference, there is an also an implementation done in react and vue which uses the same application logic which is working fine

[ryansolid]

Given the way Solid works, ie without doing re-renders something has to be causing the re-render for the child to lose state. A VDOM framework like React or Vue would do this re-render without you noticing even if it could possibly avoid it but that isn't the case in Solid. So something that seems to work in Vue or React may not even be working optimally and you wouldn't know. Since Solid's re-render works purely on reactive tracking it does more than likely come down to how something is wired together and to understand that would likely require following the path.

That being said working bottom up sometimes is easier or us than top down. Ie tracing up to what re-runs when we don't expect it to. Often you will find you are tracking something you didn't intend.

[nmathew98]

Given the way Solid works, ie without doing re-renders something has to be causing the re-render for the child to lose state. A VDOM framework like React or Vue would do this re-render without you noticing even if it could possibly avoid it but that isn't the case in Solid. So something that seems to work in Vue or React may not even be working optimally and you wouldn't know. Since Solid's re-render works purely on reactive tracking it does more than likely come down to how something is wired together and to understand that would likely require following the path.

That being said working bottom up sometimes is easier or us than top down. Ie tracing up to what re-runs when we don't expect it to. Often you will find you are tracking something you didn't intend.

okok thanks for that, haven't had time to dig into this yet, but will get time over the weekend. last time something like this (reactivity behaving weirdly) cropped up with svelte (which I think is closer to solid than vue or react) it was likely due to the slot being nested which was a known bug (stripped out the component library and things were working again and then went from there)