I’ve been experimenting using the recently landed LV-JS interop features to render React components inside LiveView. I can simplify my app by doing much with LV but don’t want to rewrite all my existing components yet!

It works pretty well but ran into 2 minor issues. I am rendering the React components modeled on the way GitHub - geolessel/react-phoenix: Make rendering React.js components in Phoenix easy · GitHub does it which is pretty simple. You render a div in the LV with data- properties (props map encoded as JSON) like such:

~L"""
    <div data-react-class="Components.LikeButton" data-react-props="<%= Jason.encode!(@props)%>" phx-hook="React" phx-update="ignore"></div> 
"""

Then in the new LiveView Hooks mounted and updated callbacks in my entrypoint JS I have this:

// ...
import LikeButton from "../zlib/LikeButton.js";

window.Components = {
  LikeButton
};

function renderReact(el, pushEvent) {
  const targetId = document.getElementById(el.dataset.reactTargetId);
  const targetDiv = targetId ? targetId : el;
  const reactProps = el.dataset.reactProps ? el.dataset.reactProps : "{}";
  const reactElement = React.createElement(
    eval(el.dataset.reactClass),
    Object.assign(JSON.parse(reactProps), { pushEvent: pushEvent })
  );
  ReactDOM.render(reactElement, targetDiv);
}

let Hooks = {};
Hooks.React = {
  mounted() {
    this.pushEvent("hello_from_react", "1234"); // THIS WORKS!
    renderReact(this.el, this.pushEvent);
  },
  updated() {
    renderReact(this.el, this.pushEvent);
  }
};

let liveSocket = new LiveSocket("/live", { hooks: Hooks });
liveSocket.connect();

Biggest issue is the use of the pushEvent callback… it works if I use it directly in the mounted function but I want to be able to pass the function as a prop to my React tree so the children components can easily push events to the server. However, when calling it in the React component I am getting Uncaught TypeError: Cannot read property 'pushWithReply' of undefined. I’m sure my lack of JS knowledge has me doing it wrong since I think it’s a method and maybe needs this context hanging around or something?

Second issue is I have to call duplicate renderReact in both the mounted and updated callbacks for everything to work… but the component is re-created and re-rendered every time any LV assigns update (not just props changes affecting this specific element). If I just call in mounted it won’t re-render when the server changes the props so I have to call it in both places. I was thinking updated would only be called on a specific hook when assigns change affecting that specific element? This part is working so far but seems like it will be slow when having to re-render many components.

Has anyone else successfully integrated React components into LV yet using the new hooks interop? I think this hybrid approach will work great and allow the best of both worlds once these issues are figured out.

Thanks!