useMemo

ReactのStame Managementのシリーズでは、useStateを使った簡単な状態管理、useReducerを使った複雑な状態管理の仕方を学びました。 今日はその続きとして、React HookのuseMemoの使い方を紹介します。 これはVueのフレームワークを使ったことがある方ならweatch()メソッドと同じになると理解してもらってOKです。 では、前回行ったreuceメソッドを利用した例を見ていきます。 まずは、こちらのコードを見てください。 ここでnumbers配列の数字の合計値をブラウザに表示しているようにしています。ここで感がれられる問題があります。もし、数字の入っている配列が膨大な数である場合、コンポーネントがレンダーされるたびにreduceの関数が実行されてコンポーネントのレンダーに時間がかかることが想定されます。 そこでuseMemoを使って、dependency（依存するデータ）を教えてあげることができます。 この場合でいうと、numbersの配列が変わらない限り答えは同じになるのでそれを教えてあげるわけです。 useMemoはそこまで難しいコンセプトではないので今日はこれくらいで。