デフォルトの小道具を避ける方法をトラップトラップ反応

何ですか.
このようにデフォルトの支柱を持つコンポーネントを持っているとしましょう

import React, { useEffect, useState } from "react";

const RerenderChild = ({ value = [] }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
     {/* ...component */}
    </div>
  );
};

export default RerenderChild;

常にvalue propはnullish (呼び出し元のコンポーネントで設定されていない)、useEffect コンポーネントが無限にレンダリングされます.これはデフォルトの小道具のレンダリングトラップです.ブラウザコンソールでこのようなものを手に入れます.


なぜ起こるのか
我々が値を提供しないときvalue propこれは引数として提供されるデフォルト値を受け取ります[] . これはuseEffect 更新するフックvalueFromProp 状態.状態変化により、コンポーネントは再描画されます.
コンポーネントが再レンダリングするとき、それは再びデフォルトのものである新しい小道具値をとりますuseEffect そして、サイクル全体が繰り返される.そういうわけで、我々は無限ループで終わります.

解決策
デフォルトのprop値をコンポーネント定義の一部にする必要があります.我々は、これらの方法でそれを行うことができます.
1 . DefaultPropsプロパティを使用する.
デフォルトの小道具の値は、defaultProps property . 私たちのコンポーネントは

import React, { useEffect, useState } from "react";

const RerenderChild = ({ value }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

RerenderChild.defaultProps = {
  value: [],
};

export default RerenderChild;

デフォルトの定数を定数として宣言します.
コンポーネントの外部で定数を宣言し、デフォルトのprop値として設定できます.

import React, { useEffect, useState } from "react";

const DEFAULT_VALUE = [];

const RerenderChild = ({ value = DEFAULT_VALUE }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

export default RerenderChild;

希望これは無限ループを避けるために役立ちます.感謝😊.