Handling Stale State Values in Event Handlers with Editor.subscribe

[trentduncan]

Hi all,

I'm working on integrating this feature into our codebase and have encountered some interesting behavior that I'd like to get feedback on from others.

Problem:
When setting up the on change event listener (editor.subscribe("change", handler)), the handler function captures state values at the time the handler is instantiated. This means that if any state values change after that, the handler will still reference the stale state values it captured during initialization.

Here is an example of the problem:

import { useState } from "react";
import { StandaloneStructServiceProvider } from "ketcher-standalone";
import { Editor } from "ketcher-react";

const structServiceProvider = new StandaloneStructServiceProvider();

export default function SimpleTest() {
  const [ketcherInstance, setKetcherInstance] = useState(null);
  const [count, setCount] = useState(0);

  const handleDrawingChange = async (data) => {
    console.log("Ketcher instance On Change", ketcherInstance); // this stays as null
    console.log("count", count); // count remains 0 even after clicking the button
  };

  async function handleOnInitKetcher(ketcher) {
    ketcher.editor.subscribe("change", handleDrawingChange);

    setKetcherInstance(ketcher);
  }

  return (
    <div style={{ height: "300px" }}>
      <Editor
        key={"key"}
        staticResourcesUrl={""}
        structServiceProvider={structServiceProvider}
        errorHandler={(err) => console.log(err)}
        onInit={handleOnInitKetcher}
      />
      <button onClick={() => setCount(count + 1)}>Save</button>
    </div>
  );
}

Potential Solution:
The only solution I can think of is to use refs for the state values. However, this feels like a "sloppy" solution because it leads to splitting state and this becomes a problem as more state values are required by the onChange handler. This can quickly become hard to maintain and error-prone.

I'd love to hear how others are solving this issue, or if there's a better approach to ensure that the event handler always has access to the most up-to-date state values.