Is it possible to store a React reference inside the Store?

[ZhengRui]

Thanks for the great lib, I am a happy user of zustand for half a year already. Now I am facing a case that I want to share some refs among different custom hooks. I know how to share refs among components using forwardRef, but I am not clear how to share them amongs hooks.

I thought of using zustand, but I prefer not using setters to change their values because I don't want to cause a rerender. So is it possible to use zustand to store refs so they become global?

[dai-shi]

Essentially, it's just a JS variable, so you can store anything.
I'm not sure if storing refs globally can go wrong, in terms of its usage.

[ZhengRui]

I tried, it doesn't work. It gives Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

The initialization of the store (contains useRef) failed, which makes sense. If I understand correctly, the store initialization is outside of React context causing useRef failed.

[dai-shi]

I'm not sure about the goal, and I don't usually use refs, but does createRef help? Maybe using it isn't good practice.

[ZhengRui]

Here is my store:

import { fabric } from 'fabric';
import React, { useRef, createContext } from 'react';
import { createStore, State, StoreApi } from 'zustand';

interface StoreData extends State {
  lastPosition: React.MutableRefObject<fabric.Point>;
  origPosition: React.MutableRefObject<fabric.Point>;
  isPanning: React.MutableRefObject<boolean>;
  isDrawing: React.MutableRefObject<boolean>;
  isEditing: React.MutableRefObject<boolean>;
  isObjectMoving: React.MutableRefObject<boolean>;
}

const StoreDataDefault = {
  // lastPosition is relative mouse coords on the viewport,
  // e.g. top-left is always (0,0)
  lastPosition: useRef<fabric.Point>(new fabric.Point(0, 0)),
  // origPosition is absolute coords on the canvas,
  // e.g. top-left of image is always (offset.x, offset.y)
  origPosition: useRef<fabric.Point>(new fabric.Point(0, 0)),
  isPanning: useRef<boolean>(false),
  isDrawing: useRef<boolean>(false),
  isEditing: useRef<boolean>(false),
  isObjectMoving: useRef<boolean>(false),
};

interface Store extends StoreData {}

const store = createStore<Store>((set) => ({
  ...StoreDataDefault,
}));

const StoreContext = createContext<StoreApi<Store>>(store);

export {
  Store as ListenerStoreProps,
  store as ListenerStore,
  StoreContext as ListenerStoreContext,
};

My usecase is that I have multiple custom hooks that each will return a set of fabric canvas event listeners, and all these listeners from different hooks share states e.g. isPanning. Previously it was one big hook in a single file that contains all listeners, now I split it into different files each file contains one hook returning a subset of listeners.

Yeah, i think put ref inside the store is not a good practice.

[ZhengRui]

CreateRef works! After I update the implementation into something like this, it works as I wanted, thanks @dai-shi for your hint.

import { fabric } from 'fabric';
import React, { createRef, createContext } from 'react';
import { createStore, State, StoreApi } from 'zustand';

interface StoreData extends State {
  isPanning: React.MutableRefObject<boolean>;
}

let isPanning = createRef<boolean>() as React.MutableRefObject<boolean>;
isPanning.current = false;

const StoreDataDefault = {
isPanning
};

interface Store extends StoreData {}

const store = createStore<Store>((set) => ({
  ...StoreDataDefault,
}));

const StoreContext = createContext<StoreApi<Store>>(store);

export {
  Store as ListenerStoreProps,
  store as ListenerStore,
  StoreContext as ListenerStoreContext,
};

[ZhengRui]

i would say it works pretty well for me, i didnt encounter unexpected behaviors.

[dannobytes]

I think if you use the immer middleware, you'd get issues with that ref. Because immer enforces immutability on the state object itself, you'd get this error.

[dbritto-dev]

@dannobytes yeah, that's why you need a func to set that up instead of trying to mutate the ref directly basically you need to use callback ref to do that

[dbritto-dev]

Hey peeps, here you go -> #1833 (reply in thread)

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

#1833 (comment)

[aboveyunhai]

Since React cannot capture the custom event dispatch without the direct reference
see this discussion regarding the issue first: https://stackoverflow.com/questions/60927150/react-dispatch-and-listen-to-custom-events.

Custom event becomes useless inside React because of the moment we need it is simply because we cannot grab the reference as props easily.
So the idea of "if we can lift up the target reference into zustand store, so we can dispatch event else where, and without registering event listener to window" came up.

And this is something that seems like you can use useEffect to solve but technically it's a event firing on demand by user instead of listen to a specific variable. Where the useEffect solution can create tons of potential issues because it will execute upon first render or multiple renders.

I just created an idea here for anyone interests how to do it.
It's not elegant, unReact since we are hitting the boundary of React, it's for some extreme cases hence 99.99% of the times you should never do it.

example-store.ts

export type EventState = {
  eventRef: RefObject<HTMLDivElement>; //<== change the HTMLDivElement to whatever fits your need
  setEventRef: (eventRef: RefObject<HTMLDivElement>) => void;
};

export const useEventStore = create<EventState>()((set) => ({
  eventRef: { current: null },
  setEventRef: (eventRef) => set({ eventRef }),
}));

dispatch-event-component

(where you want to dispatch the event that is extremely far far far away from the one registers to the event)

const DispatchEventComp = () => {
  const { eventRef } = useEventStore();
  const handleClick = () => { 
     eventRef?.current?.dispatchEvent(
        new CustomEvent("custom-event", {
          bubbles: true,
          detail: { data: "whatever you want" },
        })
      );
   }
  return <div><button onClick={handleClick}></button></div>
 }

register-event-component

(the ugly part)

Note: localRef and eventRef are probably different objects as time passes by, the main purpose is to bind the event function, and then make change based on the event dispatch, you should not expect to modify localRef by changing eventRef directly. Instead add more event listener functions to it.

const RegisterEventComp = () => {
  const { eventRef, setEventRef } = useEventStore();
 // for example if we want to wait for the complex item that only exposes the ref, let assume it's a HTMLDivElement here
  const localRef = useRef<HTMLDivElement>(null);

  const customFunc = useCallback(
    (event: Event) => {
      const { data } = (event as CustomEvent<{ data?: WhateverType }>)?.detail;
      if (data) {
       // do whatever you want 
      // maybe localRef.current.update(data); ?
      }
    },
    []
  );

 // wait until target localRef is ready
  useEffect(() => {
    if (localRef?.current) {
     setEventRef(localRef);
    }   
  }, [setEventRef])

 // start to register event
  useEffect(() => {
    if (eventRef?.current) {
      const eRef = eventRef.current;
      eRef.addEventListener("custom-event", customFunc);
      return () => {
        // Remove the event listeners
        eRef.removeEventListener("custom-event", customFunc);
      };
    }
  }, [eventRef, customFunc]);

  return <div ref={localRef}>whatever it is</div>
}

[sannajammeh]

This is working quite well for us

export const useLoginModal = create<LoginModalStore>((set) => ({
  open: false,
  setOpen: (open) => set({ open }),
  ref: createRef<HTMLDialogElement>()
}));