random.tagucch.dev

技術とかの雑なToday I Learnedメモ

2023-11-15に読んだ記事
okimochi

2023-11-15に読んだ記事

病み上がりでパフォーマンス上がらず

API Documentation

仕事で使っているのでreact-hook-formのドキュメントを読んでいる

なにも分からない

React Hook Formの基本を理解してフォームを作成してみよう | アールエフェクト

公式以外のドキュメントも読んじゃう、癖で

結構多くてまだ途中だけどぼんやり像が見えてきたような気がしないでもない

react-hook-formでregisterとControllerのどちらを使うか - mrsekut-p

フォーム作成にはregisterとControllerのどちらを使うかを選べるが、Uncntrolled ComponentsかControlled Componentsかでどうすべきかが変わるっぽい

外部のUIライブラリなどはControlled ComponentsにあたるのでMUIなどを使う場合はController一択だけど、可能な場合はregisterを使うべきだそうだ

コンポーネント間で state を共有する – React

Controlled / Uncontrolled Componentsについて公式ドキュメントにある

  • 非制御(Uncontrolled)コンポーネントはlocal stateを持つ
    • local stateにより状態が決まるのであり、親コンポーネントから影響を受けない/親コンポーネントは影響を与えられない → 非制御
  • 制御(Controlled)コンポーネントはlocal stateではなくpropsにより状態が決まるものは親コンポーネントから制御できる
    • 親コンポーネントが振る舞いを完全に指定できる

Uncontrolled Componentsは設定が少なく、親コンポーネントから簡単に呼び出せるが、協調動作させたい場合に柔軟性がない

Controlled Componentsは柔軟だが親が全部propsで設定しなくてはならない

という感じらしい

実際には、“制御された”、“非制御” は技術用語として厳密なものではありません。各コンポーネントは通常、ローカルな state と props の両方を、混在して持つものです。しかし、コンポーネントがどう設計されるか、どんな機能を持つかについて話す際には、このような考え方が役に立つでしょう。

コンポーネントを書くときには、その中のどの情報を（props で）制御し、どの情報を（state を使うことで）制御しないのかを検討してください。しかし後で考えを変えてリファクタリングすることはいつでも可能です。

たしかにlocal stateとpropsどちらも使うことが多いし、どちらもある場合はどうなんだろうと思ったが、あくまで「重要な情報が」local stateなのかpropsなのか、という感じっぽい 外部のUIライブラリは呼び出す側で使う際の色々な情報をpropsとして渡しているのでControlled Componentsということなんだろう

void 演算子 - JavaScript | MDN

void hoge(async (fuga) => {...})()

みたいなコードを見かけて、そういえばvoidは型としてのほうしか知らないけどこの記法は何度か見たことがあるな……となり調べました

型情報のvoidではなく、これはvoid演算子

void 演算子は与えられた式 (expression) を評価し、undefined を返します。

なんのこっちゃいまいちピンとこない

ただ上記の書き方は例として出ていた

即時実行関数式 を使用する場合、 void により function キーワードが宣言ではなく式として扱うよう強制することができます。

上記の関数を void キーワードなしで実行すると、捕捉されない SyntaxError が発生します。

この記事の例ではfunctionキーワードを宣言ではなく式として利用できるとある

が、今回のアロー関数式のような場合はどうなんだろう

該当箇所のvoidを外して出てきたエラーを見てみた

Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.

DeepL翻訳によれば、「プロミスは待ち受けにするか、.catchの呼び出しで終了させるか、.thenの呼び出しと拒否ハンドラで終了させるか、あるいはvoid演算子で明示的に無視されるようにマークしなければならない。」らしい

このエラーメッセージはtypescript-eslint/no-floating-promisesによるもの

typescript-eslint/packages/eslint-plugin/docs/rules/no-floating-promises.md at main · typescript-eslint/typescript-eslint

A "floating" Promise is one that is created without any code set up to handle any errors it might throw. Floating Promises can cause several issues, such as improperly sequenced operations, ignored Promise rejections, and more.

DeepLに投げた→「フローティング "Promiseとは、Promiseが投げるかもしれないエラーに対処するためのコードが設定されていない状態で作成されたPromiseのことです。フローティング・プロミスは、不適切な順序の操作、無視されたプロミスの拒否など、いくつかの問題を引き起こす可能性があります。」

ignoreVoidオプションを使うことで、こういった「浮いている」Promiseを無視できるとのこと、あんまり良くないような気もするけどたぶん問題ない場合も多々あるんだろう、自分が塩梅を分かってないというのがありそう

← Back To Home