How to best read editor value inside of a callback?

[maclockard]

Previously when Plate used zustand, you could read the value of the editor in a callback like so:

const plateStore = usePlateStore();

const logCurrentValue = useCallback(
  () => {
    console.log(plateStore.get.value());
  },
  [plateStore],
);

This would result in a pretty stable callback reference that can lazily read the current editor value and the component will minimally re-render.

However, after the change to jotai, this will throw an error since plateStore.get.value is now a hook (pretty sure its basically useAtomValue from jotai?).

While you can do something like this:

const value = usePlateStore().get.value();

const logCurrentValue = useCallback(
  () => {
    console.log(value);
  },
  [value],
);

The component will now re-render anytime value changes, which is undesirable.

How should one best lazily read the current editor value inside of a callback? It see the pattern to do this in jotai is to use useAtomCallback, but that requires a reference to the backing atom, which doesn't seem to be exposed in Plate.

[zbeyens]

editor.children refers to the same value:

const editor = useEditorRef()
const value = editor.children

[maclockard]

Ah nice, I've been playing around with that and was wondering if it was "safe" lol. Is it lively even though it's on the editor ref?

[zbeyens]

Yes, Slate maintains a single editor and children reference in its lifetime.