読みやすいコード
ここではReactを使ったサービス開発において、どのように書けば読みやすいコードになるのかを書いている
安易に共通化を行わない
無理に共通化しようとすると時間がかかってしまったり、無駄な作業になることが多い。
綺麗にコードを書いて変更しやすいようにしておくのは大切だが、共通で使おうとしてはいけない
できるだけre-renderを少なくする
Reduxなどのグローバルにstateを預けて変更するようなものは安易に使わない
user情報などの必ず全体で使うであろう部分にのみ使う
それ以外の全体では使わないが共通で使いたいようなデータはcontextで渡したり、親componentからprops経由で受け取るようにするのが望ましい
Reduxを使う代わりにSuspenseを使って解決できないかを考える
Reduxを使うときにfetchingを管理してloading処理を追加したいといったケースが考えられる
この場合、stateがグローバルに多くのcomponentで使われる場合は良いが、少数でcomponentでしか使われない場合はSuspenseを使ってfallbackでloading処理を行うことができるのでその方法を考える
Hooksを使うときはuseStateを使いすぎない
useStateを使う場面はそのcomponentでstateを一つしか扱わない時にだけ使用されるべきである
複数使用する場合はuseReducerを使った方がuseEffectを使って制御するときなどに依存関係がわかりやすくなったり、depsに入れる変数が少なくなるのでより依存関係がわかりやすくなる
useEffectを使うときは依存関係を明確にする
useEffectを使うときは何に影響を受けて発火されるものなのかを明確にするために、依存しているものを全てdepsに入れる
また、depsに入れることでrenderingが無駄に怒ってしまうようなケースでは、安易にdepsから変数を消すのではなく、useMemoやuseCallbackを使って依存関係が明確になるようにして変更しなければならない
useEffectで使っているが、propsやstateを必要としていないような関数はcomponentの外で定義するようにした方が良い
useEffectでのみ使われるような関数はuseEffectの中に定義することで外部で使われないことを明確にするのが良い
useEffectでは依存関係を明確にしないと思わぬところでバグを生んでしまったり、コードを変更する時に変更範囲がわかりにくくなってしまう
安易にcontextを使用しない
Componentないのエラーを適切に処理する
エラーが発生した時にはUXを損なわないようにするためにもエラーを正しく対処して、それをユーザーに伝えなければならない
コードが分割されていることを確認する