React Router and React Memo

const Layout = () => {
return (
<>

• Home
• Blogs
• Contact

  <Outlet />
</>

)
};

export default Layout;
Home.js:

const Home = () => {
return

Home

;
};

export default Home;
Blogs.js:

const Blogs = () => {
return

Blog Articles

;
};

export default Blogs;
Contact.js:

const Contact = () => {
return

Contact Me

;
};

export default Contact;
NoPage.js:

const NoPage = () => {
return

404

;
};

export default NoPage;

};

return (
<>

---

Count: {count}
+

</>
);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
Todos.js:

import { memo } from "react";

const Todos = ({ todos }) => {
console.log("child render");
return (
<>

My Todos

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

{todo}

;
})}
</>
);
};

export default memo(Todos);

Now the Todos component only re-renders when the todos that are passed to it through props are updated.