Functional components fails hot rendering

[anwar-kt]

initially I started working with react-nodegui-starter code. where

the index.tsx looks as follows

import { Renderer } from "@nodegui/react-nodegui";
import React from "react";
import App from "./app";

process.title = "My NodeGui App";
Renderer.render(<App />);
// This is for hot reloading (this will be stripped off in production by webpack)
if (module.hot) {
  module.hot.accept(["./app"], function() {
    Renderer.forceUpdate();
  });
}

and the App.tsx is as per below

import {Window, hot} from "@nodegui/react-nodegui";
import React from "react";

class App extends React.Component {
  render() {
    return (
      <Window   >

      </Window>
    );
  }
}
export default hot(App);

Everything works fine, but when I rewrite the class component to a functional component as follows it doesn't support hot reloading.

App.tsx

import {Renderer, Window, hot, } from "@nodegui/react-nodegui";
import React from "react";
const App = () => {
  return (
    <Window>

    </Window>
  );
};
// Renderer.render(<App />); 
export default hot(App);

If I enable Renderer.render(<App />); inside the App.tsx file, then it opens one additional window for every updates in the code. If I disable it, I need to open and close the application every time to get a reload.

How can achieve hot reloading while using a functional component?

[a7ul]

the current hot loading requires top level root component to be a class component. you can implement everything else as a functional component except App

[anwar-kt]

@a7ul Thank you