☰

Reactコンポーネントの最初のレンダリングを検出する正しい方法はどれですか？質問する

tag-icon • tag-icon javascript reactjs react-hooks use-ref
Reactコンポーネントの最初のレンダリングを検出する正しい方法はどれですか？質問する

コンポーネントの最初のレンダリングを検出する必要があるシナリオがあります。ここでは小さな例を作成しました。正しいアプローチは何か説明してもらえますか?

なぜほとんどの人は、refプレーンな状態ではなく を使用することを提案するのでしょうか。

https://codesandbox.io/s/condescending-burnell-0ex3x?file=/src/App.js

import React, { useState, useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const firstRender = useDetectFirstRender();
  const [random, setRandom] = useState("123");
  useEffect(() => {
    if (firstRender) {
      console.log("first");
    } else {
      console.log("second");
    }
  }, [random]);
  return (
    <div className="App">
      <h1>Random Number is {random}</h1>
      <button onClick={() => setRandom(Math.random())}>Change Name</button>
    </div>
  );
}

//Approach 1
// export function useDetectFirstRender() {
//   const firstRender = useRef(true);

//   useEffect(() => {
//     firstRender.current = false;
//   }, []);

//   return firstRender.current;
// }

//Approach 2
export function useDetectFirstRender() {
  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
    setFirstRender(false);
  }, []);

  return firstRender;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

ベストアンサー1

再利用可能なものを作ることができますカスタムフックそのためには、useRef。

function useFirstRender() {
  const ref = useRef(true);
  const firstRender = ref.current;
  ref.current = false;
  return firstRender;
}

おすすめ記事