ブックマーク / zenn.dev/haniwa_www (1)

  • 保守性の高いReact hooksコードの指針

    前提 記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。(思い出し次第随時追加していきます) ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは1ページに1つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは1ページに1つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat

    保守性の高いReact hooksコードの指針
    Rishatang
    Rishatang 2022/04/01
    関数やオブジェクトを適切にMemoizeしないと無限ループがちょくちょく発生するっていうのは経験ある
  • 1