Function Component's state management is troublesome.
Treat React as a simple GUI library to simplify things.
Simple is Great.
Install
npm install @eightnineight/react-render
Usage
NOTE:
You should not use promise/async/await in ReactRender
render override function, that's not a good pattern,
keep simple, just use React as simple GUI output library.
You also should not continue using React's useState/useEffect
and related functions to manage state.
importReactfrom'react';import{createRoot}from'react-dom/client';import{ReactRender}from"@eightnineight/react-render";classTextextendsReactRender{constructor(){super();}// you need to override render function// props is the same as props in react function component.render(props){return<div>{props.children}</div>;}}classAppextendsReactRender{count=0;constructor(){super();this.counter=newText();setInterval(()=>{++this.count;this.reload();// ReactRender.reload can update render},1000);}// you need to override render function// props is the same as props in react function component.render(props){constCounter=this.counter;// you can use ID as key (ID is a unique uuid)return<Counterkey={Counter.ID}>{this.count}</Counter>;}}constcontainer=document.getElementById('root');constroot=createRoot(container);constApplication=newApp();root.render(<Application/>);