[解決済み] useEffectで、最初のレンダリング時にエフェクトの適用をスキップするにはどうすればよいですか？

質問

Reactの新しいEffect Hooksで、再レンダリングの間に特定の値が変化していない場合、Reactに効果の適用をスキップするように指示することができます。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

しかし、上記の例では、最初のレンダリング時と、その後の再レンダリング時に、以下のような効果が適用されます。 count が変更された場合にも適用されます。最初のレンダリングで効果をスキップするように React に指示するにはどうすればよいですか。

どのように解決するのですか？

ガイドにあるように

Effect HookであるuseEffectは、関数コンポーネントからサイドエフェクトを実行する機能を追加します。ReactクラスのcomponentDidMount、componentDidUpdate、componentWillUnmountと同じ役割を果たしますが、1つのAPIに統一されています。

ガイドのこの例では、次のように期待されています。 count が 0 になるのは最初のレンダリング時のみです。

const [count, setCount] = useState(0);

ということで、次のように動作します。 componentDidUpdate として動作し、さらにチェックが入ります。

useEffect(() => {
  if (count)
    document.title = `You clicked ${count} times`;
}, [count]);

これは基本的にカスタムフックで useEffect の代わりに使えるカスタムフックは、基本的にこのように動作します。

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);

  useEffect(() => {
    if (didMountRef.current) { 
      return fn();
    }
    didMountRef.current = true;
  }, inputs);
}

を提案した @Tholle に謝意を表します。 useRef の代わりに setState .