Fluent React

Chapter 5
Patterns

React.memo

Pure Function

const add = (a, b) => a + b;

Component	Result
⚠️ RegularAdd	3
✅ MemoizedAdd	3
⚠️ NonMemoizedAddWithObjProp	3

* Click each row to see the source code for the component** Check the logs printed in the console

"use client";

// 메모이제이션되지 않은 컴포넌트: 부모가 리렌더링되면 매번 렌더링됨
// causes re-render on parent re-render
const RegularAdd = ({ n1, n2 }) => {
  return (
    <>
      <td>⚠️ RegularAdd</td>
      <td>{n1 + n2}</td>
    </>
  );
};