React × TypeScriptの型で Dispatch<SetStateAction<xxx>>が分からない

Question

わからないこと

ReactとTypeScriptを勉強しています。
グローバルで値を管理しようとしたところ見慣れない型を見つけました。以下のコードのDispatchとSetStateActionの型の意味がわかりません。それぞれの意味を調べてみましたが、いまいちピンときませんでした。どういう時にこの型を使用するのかも教えていただけると助かります。

type LoginUserContextType = {
  loginUser: User | null;
  setLoginUser: Dispatch<SetStateAction<User | null>>
}

調べたこと

• Dispatch・・・戻り値がない型

• SetStateAction・・・引数の型を返す何かしらの関数---

Comments

[hoshi-takanori]

useState が返す更新関数の型ですね。その型にこだわるより、使い方を理解する方が大事かと…。
https://tyotto-good.com/blog/usestate-basic

Answer 1

その型はuseStateというHookの、

const [loginUser, setLoginUser] = useState<User | null>(null);

setLoginUserが内包している型になります。

setLoginUserを子コンポーネントに継承したい、もしくは継承した際に、子コンポーネント側にてsetLoginUserを受け取る際に、その型をTypeとして設定、用意する時に使用します。

もの凄く大雑把な例になりますが、以下のような使用方法があります。

export const SampleHoge = () => {
    const [value, setValue] = useState<string | null>(null);
    
    return <DisplayValue value={value} setValue={setValue} />;
};

type DisplayValueProps = {
    value: string | null;
    setValue: Dispatch<SetStateAction<string | null>>;
};

const DisplayValue: FC<DisplayValueProps> = (props) => {
    const {value, setValue} = props;
    
    return (
        <>
            {value}
            <IconButton
                className="SampleName"
                onClick={() => {
                    if (value === null) {
                        setValue("hoge");
                    } else {
                        setValue(null);
                    }
                }}
            >
                <Clear />
            </IconButton>
        </>
    );
};