【React】正しいやり方は、ややこしい

どうも、こんにちは。日曜フロントエンドエンジニアのNeji（ねじ）です。

やっぱり、つい「自己流」に走ってしまう

React、どうですか。v18以降。

私的には「大勢のヒトでなにかを作るときには、流儀を規格化しておく方が良い」という視点で、賛成です。

ただ、個人開発に使うとなると、少々ルールがお硬すぎる。もうちょっと雑に、とりあえず動くコードをささっと書きたい。

ということで、個人アプリの開発では、結局以下の「抜け道」を使っています。これだけでかなりスピードアップできる。

１： 再描画を明示的に行えるようにする

React の描画システムは、実は結構ややこしいです。
そして、スマホアプリの場合は「どうせ重くないんだから、しょっちゅう再描画したい」「そう、今！このタイミングで再描画してよ」という考え方になります。

よって、以下の形で「明示的な再描画」を採用しています。

  //  React 明示的更新処理。
  const [_refresh, _setRefresh] = useState({});
  const refresh = () => {
    // オブジェクトを差し替えることで、再描画を誘発させる。
    _setRefresh((prestate) => {
      const newState = { ...prestate }
      return newState
    });
  };

用は、state のオブジェクトを差し替えるだけの関数を用意することで、そのタイミングで再描画をさせる、という仕組みです。
refresh() で再描画を指示できるのは、気持ち良い。

２：情報はすべて親モジュールに集約する

親モジュールと子モジュールの連携（＝通信）って、どうやるのが良いのでしょう？

私は、こうしています。

1. 親モジュールに 「この子モジュール専用の関数（リスナー関数）」を１つ定義する。

2. 子モジュールに props で リスナー関数 を渡す。

3. 子モジュールは、なにかあったらこのリスナー関数をコールする。

   1. リスナー関数は「文字列を１つ」だけ受け取るようになっている。この文字列を関数内で解釈して「あ、子モジュールはこうして欲しいって言ってるんだな」を解釈する。

   2. リスナー関数は、親モジュール上に定義されているので、名前空間的に実質グローバルな変数にアクセスできる。（というかアプリで使用する変数は親モジュールに集約しておく）

この仕組みで、子モジュールが使用するロジック（いわゆるビジネスロジック）がずいぶんスッキリしました。

「Reactを正しく使うこと」が大事なのではない、という視点

たぶん、こうした工夫は、正React教の教徒からは邪法と糾弾されるでしょうｗ
私の性格では、教徒にはたぶんなれない。
きっと、私にとってのReactとはただの道具なのだ。
自分ちにある道具、だから「とんがった改造」を加えることにためらいがないし、なんだったらすごく楽しい。

Reactを使って個人開発をしている他の方たちは、どうやっているんだろう。