useUpdateNodeInternals doesn't update edges after moving handles

Describe the Bug

I move my component handles around dynamically. The edges to those handles don’t move, and any additional attempt to connect edges to the moved handles fails, the edges get connected to the wrong place. I’m using useUpdateNodeInternals but it doesn’t work as I would expect.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

I have a custom handle component like this:

const CustomHandle = ({ nodeId, id, handleIndex, ...props }: any) => {
  const updateNodeInternals = useUpdateNodeInternals();
  useEffect(() => {
      updateNodeInternals(nodeId);
  }, [nodeId, updateNodeInternals, handleIndex, id]);

  return <Handle id={id} {...props} />;
};

this is to try to force the edges to update correctly after I move handles around. I render it like this:

{data.inputs.map((input, index) => (
          <React.Fragment key={input.name}>
            <div
              className="react-flow_handle_label"
              style={{
                top: `${handleTop - textHeight + index * 20}px`,
                left: 15,
              }}
            >
              {input.name}
            </div>
            <CustomHandle
              handleIndex={index}
              nodeId={id}
              id={input.name}
              className={cx({ validTarget: input.validTarget })}
              type="target"
              position={Position.Left}
              style={{ top: `${handleTop + index * 20}px` }}
            />
          </React.Fragment>
        ))}

Expected behavior

In this case the effect fires, but the edge does not get moved to the right place. The edge stays stuck to the stale handle even after the handles update and the effect runs.

Sadly, this works:

const CustomHandle = ({ nodeId, id, handleIndex, ...props }: any) => {
  const updateNodeInternals = useUpdateNodeInternals();
  useEffect(() => {
    setTimeout(() => {
      updateNodeInternals(nodeId);
    }, 0);
  }, [nodeId, updateNodeInternals, handleIndex, id]);

  return <Handle id={id} {...props} />;
};

the settimeout indicates to me there’s some state/updating issue going on.

Screenshots or Videos

No response

Platform

Mac Chrome 10.0.3

Additional context

Related to https://github.com/wbkd/react-flow/issues/916

Discord convo starts here https://discord.com/channels/771389069270712320/859774873500778517/956236629603926046

As a consumer of react-flow, useUpdateNodeInternals is the first part of the API I personally find “ugly” - it’s an imperative manual user step and it’s unclear when it should be fired, and this issue indicates to me it’s exposing some state update ordering that the end consumer shouldn’t have to worry about. Also this is not something obvious to google for, I didn’t discover it in the docs myself, someone in discord pointed me to this API. Ideally updating handles would “just work” out of the box.

[AndrewRayCode]

I don’t animate the position of anything in my graph. I have some css animations which animate the opacity of drop shadows and border colors when dragging connection lines to indicate which targets are droppable, but I don’t think that’s what you mean

[onlaps]

having same problem with repositioning edge when node’s size is chaning