Intl.DisplayNamesを使うと、「JP」「US」のような国のコードや「en-US」のような言語のコードを、「日本」「アメリカ英語」のような名前にできます。Reactで国の選択肢や言語の切り替えボタンに使う書き方と、名前のな ...

Intl.ListFormatを使うと、配列を「りんご、みかん、ぶどう」や「Apple, Orange, and Grape」のように、言語に合った区切りで並べられます。Reactでの使い回し方、JSXを並べる方法、0件のときの結果を ...

2つの文章を比べ、消えた部分を赤、増えた部分を緑で表示するコンポーネントを React で作りました。書き直す前と後の差分を見せたいときに使えます。jsdiff の diffWords に Intl.Segmenter を渡すと、日本 ...

Reactの画面で金額や数を「￥1,235」のようにカンマ区切りで出したいときは、Intl.NumberFormatが使えます。「1.2万」のような短い表記や割合、増減の符号も出せます。書式の使い回し方と、全角の「￥」など文字列で比べ ...

親が描き直されるたびに一緒に描き直される子は、memoで包むと、propsが前と同じあいだは描き直されなくなります。その場で書いたオブジェクトや関数を渡すと効かなくなる理由とその直し方、JSXのchildrenでも効かなくなることを、 ...

StrictModeで包むと、開発中だけ一部の関数が2回呼ばれます。コンポーネントの本体やuseStateの初期化関数、reducer、マウント時のエフェクトなどは2回で、イベントハンドラは1回でした。一部だけ包んだときや本番用のビル ...

1つのContextに何でも入れると、どれか1つの値が変わるたびに、そのContextを読むすべてのコンポーネントが描き直されます。変わるタイミングが違う値を別々のContextに分けると、関係するコンポーネントだけが描き直されること ...

React Compiler 1.0を入れると、useMemoとuseCallbackはほとんどの場面で書かなくてよくなります。ただしコンパイラが処理をスキップしたコンポーネントや、エフェクトの依存値を細かく制御したい場面では、今も手 ...