Custom Javascript Components and built-in components are not in the same virtual DOM.

[PierXuY]

I attempted to build a Custom Javascript Components and when I only used custom components, such as:

  return html.div(
      ExampleCounter(on_count_change, "btn", "1"),
      ExampleCounter(on_count_change, "btn", "2"),
      ExampleCounter(on_count_change, "btn", "3"),
      ExampleCounter(on_count_change, "btn", "4"),
  )

When I right-click on the webpage and select Reload, these elements will not undergo unnecessary re rendering, which is great.
But when I add other built-in components, these custom components will undergo unnecessary re rendering.

  return html.div(
      html.p("p"),
      html.p("p"),
      html.p("p"),
      ExampleCounter(on_count_change, "btn", "1"),
      ExampleCounter(on_count_change, "btn", "2"),
      ExampleCounter(on_count_change, "btn", "3"),
      ExampleCounter(on_count_change, "btn", "4"),

  )

I suspect the reason may be that the built-in elements and custom components are not in the same virtual DOM. This will lead to differences in the use of built-in components and custom components .

In actual development, it is very necessary to use the popular react framework library, hoping to have better support for custom components. On this basis, it can greatly enrich the reactpy ecosystem and improve development speed.

Can this issue be improved? This can improve the experience, thank you!

[Archmonger]

Improving usability around situations like this are a planned part of #1001 and #786. Unfortunately, we have not got around to developing those yet.