EXAMPLE: Sending custom messages from Python to React-based widget

[kolibril13]

Here's an example to send messages.

c.send('Hello World')

export const render = createRender(() => {
  const [value, setValue] = useModelState("value");
  const model = useModel();
  React.useEffect(() => {
    function handle_custom_msg(msg) {
      console.log(msg);
    }
    model.on("msg:custom", handle_custom_msg);
    return () => model.off("msg:custom", handle_custom_msg);
  }, [model]);

  return (
    <button
      className="okapi2-counter-button"
      onClick={() => setValue(value + 1)}
    >
      count is {value}
    </button>
  );
});

[manzt]

I transferred the issue to a discussion because this is for reference and not a bug/issue with anywidget.

I would just include the relevant imports so that it is reproducible with copy-paste. The value isn't really relevant to sending the custom message:

import * as React from "react";
import { createRender, useModel } from "@anywidget/react";

export const render = createRender(() => {
  const model = useModel();
  React.useEffect(() => {
    function handle_custom_msg(msg) {
      console.log(msg);
    }
    model.on("msg:custom", handle_custom_msg);
    return () => model.off("msg:custom", handle_custom_msg);
  }, [model]);
  return <p>Open the console to see custom messages</p>
});

I also find that useEffect can be tricky to understand for new-comers. I find in this case, it can be useful to extract the effect into a separate hook that describes exactly what it does.

import * as React from "react";
import { createRender, useModel } from "@anywidget/react";

function useCustomMessageLogging(filter = () => true) {
  let model = useModel();
  React.useEffect(() => {
    let handle_custom_msg = (msg) => filter(msg) && console.log(msg);
    // subscribe the handler
    model.on("msg:custom", handle_custom_msg);
    // cleanup logic if model/filter change or component is unmounted
    return () => model.off("msg:custom", handle_custom_msg);
  }, [model, filter, event]);
}

export const render = createRender(() => {
  useCustomMessageLogging();
  return <p>Open the console to see custom messages</p>
});

[manzt]

A more "real-world" could be a hook, combined with useState:

function useCustomMessage() {
  let [msg, setMsg] = React.useState(undefined);
  let model = useModel();
  React.useEffect(() => {
    model.on("msg:custom", setMsg);
    return () => model.off("msg:custom", setMsg);
  }, [model]);
  return msg;
}

export const render = createRender(() => {
  let msg = useCustomMessage();
  return msg ? <p>The latest message is {msg}</p> : <p>no messages sent</p>
});

[manzt]

The beauty of hooks is that they compose very well, for example with useDebugValue:

export const render = createRender(() => {
  let msg = useCustomMessage();
  React.useEffect(() => console.log(msg), [msg]); // and effect that logs to the browser console
  React.useDebugValue(msg, msg => JSON.stringify(msg)); // and effect that logs to react dev tools
  return msg ? <p>The latest message is {msg}</p> : <p>no messages sent</p>
});