React Memo

Using memo will cause React to skip rendering a component if its props have not changed, which can improve performance.

#React

31st July 2022

Time to read: 1 min

Logo

Memo

Wrap component export in memo.

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);