<div id="root"></div>

console.clear();

function App() {
  const [arr, setArr] = React.useState([1, 2, 3]);
  const addOne = () => setArr([arr.length + 2, ...arr]);

  return (<>
    <h1>QnA React demo</h1>
    <button onClick={addOne} >+1</button>
    <ul>
      {arr.map(n => <ItemMemo id={n} key={n} />)}
      {/* arr.map(n => <Item id={n} key={n} />)  */}
    </ul>
  </>);
}

function Item (props) {
  const renderCounter  = React.useRef(0);
  renderCounter.current = renderCounter.current + 1;
  const { id } = props;
  console.log(`Timer ${id} render`);
  return <li>Timer {id}, rendered {renderCounter.current} times</li>
}

function areEqual(prevState, newState) {
  return prevState.id === newState.id;
}

const ItemMemo = React.memo(Item, areEqual);

// Tells React to attach the HelloWorld component to the 'root' HTML div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);