re renders => resolved

 =

re renders 

if we click button eventhougw we not calling 

we can observer in closnel

import { useState } from "react";

import ReactDOM from "react-dom/client";

import Todos from "./Car";

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>

    </>

  );

};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

=

tods.js

const Todos = ({ todos }) => {

  console.log("child render");

  return (

    <>

      <h2>My Todos</h2>

      {todos.map((todo, index) => {

        return <p key={index}>{todo}</p>;

      })}

    </>

  );

};

export default Todos;

=

solved with memo

if not calls this todos it console not prints

import { memo } from "react";

const Todos = ({ todos }) => {

  console.log("child render");

  return (

    <>

      <h2>My Todos</h2>

      {todos.map((todo, index) => {

        return <p key={index}>{todo}</p>;

      })}

    </>

  );

};

export default memo(Todos);

=