How can i use a ref to my html dom element into the store?

[NirmalRaj-byjus]

In my store,'Remotestream' is a key value pair as below type,

type RemoteStream = {
uid: string;
isVideoEnabled: boolean;
isAudioEnabled: boolean;
name: string;
streamRef: Ref<HTMLDivElement | null> | null;
isVisible: boolean;
isBlocked: boolean;
isPinned: boolean;
isFocused: boolean;
isHandRaised: boolean;
isNew: boolean;
};

In this object, streamRef is a prop contains ref to the div element, so during rendering i need this ref to be attached to the target div element.

But I'm facing below error.

How can i use this.. or whats the effective way of implementing it.

[dbritto-dev]

@NirmalRaj-byjus would you mind sharing us a basic example of your implementation on codesandbox?

[dbritto-dev]

Did you not run into this serialization issue when passing in a very large HTML element object into the store?

It's starting to feel like non-serializable objects are problematic after all, especially when you involve immer + redux devtools middleware 🤔

@dannobytes yeah, that's the expected behavior that's why I wouldn't persist those ref you should always get the latest one on render. So I would exclude those using partialize.

[baishengmei]

Hello senior, I have encountered the same problem. However, the link provided above can no longer be opened. Could you please help me re-enter a link or post a picture? Thank you very much.

[dbritto-dev]

Hello senior, I have encountered the same problem. However, the link provided above can no longer be opened. Could you please help me re-enter a link or post a picture? Thank you very much.

@thesuryavivek sure

[akoncic]

Hi @dbritto-dev , can you re-post your solution? The CodeSandbox link provided before no longer works. Thanks.

[C-o-d-e-C-o-w-b-o-y]

@akoncic here is what worked for me, using ref callbacks:

In my zustand store:

    settingsContainerRef: createRef() as MutableRefObject<HTMLDivElement>,
    setSettingsContainerEl: (element: HTMLDivElement | null) => {
      if (!element) {
        return;
      }
      const newRef = createRef() as MutableRefObject<HTMLDivElement>;
      newRef.current = element;
      set({ settingsContainerRef: newRef });
    },

In my code:

    <div
     ref={setSettingsContainerEl}

hope that helps 🙏

[C-o-d-e-C-o-w-b-o-y]

Here is what worked for me, using ref callbacks:

In my zustand store:

    settingsContainerRef: createRef() as MutableRefObject<HTMLDivElement>,
    setSettingsContainerEl: (element: HTMLDivElement | null) => {
      if (!element) {
        return;
      }
      const newRef = createRef() as MutableRefObject<HTMLDivElement>;
      newRef.current = element;
      set({ settingsContainerRef: newRef });
    },

In my jsx:

    <div
     ref={setSettingsContainerEl}

hope that helps 🙏

[dbritto-dev]

@NirmalRaj-byjus yep, that's the right way using ref callbacks

[dbritto-dev]

just be careful to not to persist that data because is huge you should always get the latest ref from the DOM

[krPlatypus]

To avoid the error "Converting circular structure to JSON", the following tasks are required.

  settingsContainerRef: createRef() as MutableRefObject<HTMLDivElement>,
    setSettingsContainerEl: (element: HTMLDivElement | null) => {
      if (!element) {
        return;
      }
      const newRef = createRef() as MutableRefObject<HTMLDivElement>;
      newRef.current = element;
      set({ settingsContainerRef: newRef });
    },

...
partialize: (state) => {
        const {  settingsContainerRef, ...rest } = state;
        return rest;
      },