🦔
Reactの開発で気をつけてること
なんとなくで useCallback useMemoを使わない
Componentに対して、ほとんどメモ化しているのに1つだけメモ化されてない関数・オブジェクトを渡されていたり、インラインで関数が渡されていたりしているのをよく見かける気がしています。
1つでもメモ化されていない関数やオブジェクトがあると必ず再描画の対象になってしまうのでメモ化のコストだけを払ったことになってしまいます。
大体のプロジェクトでは適当に使っていてもパフォーマンスにあまり影響が出ないので意識されないかもしれませんが、画面内での動的な操作が多い時にはとても重要になると思います。
どのような時に再描画されるのかというのはこの記事で書いているのでよかったら見てください
なんとなくでcomponent分割をしない
目的を持ってcomponent分割をするようにしています。
- lazyloadをしたい場合
- 共通化のため
- 再描画を抑えるため
- テストを書きやすくするため
など
僕はcomponent分割のやりすぎは良くないと思っています。
コードを書くときにcomponent分割されすぎてると対象のcomponentに辿り着くまでに何度もコードジャンプをする必要があったり、propsの命名に変更があった場合多くの箇所の変更が必要となり辛いことが多いと思います。
汎用性を考えすぎない
汎用的なcomponentを作る場合は3箇所以上に出てきてからにするようにしています。
それまではcomponent化せずベタがきします。
経験上、１箇所しか出てきてない段階で汎用性を考えて作ったcomponentがそのまま使い回せた経験があまりなく、結局手直しする必要が出て無駄な工数を払うようになります。
短いですが以上僕がReactで開発する際に気をつけてることでした。
Discussion