Перехватчики React Native - правильное использование useEffect ()?

Question

Я новичок в хуках, наткнулся на эту настройку на SO и хотел подтвердить, что это правильный образец. Раньше я получал сообщение об утечке RN «размонтированный компонент», и это, похоже, решило проблему. Я пытаюсь каким-то образом мими c compnentDidMount. Это часть процесса проверки номера телефона и onMount. Я хочу просто проверить наличие navigation, а затем отключить побочный эффект, установить установленный true и затем правильно размонтировать.

const SMSVerifyEnterPinScreen = ({ route, navigation }) => {

  const [didMount, setDidMount] = useState(false)
  const { phoneNumber } = route.params

  useEffect(() => {
    if(navigation) {
      signInWithPhoneNumber(phoneNumber)
      setDidMount(true)
    }
    return () => setDidMount(false)
  }, [])

  if (!didMount) { return null }

  async function signInWithPhoneNumber(phoneNumber) {
    const confirmation = await auth().signInWithPhoneNumber('+1'+phoneNumber)
    ...
  }

  return (
    ...
  )
}

RN 0.62.2 с react-nav 5 - спасибо!

Answer 1

Поскольку signInWithPhoneNumber является асинхронной функцией c и будет setState, вы увидите предупреждение о том, что компонент отключен до того, как будет доступен ответ

Для обработки такого сценария ios вы можете сохранить переменную в отслеживайте, смонтирован он или нет, и только тогда установите состояние, если смонтированная переменная истинна

Однако вам не нужно возвращать null, если компонент был размонтирован, так как это ничего не sh. Компонент удаляется из поля зрения и в любом случае ничего не будет отображать.

Также вам не нужно поддерживать это значение в состоянии, вместо этого используйте ref

const SMSVerifyEnterPinScreen = ({ route, navigation }) => {

  const isMounted = useRef(true)
  const { phoneNumber } = route.params

  useEffect(() => {
    if(navigation) {
      signInWithPhoneNumber(phoneNumber)
    }
    return () => {isMounted.current = false;}
  }, [])


  async function signInWithPhoneNumber(phoneNumber) {
    const confirmation = await auth().signInWithPhoneNumber('+1'+phoneNumber)
    ...
  }

  return (
    ...
  )
}