[Test Code] Recursing On Children Related to Reconciliation

App.tsx

import React, { useState } from 'react';

const App = (): JSX.Element => {
  const [values, updateValues] = useState<string[]>(['Duke', 'Villanova']);

  return (
    <>
      <button onClick={() => updateValues(['Connecticut', ...values])}>
        Press me
      </button>
      <ul>
        {values.map((item: string) => (
          // key를 넣지 않은 경우
          // <ChildComponentMemo text={item} />

          // key를 넣은 경우
          <ChildComponentMemo key={item} text={item} />
        ))}
      </ul>
    </>
  );
};

const ChildComponent = (props: { text: string }): JSX.Element => {
  console.log('ChildComponent --> re-render');

  return <li>{props.text}</li>;
};

const ChildComponentMemo = React.memo(ChildComponent);

export default App;