実現コード
const navigation = useNavigation();
useLayoutEffect(() => {
if (response && navigation) {
navigation.setOptions({
title: `${response}`,
});
}
}, [navigation, response]);
useLayoutEffectって?
実装していて、useLayoutEffect
っていうhooks
が聞き覚えなさ過ぎて、react native
専用のhooks
だと思っていたけど、調べるとreact
が用意しているhooks
らしい。
useLayoutEffect は useEffect の一種ですが、ブラウザが画面を再描画する前に実行されます。
とのことで、さらに、
useLayoutEffect はパフォーマンスを低下させる可能性があります。可能な限り useEffect を使用することを推奨します。
とのことだった。できる限り使わないでほしいとのことなので知らなくても無理はなかったかもしれない。
今回は、useLayoutEffect
を使用することで、タイトルが描画される前に処理が実行されるため、新しいタイトルが即座に反映されるようになっている。
ただこのコードだと、response
が取得されるまでは元のタイトルが表示されるので、response
がfalse
の時の条件を付与する必要があるということにいまさら気が付いた。