ToC

• Reactのtips
  • useStateの遅延評価
  • componentを返すhooksの是非

Reactのtips

最近覚えた細かいtipsをメモしておく

useStateの遅延評価

const [count, useCount] = useState<number>(0)

このようなコードがあるとき、useStateの引数はcountの初期値である
この初期値には値を返す関数を指定できる

const [count, useCount] = useState<number>(() => 0)

一見なんのこっちゃわからないけれど、この関数は初回renderのcountの初期化でのみ使われる
この関数がuseStateの外にあるとrenderされるたびに呼ばれるが、useStateに渡せば1度で良いというのがポイント

componentを返すhooksの是非

この記事にあるように
hooksからcomponentとその状態を表すstateを返すパターンがある

これによってそのcomponentが表す状態を親componentからhooksに押し込めることができる
今まで親がこれらのロジックを定義していたが、子componentが複数あると親componentが散らかっていたので、
それをhooksに分離することで見通しが良くなりそうだ。

ただし依存の向きが逆転している気もするので、ある程度Reactがわかっていないとごっちゃごちゃなコードが生えそうな予感もするし
複数のcomponentが協調しないといけない場合、それをどこが持つのかという判断が難しそう

複数のcomponentが協調して一つのロジックを作るのであれば、複数のcomponentを返すhooksになればよいのかな...?