なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ

書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

2019/08/31

React で特定条件で useState を使っているコンポーネントが2回描画される

カテゴリー:JavaScript

React.js にて、再描画される必要が無いコンポーネントが、なぜか再描画されている事があった。
調べてみると、 React.StrictModeuseState を使っている場合、再描画しているらしい。

React.StrictMode combined with useState causes component to render twice

つまり、こういうふうにやってると、描画される必要が無くても 2 回描画される。

// root
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>,
  document.querySelector("#app")
);
// component
import React, { useState } from "react";

const Component: React.FC = () => {
  const [state, setState] = useState("");
  console.log("Hello?"); // 2回コンソールに出力される

  return (
    <>
      <p> {state}</p>
    </>
  );
};

知らなくて「なんで 2 回描画されてるん...?」ってなってしまったのでメモ。 ではでは~。