Избегайте утечки памяти в ваших приложениях React.js

В информатике утечка памяти - это тип утечки ресурсов, который происходит, когда компьютерная программа неправильно управляет выделением памяти таким образом, что память, которая больше не нужна, не высвобождается. Утечка памяти также может произойти, когда объект хранится в памяти, но не может быть доступен для работающего кода. - источник в Википедии

Итак, вы только что добавили функцию, красиво ее стилизовали, а визуальные эффекты совпадают с вашим дизайном. Я знаю, что это прекрасное чувство, но вы уверены, что что-то не забыли? Вы задумывались о сложных случаях, адаптивных представлениях для планшетов и мобильных устройств, модульных тестах? Вы просматривали свой собственный код?

Как насчет отмены сетевых вызовов, на которые ответ не пришел, когда для него существовал компонент, а пришел только после того, как компонент больше не существовал?

Если вы пишете приложения response.js и интегрируете к нему множество API в разных представлениях (также известных как страницы), может возникнуть утечка памяти, если пользователь быстро перемещается между страницами, когда сеть слишком медленная. К счастью, современные браузеры слишком умны и обычно не дают сбоев, но зачем оставлять проблему, если решение простое.

Во время разработки мы в основном находимся в высокоскоростной сети и обычно не перемещаемся между страницами так быстро, поэтому редко замечаем это предупреждение React.

Как узнать, есть ли в вашем приложении эта проблема, и как ее воспроизвести?

замедлить работу сети, выбрав хотя бы вариант «Fast 3G» в инструментах разработчика Chrome, параметр сети

скажем, когда приложение запускается на домашней странице, оно выполняет вызов API, а когда пользователь нажимает на элемент, оно переходит на страницу сведений и выполняет там другой вызов API.

перейдите на домашнюю страницу, нажмите кнопку обновления и до того, как вызов API вернется с ответом, нажмите кнопку «Далее» в браузере, чтобы перейти на страницу сведений (при условии, что у вас есть этот URL-адрес в истории браузера)

когда вызов API возвращается с ответом, вы увидите выше предупреждение React, потому что теперь ответ не имеет места на экране, поскольку домашняя страница отключена.

Как исправить эту проблему?

Устранить эту проблему очень просто. просто отмените запрос при отключении компонента. Я исправил эту проблему в своем проекте, который использует библиотеку Axios для вызовов API.

В функциональном компоненте, прежде чем делать запрос axios, просто возьмите cancelToken и сохраните его, используя ссылки следующим образом:

const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  const sourceRef = React.useRef(source)

Затем в своем useEffect отмените сетевой запрос в функции возврата, которая будет вызываться React при отключении компонента.

Вот пример кода:

useEffect(() => {
      const source = sourceRef.current
      console.log(source.token)
      if(state.results.length === 0 && state.searchPhrase.length === 0)
      {
        setMessage("")
        setShowLoader(true)
        const fetchData = async ()=> {
          try{
            const countries = await Apis.getCountries(source.token)
            dispatch({type:'SET_COUNTRIES', payload:countries})
            setShowLoader(false)
          }catch(error)
          {
            if(axios.isCancel(error))
            {
              console.log("axios cancel")
            }
            setRedirectToError(true)
          }
        }
        fetchData()
        return () => {
          console.log("unmount..")
          setShowLoader(false)
          source.cancel()
        }
      }
  },[state.results, state.searchPhrase, dispatch])