Zenn
🔖

React: そもそもuseState使うシーンって少ないってか最低限でいいよね、って話

に公開
React
tech

思ったより使うシーン少ない

まじで少なく済んじゃう考え方（コツ）

  1. componentを細分化する
  2. 小さな粒度のconponentが小さなstateを（必要なら)useStateする

実はこっそりオブジェクト化(名前空間)できちゃう

オブジェクト指向のメリットの一つ: 主語.{メソッド} をとるところ。これかなり可読性あがります。
名前空間を持てることは大変良いことです。
Reactにはこの点も強力な手続き型プログラミングに寄せていることがわかります。

Before:
const useAppView = () => {
　const [isOpenLogin, setIsOpenLogin] = useState(false);
　const [isOpenSignup, setIsOpenSignup] = useState(false);
　const [isOpenNavigation, setIsOpenNavigation] = useState(false);
　const [navigationIndex, setNavigationIndex] = useState(0);

return {
　　　　isOpenLogin, setIsOpenLogin,
　　　　isOpenSignup, setIsOpenSignup,
　　　　以下略...
　};
};

かすたむふっく.js
After:
const useAppView = () => {
  const Navigation = {};
  [Navigation.index, Navigation.setIndex] = useState(0);
  [Navigation.isOpen, Navigation.setIsOpen] = useState(true);
  return {
    Navigation,
  };
};

過去の誤った認識

子孫に行き渡ったstateのライフサイクル

  1. users[] などの大きな(大元の)データがuseStateで管理される
  2. followings, thumbnailsなどの子データはそれぞれのUIでuseStateされて管理される
  3. 子データが更新される場合は、(dbを更新して)子のstateを更新する
  4. このとき親のstateは更新されていない
  5. 親を更新する時(ページ更新や画面の切り替え)は親ごと新しいデータをfetchする

Discussion