Как предотвратить повторную загрузку повторно используемым компонентом его состояния между различными маршрутами

Question

Я создал многократно используемый компонент на основе хуков, который я использую на разных маршрутах в разных компонентах, один на /, а второй на /home. Компонент имеет свое собственное состояние, и он вызывает axios вызов метода useEffect() для некоторых внешних данных и обновляет его состояние. Компонент перезагружается, когда я перемещаюсь между маршрутами, упомянутыми выше, и я не хочу предотвращать такое поведение.

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

Я пытался манипулировать вызовами axios и некоторыми if операторами для проверки изменений состояния, я также использовал массив зависимостей [foo, bar] для проверки изменения состояния.

    useEffect(() => {

        const getPosition = () => {
            return new Promise((resolve, reject) => {
                navigator.geolocation.getCurrentPosition(resolve, reject);
            })
        }

        if(!lat && !lon){
            getPosition()
                .then((position) => {
                    const { coords } = position
                    const { latitude, longitude } = coords
                    setLat(latitude)
                    setLon(longitude)
                })
        }

        if (lat && lon) {
            axios.get(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=bdb482c8614b9ac69c8f291d8e686e43`)
                .then(res => {
                    const { data } = res
                    const { name, main, weather } = data
                    const { temp, pressure, humidity, temp_max } = main
                    setRegion(`Region: ${name}`)
                    setHumid(`Humidity: ${humidity}%`)
                    setPress(`Preassure: ${pressure} hPa`) // hard space between template and hPa
                    setClouds(weather[0])
                    setMaxTemp(`Max Temp: ${Math.round(temp_max - 273.15)}°C`)
                    setTemp(`Temperature: ${Math.round(temp - 273.15)}°C`)
                })
                .catch(err => console.log(err))
        }
    }, [lat, lon])

Я получаю:

index.js: 1375 Предупреждение. Невозможно выполнить обновление состояния React для неустановленного> компонента. Это не работает, но это указывает на утечку памяти в вашем> приложении. Для исправления отмените все подписки и асинхронные задачи в функции очистки> useEffect. в погоду (на main.js: 206) в Main (создан Context.Consumer)

Ожидаемое поведение - не перезагружать компонент, когда он загружен один раз.