SolidJS•2w ago

How to handle reactivity in this example?

Hello. I have a Project type I have a context provider that provides the store of Project. So in my components I grab it like so - const { project, setProject } = useProject(). I have a separate components that is supposed to render project.nodes and it uses SortableJS. This component grabs project store from context and then renders items inside a custom Sortable component. It all works fine, until I try to update the state on reorder. This is how I update my store:

  const handleOrderUpdate = (ids: string[]) => {
    const updated = ids.map((id) => {
      return project.nodes.find((node) => String(node.id) === id)!;
    });

    setProject('nodes', reconcile(updated, { key: 'id' }));
  };

  const handleOrderUpdate = (ids: string[]) => {
    const updated = ids.map((id) => {
      return project.nodes.find((node) => String(node.id) === id)!;
    });

    setProject('nodes', reconcile(updated, { key: 'id' }));
  };

When I do this, there is a visual glitch where the new order is being set, but it is reverted straight away. On the subsequent reorder, the correct order is set. But the 3rd one is also a glitch and etc. To solve this, I have to do the following:

const { project, setProject } = useProject();
const [nodes] = createSignal(nodes);

const { project, setProject } = useProject();
const [nodes] = createSignal(nodes);

Am I doing something wrong or this is the way to go?

2 Replies

bigmistqke•2w ago

If you could make a minimal reproduction in the playground I could have a look at it! External libraries (mostly) work in the playground.

BraviOP•2w ago

I think I figured it out. I think the problem is that since SortableJS changes the order, For is unable to track these changes properly. I came across this: https://gist.github.com/Legend-Master/527e0afcf9ce4621361bc00a994c50f5 and I've updated my code accordingly and it seems to work so far

Gaming

Programming

How to handle reactivity in this example?