<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

function ExpensiveComponent ({ list }) {
  const count = React.useRef(0)

  return <>
    <p>Rerender ExpensiveComponent {count.current++}</p>
    <p>{JSON.stringify(list, null, 2)}</p>
  </>
}

const MemorizedExpensiveComponent = React.memo(ExpensiveComponent)
 
const complicateFilter = (list) => {
  return list.filter(item => item % 3 === 0)
}

const getComplicatedList = () => {
  return ['1', '2']
}

const list = [1, 2, 3, 4, ,5, 6]
function Component () {
  const [msg, setMsg] = React.useState('')
  const filteredList = complicateFilter(list)
  const memoizedFilteredList = React.useMemo(
    () => complicateFilter(list), [list]
  )

  return <div>
    <input onInput={e => setMsg(e.target.value)}  />
    <p>msg: {msg}</p>

    <p>unused React.memo:</p>
    <ExpensiveComponent list={filteredList} />

    <p>used React.memo:</p>
    <MemorizedExpensiveComponent list={filteredList} />
    
    <p>used React.memo and React.useMemo:</p>
    <MemorizedExpensiveComponent list={memoizedFilteredList} />
  </div>
}


ReactDOM.render(
  <Component />,
  document.getElementById('root')
);