A helper function to split up the visual part and buisness logic of a react component, without creating new components and passing props around

MyComponent.jsx

import React from "react";

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  const clickCounter = () => {
    setCount((c) => c + 1);
  };

  const resetCounter = () => setCount(0);

  return (
    <>
      <button onClick={clickCounter}>counter</button>
      <button onClick={resetCounter}>reset</button>
      <h1>{count}</h1>
      <h2>This is a prop: {props.test}</h2>
    </>
  );
};

export default App;

Will be splitted into a visual and a logic part without loosing the connection. With the help of a shared this you can easily share and exchange values without using props.

MyComponent.visual.jsx

import React from "react";
export default function MyComponentVisual(props) {
  return (
    <>
      <button onClick={this.clickCounter}>counter</button>
      <button onClick={this.resetCounter}>reset</button>
      <h1>{this.count}</h1>
      <h2>{props.test}</h2>
    </>
  );
}

MyComponent.logic.js

import { useState } from "react";

export default function MyComponentLogic(props) {
  const state = useState(0);
  this.count = state[0];
  this.setCount = state[1];

  this.clickCounter = () => {
    this.setCount((c) => c + 1);
  };

  this.resetCounter = () => this.setCount(0);
}

combined with the reactml function in a general index file

import reactml from "../reactml";
import MyComponentVisual from "./MyComponent.visual";
import MyComponentLogic from "./MyComponent.logic";

export default reactml(MyComponentVisual, MyComponentLogic);

Everything the visual part needs from the logic part needs to be added to the this of this function. With that you can then simply use it in the visual part of the component.