ReactNativeで画面マウント時に一度だけ関数を実行させたい

Question

前提

ReactNativeを使ってスマホアプリを作っています。
新たな画面が読み込まれた時に一度だけ関数を実行させて値を取得したいです。
取得した値はとあるボタン押下時に使用します。

実現したいこと

・画面読み込み時に一度だけ関数を実行して値を取得したい
・取得した値はとあるボタン押下時に使用する

発生している問題・エラーメッセージ

画面が読み込まれるとすごい勢いで関数が何度も呼ばれる、無限ループに陥る。

該当のソースコード

const ChargeHow = (props: ChargeHowType) => {

    const dispatch = useAppDispatch();
    const {
        setModalChooseTime,
        ・・・・
        routeName,
    } = props;
    
　  // これが何度も実行されてしまう
    const fetchResponce = () => {
        dispatch(
            createResponce({
                ・・・・・
                ),
            }),
        ).then(
            response => {
                return response;
            },
        );
    };

    const resultRes = fetchResponce();

試したこと

useEffectを使うことで一度だけ実行することができたものの、useEffectのブロック内でしか取得した値が使用できないため意味がなかった。

補足情報（FW/ツールのバージョンなど）

react": "17.0.2
"react-native": "0.68.1",

Comments

[hoshi-takanori]

useEffect を使えばいいと思いますが、「useEffectのブロック内でしか取得した値が使用できない」とはどういうことでしょうか？

追記：結果は普通の変数では受け取れませんので、useState とかを使うと良いでしょう。

Answer 1

hoshi-takanoriさんコメントありがとうございます。
ご指摘通り「useEffect」と「useState」を使うことで、画面読み込み時に一度だけ関数を実行して取得した値をボタン押下時に使用することができました！
コードは大まかに下記のようになります。

const ChargeHow = (props: ChargeHowType) => {

    const dispatch = useAppDispatch();
    const {
        setModalChooseTime,
        ・・・・
        routeName,
    } = props;
    
    // 値をセットするための変数と関数
    const [res_value, set_res_value] = useState(0);

　  // 値を取得する関数
    const fetchResponce = () => {
        dispatch(
            createResponce({
                ・・・・・
                ),
            }),
        ).then(
            response => {
                set_res_value(response); // 値をセット
            },
        );
    };

　　// 画面読み込み時に一度だけ関数を実行する
    useEffect(() => { 
        fetchResponce();
    }, []);

useEffectを使うことで画面読み込み時に一度だけ関数を実行し、その関数の中でuseStateの値をセットする関数を使うことでボタン押下時でも使用できる変数に値をセットできました。