fix: make react block renders in sync with canvas

[marshallern]

Problem

When a block is dragged, react-rendered block is slightly late to the actual state of the block position, it is not in-sync and while dragging appears a jelly effect.

You can see this effect by opening storybook and set 10000 blocks. It appears clearly enough when you drag a block with a link.

Why it happens

Current code uses useBlockState and inside of it useSignal, which updates state by using setState. React may postpone the render after setState, so this is why it may not be in-sync with the actual state.

Solution

Instead of calling setState and waiting for React to render we subscribe directly to state.$geometry and mutate styles synchronously.

[marshallern]

I hereby agree to the terms of the CLA available at: https://yandex.ru/legal/cla/?lang=ru.

[gravity-ui-bot]

Preview is ready.

[draedful]

Hi, thanks for the contribution. I need more time to check that this change really affects performance. But right off the bat, it seems to me that your approach really should be faster and cause fewer re-renders.

I'll take a closer look at PR in the near future.