react-navigation v4で追加された新たなhooks

react-navigation v4 で使える hooks api に新しく hooks が追加されました。

• useFocusEffect
• useIsFocused

useFocusEffect

useFocusEffect は使っているScreenにFocusがあたった時、及びFocusが外れた時にサイドエフェクトを起こします。
useEffect の Screen 版のようなものですね。

function MyScreen() {
  useFocusEffect(useCallback(() => {
    console.debug("screen takes focus");
    return () => console.debug("screen loses focus");
  }, []));
  return <View>...</View>;
}

useIsFocused

useIsFocused は現在screenがfocusされているか否かをbooleanで返します。

function MyScreen() {
  const isFocused = useIsFocused();
  return <Text>{isFocused ? 'Focused' : 'Not Focused'}</Text>;
}

react navigationのstackはmountが発火されるタイミングがわかりにくいので、screen毎のuseEffectのようなhooksがが使える様になったのはありがたいですね。

なお、次に来るreact-navigation v5はフルリライトでガラッと使い方が変わるので、このhooksを活用出来る期間はそう長くはないかもしれません。