react memo

App.js

import { useState, memo } from "react"

function todos({ todos }) {
  console.log("child render")
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>
      })}
    </>
  )
}

const Todos = memo(todos)


const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState(["todo 1", "todo 2"])

  const increment = () => {
    setCount((c) => c + 1)
  }

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  )
}


export default App