Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix solid reactivity #427

Merged
merged 2 commits into from
Apr 4, 2024
Merged

Fix solid reactivity #427

merged 2 commits into from
Apr 4, 2024

Conversation

imascha
Copy link
Contributor

@imascha imascha commented Apr 3, 2024

fix #425

The reactivity seems to break inside the RangedFor component.
With this change each item is passed as a function instead of as a value to the render function, which seems to fix the problem, without having to change the api of the library. I sadly don't know enough about solid to find out why passing it as a value is not working.

To fix the reactivity when using createStore instead of createSignal, like in the following example:

const App: Component = () => {
  const [data, setData] = createStore(Array.from({ length: 100000 }, (v, i) => i));
  return (
    <>
      <button onClick={() => {
        setData(10, prev => prev * 2)
        }}>
        Update data
      </button>
      <VList data={data} style={{ height: "800px" }}>
        {(item, i) => (
          <div>
            {item}
          </div>
        )}
      </VList>
    </>
  );
}

The untrack() call inside the RangedFor had to be removed. I think that this change can cause some unnecessary rerenders, but i could not notice any worse performance even when rendering lists with 100k+ elements.

Not sure if this pull request is going to be helpful, since i could not find out the reasons why these changes have to be made, or if there are better alternatives, but i think this could be a good enough solution to the problem until somebody with more experience in solid can fix this.

Copy link
Owner

@inokawa inokawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@inokawa inokawa merged commit 7d44687 into inokawa:main Apr 4, 2024
4 checks passed
takecchi referenced this pull request in cuculus-dev/cuculus Apr 8, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [virtua](https://togithub.com/inokawa/virtua) | [`0.29.1` ->
`0.29.2`](https://renovatebot.com/diffs/npm/virtua/0.29.1/0.29.2) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/virtua/0.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/virtua/0.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/virtua/0.29.1/0.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/virtua/0.29.1/0.29.2?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

@coderabbitai: ignore

---

### Release Notes

<details>
<summary>inokawa/virtua (virtua)</summary>

### [`v0.29.2`](https://togithub.com/inokawa/virtua/releases/tag/0.29.2)

[Compare
Source](https://togithub.com/inokawa/virtua/compare/0.29.1...0.29.2)

#### What's Changed

- Add collapse and remove storybook by
[@&#8203;aeharding](https://togithub.com/aeharding) in
[https://github.com/inokawa/virtua/pull/416](https://togithub.com/inokawa/virtua/pull/416)
- Update FAQ section by [@&#8203;inokawa](https://togithub.com/inokawa)
in
[https://github.com/inokawa/virtua/pull/421](https://togithub.com/inokawa/virtua/pull/421)
- Fix solid reactivity by
[@&#8203;imascha](https://togithub.com/imascha) in
[https://github.com/inokawa/virtua/pull/427](https://togithub.com/inokawa/virtua/pull/427)

#### New Contributors

- [@&#8203;imascha](https://togithub.com/imascha) made their first
contribution in
[https://github.com/inokawa/virtua/pull/427](https://togithub.com/inokawa/virtua/pull/427)

**Full Changelog**:
inokawa/virtua@0.29.1...0.29.2

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/cuculus-dev/cuculus).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Solidjs VList reactivity not working
2 participants