【React】関数コンポーネントで再レンダリングだけ行う

　React はコンポーネントベースで JavaScript と HTML を混ぜて使うようなライブラリです。
React – ユーザインターフェース構築のための JavaScript ライブラリ
　React は処理を高速化するために HTML の構築（以降レンダリング）をむやみに行おうとはしません。一方で開発者側の都合で何もなくとも再レンダリングして欲しい時が稀にあります（これが必要そうな時は大体、適切に React の状態処理にやりたいことを落とし込めてないだけです）。クラスコンポーネントでは forceUpdate メソッドを使って再レンダリングを強制できますが、関数コンポーネントに forceUpdate メソッドに該当する直接的なフックはありません。これは useState を利用して次の様に実装できます。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  // useState から値をセットする関数だけ抜き出し。状態は管理しない
  const [, rerender] = React.useState();
  return (
    <div className="App">
      <h1 onClick={rerender}>クリックで再レンダリング</h1>
      <span>同コンポーネント内の別要素</span>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(
  <App />,
  rootElement
);

　コンポーネントの状態を変化させる関数が実行された時、そのコンポーネントの内部では何か変化が起きたと React 本体が仮定して再レンダリングを実行します。これによって次の様に React に関係ない変化を任意のタイミングで反映できます。

import React from 'react';
import ReactDOM from 'react-dom';

// React関係なしに変化する値
let rand = 0;
setInterval(()=> rand = Math.random(), 1000);

const App = () => {
  // useState から値をセットする関数だけ抜き出し。状態は管理しない
  const [, rerender] = React.useState();
  // 再レンダリングの度に現在の rand の値が描画されます。
  
  return (
    <div className="App">
      <h1 onClick={rerender}>クリックで再レンダリング</h1>
      <span>{ rand }</span>
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(
  <App />,
  rootElement
);