はてなブックマーク

はじめに 今後のReactではどの範囲をSuspenseで囲むか という設計が重要になってくる、という話をSuspenseの説明とともにしていきます！ ※React18がリリースされて１年近く経つので今更感あるかもしれませんが、お付き合いください。 Suspense とは React18で正式な機能として実装された機能 ※React16.6で実験的機能として追加されていた Suspense でできること データ取得中ローディング状態の宣言的な記述 コンポーネント単位でのSSR コンポーネント単位でのJSロード コンポーネント単位でのHydration Suspense は単にローディングを宣言的に記述できるだけの機能ではない Suspenseはローディングを宣言的に記述できるもの、といった内容を目にすることが多い印象です。 しかし、Suspenseは単にローディングを宣言的に記述できるだけ

はじめに 汎用的なElementレイヤーのコンポーネントを作るときの Props定義はこうした方がよいのではないか、という話です。 ※ここで言うElementレイヤーとは： input, button, label など、atomic design でいう atom の部分 ComponentPropsを使おう このように一つ一つのプロパティを定義するより type Props = { value?: string; onChange?: React.ChangeEventHandler<HTMLInputElement>; }; export const Input = ({ value, onChange }: Props) => ( <input value={value} onChange={onChange} /> );

はじめに ReactでHTML要素の大きさ（幅、高さ）、位置を取得したい場面があり、そのときの実装メモ。 ※ TypeScript を使っています 実装 カスタムフックを作る // 引数のtargetProperty をDOMRectのもつPropertyに限定する type DOMRectProperty = keyof Omit<DOMRect, 'toJSON'>; // RefObjectの型は div, span, p, input などのさまざまなHTML要素に対応できるようにextendsで制限をかけつつ抽象化 export const useGetElementProperty = <T extends HTMLElement>( elementRef: RefObject<T> ) => { const getElementProperty = useCallback(