React FC에서 다른 FC를 정의하지 마십시오.절대!

TL,DR

React FC(Functional Component)에서 다른 FC를 정의하지 않도록 주의하십시오.
설치할 수 없음

const Hoge: React.FC<{ username: string }> = ({ username }) => {
  // FugaはHoge FCの中で定義されている。
  const Fuga: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
    <div>
      <div>こんにちは、{username}さん！</div>
      <div>{children}</div>
    </div>
  );
  return (
    <Fuga>
      <SomeLargeContent />
    </Fuga>
  )
};

FC에서 다른 FC를 정의하는 문제 및 조사

무슨 일이야?

위의 예<SomeLargeContent />에서 DOM은 사용자 입력을 통해state를 업데이트할 때마다 삭제하고 재구성하여 성능과 가용성의 악화 등 의외의 행동을 일으켰다.
나는 관건적인 현상은 다음과 같은 몇 가지가 있다고 생각한다.

transition를 사용하는 애니메이션을 정의했지만 state의 변경을 통해 스타일을 전환하려고 할 때마다 DOM이 재구성되어 애니메이션이 발생하지 않습니다.

사용자가 입력

input을 입력하면 input의 DOM이 재구성되고 초점은 input에서 벗어납니다.

ComponentDidMount와useEffect는 state가 변경될 때마다 불이 납니다.

원래 보통 DOM 재구축을 안 하는 이유가 있어요.

React는 render가 생성한 가상 DOM을 마지막으로 생성된 가상 DOM과 비교합니다. 이 차분 DOM만 업데이트, 삭제, 추가됩니다.따라서 가상 DOM이 React에서 마지막 가상 DOM과 동일한 DOM으로 판단되면 재구성하지 않습니다.
참고문

그렇다면 이런 상황은 어떨까.

React의 가상 DOM 객체를 봅니다.

  const Fuga: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
    <div>
      <div>こんにちは、{username}さん！</div>
      <div>{children}</div>
    </div>
  );
  const vdom = (
    <Fuga>
      <SomeLargeContent />
      {/* stateの更新用にチェックボックスを配置 */}
      <input
        type="checkbox"
        checked={state}
        onChange={() => setState(s => !s)}
      />
    </Fuga>
  );
  console.log(vdom)//仮想DOMを出力;

보다 작다

에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
type에 주목합시다.저장 함수.
가상 DOM은 "어떤 DOM 생성"이외의 "어느 구성 요소에서 DOM 생성"을 type으로 유지하고, React는 이러한 차이를 감지합니다.
즉, 최종적으로 구축된 실제 DOM에 차이가 없더라도 DOM을 구축하는 구성 요소가 다르면 다른 DOM 트리로 해석될 수 있다(당연히 당연하다).
FC(1)에서 FC(2)를 정의할 때 FC(2)는 렌더가 실행될 때마다 정의되기 때문에 지난번 렌더와 다른 가상 DOM을 생성합니다.
그러면 DOM 재구성이 실제 DOM의 차이를 초과하게 됩니다.

총결산

어셈블리를 정의할 때 최상위 레벨로 정의하는 것이 좋습니다.
노선에 가까운 구성 요소가 이 작업을 하면 모든 응용 프로그램 말단의 구성 요소가 손실될 수 있으므로 주의해야 한다.

경품: Hack Virtual DOM이 DOM 재구축을 막음

React는 가상 DOM 객체의 type에서 가상 DOM이 다른 구성 요소를 만들었는지 확인합니다.
이것을 이용하여 하크 type을 통해 React 오류가 차이를 식별하고 재건을 막아라.

  const vdom = (
    <Fuga>
      <SomeLargeContent />
      {/* stateの更新用にチェックボックスを配置 */}
      <input
        type="checkbox"
        checked={state}
        onChange={() => setState(s => !s)}
      />
    </Fuga>
  );
  console.log(vdom);
  //初回に定義されたFugaコンポーネントをrefに格納しておく
  const ref = React.useRef<React.FC | null>(null);
  const firstFuga = ref.current;
  if (!firstFuga) {
    ref.current = Fuga;
  }
  //2回目以降のrenderではtypeを初回に格納したFuga関数に差し替える
  return firstFuga
    ? {
        ...vdom,
        type: firstFuga
      }
    : vdom;

절대 흉내내지 마세요.