SPA Componentの推しディレクトリ構成について語る

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいてうまくいっていると感じているComponentのディレクトリ構成についてご紹介していきます。 ディレクトリ構成 Componentは src/components の中にまとめていて、その下に以下の4種類の分類ディレクトリを切っています。 src/components/page src/components/model src/components/ui src/components/functional 分類ディレクトリを考えるにあたって重視したポイントは以下。 新しくco

[atico]

Reactハンズオンラーニングにmemo化乱用すなって書いてる(168p) Reactは元々コンポーネントが頻繁に描画されてもパフォーマンス落ちないように設計されてるし、ほとんどの場合useMemo使ったところでコストに合う見返りは無い

[Rishatang]

useMemo/useCallbackを使い倒さないとuseEffectが予期しないタイミングで発火する。最悪useEffectで通信処理してると無限に通信叩かれるようなことになるんだけど、この問題みんなどう回避してるんだろ

[nagase222]

いいね

[hokkey]

linter規約が厳しい(exhaustive-deps)と基本みんなuseCallbakかuseMemo使うようになると思う

[yarumato]

“どこに分類させるかで迷わない（重要）ため、4種類の分類ディレクトリ。Next.jsの src/pages が別途あるが責務をルーティングのみと定めて、ページの実体は src/components/page に書く。”

[sotq17]

とっても推せます！