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

Memoise a bunch of stuff #107

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Conversation

N0tExisting
Copy link

@N0tExisting N0tExisting commented Feb 27, 2024

This PR fixes overly eager execution of effects in components

Warning

I have not yet finished tested this in my project

import { Show, type Component, createEffect } from 'solid-js';
import { createDraggable } from '@thisbeyond/solid-dnd';

export interface CardProps {
  title: string;
  details?: string;
}

const Card: Component<CardProps> = (p) => {
  const drag = createDraggable(p.title);
  // This effect will run even when a different draggable is dragged
  createEffect(() => console.log('Drag State Updated:', drag.isActiveDraggable, id));
  return (
    <article
      use:drag
      k-card={p.title}
      drag-id={id}
      class="rounded-2 border py-2 px-3 dark:(bg-slate-800 border-coolgray) light:(bg-sky-200 border-stone-900) min-h-20"
      classList={{ '-rot-4': drag.isActiveDraggable }}
    >
      <h3 class="text-xl font-bold pb-2">{p.title}</h3>
       <p>{p.details}</p>
    </article>
  );
};

export default Card

Updates:

  • Nothing to update ❎
  • Updated everything ✅
  • Unchecked ❓
File Change
colision.ts
combine-refs.ts
create-dragable.ts
create-dropable.ts
create-pointer-sensor.ts
create-sortable.ts
drag-drop-context.tsx
drag-drop-debugger.tsx
drag-drop-sensors.tsx
drag-overlay.tsx
index.tsx
layout.ts
move-array-item.ts
sortable-context.tsx
style.ts

@danieltroger
Copy link

Appreciate this, since even just taking the sortable list example and rendering 1000 items makes this library unbearably slow.

I built out on this and added a bunch more memoisation and some performance optimisation where I saw using the chrome performance devtools that time was spent, my work is here: https://github.com/danieltroger/faster-solid-dnd/commits/main/, mainly this commit: danieltroger@020c07f

Seems like this lib looks umaintained anyways so I won't bother anymore trying to upstream my changes (for now).It's still too slow, mostly due to the solid stores being slow - dragging around, multiple seconds are spent in there. With no low hanging fruits spotted I'll look for other solutions (was just exploring this lib)

@martinpengellyphillips
Copy link
Contributor

Thanks for taking a look. I think virtualisation support would be the way forward to deal with larger numbers of items.

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.

3 participants