useCallback+useMemoを使用してサブエレメントを降格props

useCallback

入力したコールバック関数自体を返します。

useMemoが関数の戻り値を覚えている場合、useCallbackは関数自体を覚え、複雑な関数を生成するのに時間がかかる場合は最適化に役立ちます。

useCallbackは2番目のパラメータとして依存配列を有する。依存配列に値を入力し、値が変更されると、以前に記憶した関数自体と比較して、他の場合に再レンダリングされます。主な目的は複雑な関数の再レンダリングを阻止することであるため、useCallbackの依存配列は主に空の配列を使用する。(関数の値を返す必要がある場合はuseMemoを使用できます。)

親から子に関数をpropsとして渡す場合は、useCallbackを使用して子の再レンダリングを防止する必要があります。

使用例)

const boo = () => {return 1;}
//useCallback은 이렇게 사용한다.
const boo = useCallback(() => {return 1;},[])

React.memo()

親コンポーネントがpropsをサブコンポーネントとして降格する場合、propsが関数である場合はCalbackを使用してpropsに降格する必要があります.しかし、これだけではサブアセンブリの再レンダリングを完全に阻止することはできません.従って、サブエレメント上の反応.memoを使用して、propsが変更されていない場合は、レンダリングを防止します.
Reactは、まず構成部品をレンダーし、その後、以前にレンダーした結果を浅いコピーし、次に比較してDOM更新を決定します.レンダリング結果が以前と異なる場合、reactはDOMを更新します.
素子が反応する.memo()にマッピングすると、reactは素子をレンダリングし、その結果を記録します.(Memozing)次のレンダリング時にpropsが同じ場合、ReactはMemozingコンテンツを再使用します.

export function ChildComponent({ someProps, someFuncProps }) {
  return (
    <div>
      <div>{someProps}</div>
      <div>{somFuncProps}</div>
    </div>
  );
}
export const MemoChildComponent = React.memo(ChildComponent);

React.memo(Child Component)により、新規レコードのMemoChild Componentが戻される.somePropsとsomFuncPropsが変更されていない場合は、次回のレンダリング時にコメントで指定した内容が使用されます.
アノテーションされた結果を再使用すると、DOMでの変更を回避でき、パフォーマンスのメリットが得られます.

React.クリアmemo()

React.memoは、親コンポーネントが受信したpropsを親コンポーネントで一定に保つことを許可し、ChildComponentで再レンダリングは発生しません.
親コンポーネントが他のpropsのためにレンダリングを継続しているが、Childコンポーネントが受け取ったpropsが変更されていない場合、Childコンポーネントはレンダリングされません.
逆に、レンダリングのたびにpropsのコンポーネントを頻繁に変更すると、memorizationテクニックのメリットが得られにくくなります.(逆に性能が落ちる)

useCallbackを復元します。なぜmemo()を使うのか

関数オブジェクトは、通常のオブジェクトと同じ比較原則に従います.関数オブジェクトは自分に対してのみ同じであるため、サブ関数に与えられた関数は、機能が同じ他の関数によって生成され、propsに降格されます.(shallow copy)
関数の等化はトラップであるため,注釈転送を適用する際には,コールバックを受信する素子の管理に注意すべきである.親関数は、レンダリングのたびに他のコールバック関数のインスタンスをスキップすることがあります.親構成部品がサブ構成部品のコールバック関数を定義するときに、useCallbackを使用して新しい関数を一時的に作成することを防止できます.

理解を助けるための例

親コンポーネントが持つonLogout関数でuseCallbackを使用します.

function ParentComponent() {
  const onLogout = useCallback(() => {},[]);
  ...
  return {
    <div>
      <MemoizedLogout username={username} onLogout={onLogout} />
      </div>

Logoutコンポーネントは、親コンポーネントからコールバック関数prop onLogoutを受信して復元します.memoを使用します.

function Logout({ username, onLogout }) {
  return <div onClick={onLogout}>Logout{username} />
    }
const MemoizedLogout = React.memo(Logout);

useCallbackを使用すると、親構成部品が子構成部品のコールバック関数を定義するときに新しい関数を一時的に作成することを防止できます.

ps.識別子で区切って使用する必要はありません。

export default React.memo(ChildComponent)

https://ko.reactjs.org/docs/hooks-reference.html#useeffect
https://ui.toast.com/weekly-pick/ko_20190731