useInViewの返り値について

react-intersection-observerのuseInViewの返り値についてまとめた

react-intersection-observerとは、要素がviewport内に表示されたり表示されなくなったことを通知してくれるパッケージである

ドキュメントのuserInViewところから引用する

// Use object destructuring, so you don't need to remember the exact order
const { ref, inView, entry } = useInView(options);

// Or array destructuring, making it easy to customize the field names
const [ref, inView, entry] = useInView(options);

上記のように返り値は配列orオブジェクト。

その返り値について型がこちら

node_modules/react-intersection-observer/index.d.ts

export declare type InViewHookResponse = [
    (node?: Element | null) => void,
    boolean,
    IntersectionObserverEntry | undefined
] & {
    ref: (node?: Element | null) => void;
    inView: boolean;
    entry?: IntersectionObserverEntry;
};

hoshita

オブジェクトで受け取る場合は、ref,inVIew,entryという名前で受け取る必要がある。
もし、そこから名前を変えたい場合は:のあとに変数名を指定すると、その名前を変数として使用できる。

  const { ref, inView, entry }  = useInView(options);

  const {
    ref: buttonRef,
    inView: buttonInView,
    entry: buttonEntry,
  } = useInView(options);

配列の場合は、受け取る値に直接任意の名前を与えることができる。

const [buttonRef, buttonInView, buttonEntry] = useInView(options);

ドキュメントに書いてあるように、オブジェクトであれば正確な順番を覚える必要がなく、配列であれば名前の変更が容易。

hoshita

refだけを使用したい場合、オブジェクトか配列どちらで取得した方が読みやすいか比較する

const { ref }  = useInView(options);

const [ref] = useInView(options);

1番目のrefであれば大差なさそう。

ただ同じファイル内でuseInVIewを複数回使う場合は、それぞれに変数名を与えないと名前重複でエラーが発生する。

その場合は変数名を設定しやすい配列の方が良さそう。

hoshita

2番目のInViewを使用したい場合

const { inView }  = useInView(options);

const [, inView] = useInView(options);

3番目のentryを使用したい場合

const { entry }  = useInView(options);

const [, , entry] = useInView(options);

オブジェクトで受け取った方が直感的で読みやすいと感じた。

ケースとしてrefを使わない場面は少ない気がするが、もし1番目の要素を使用しないならオブジェクトで受け取る方が良さそう。

このスクラップは2024/05/01にクローズされました