import React, { useState } from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'


const Child1 = (props) => {
  const { count } = props;
  console.log('child1 rendered');
  return (
    <div>
      count: {count}
    </div>
  );
};

// ボタンを押しても状態が変らないので、再レンダリング不要
const Child2 = (props) => {
  const { text } = props;
  console.error(text); // TODO: ボタンを押してもlogが出ないようにする
  return (
    <div>
      child2
    </div>
  );
};

const App = (props) => {
  const [count, setCount] = useState(0);
  const text = 'child2 rendered';
  
  return (
    <div className="App">
      <button
        onClick={() => {
          setCount((count) => count + 1)
        }}
      >
        add
      </button>
      <Child1 count={count} />
      <Child2 text={text} />
    </div>
  );
}


ReactDOM.render(<App />,
document.getElementById("root"))