【React】custom-element set Object/Array prop in React Hook, the operation result is unstable

[my9074]

@karol-f

When prop needs to be of object/array type, it needs to be operated through JS. However, the rendering of custom-element in React Hook does not seem to be consistent with the execution logic of useEffect after component rendering. The phenomenon is that the effect function is executed earlier than the custom-element, causing the setting prop to not work correctly

CodeSendbox demo

It cannot be reproduced in CodeSendbox, but it is not normal locally. React version is consistent

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [stringProp, setStringProp] = useState("stringProp");
  const [booleanProp, setBooleanProp] = useState(true);
  const [numberProp, setNumberProp] = useState(1);

  useEffect(() => {
    // this is work in my local
    // setTimeout(() => {
    //   document.getElementsByTagName("table-wc")[0].items = [
    //     { prop: "1", value: "1", type: "1" },
    //     { prop: "2", value: "2", type: "2" }
    //   ];
    // }, 1000);

    // Not work in my local. I guess effect function was executed before table-wc created,
    // which caused the items to not be set up
    console.log(1111111);
    document.getElementsByTagName("table-wc")[0].items = [
      { prop: "1", value: "1", type: "1" },
      { prop: "2", value: "2", type: "2" }
    ];
  });

  return (
    <div className="App">
      <table-wc
        string-prop={stringProp}
        boolean-prop={booleanProp}
        number-prop={numberProp}
      ></table-wc>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Local:

Expected