I use the useIsFocused() function from react-navigation/native as a dependency of useEffect to listen to screen focus, so when I navigate back it enters the if with the isFocused and the myRoute.params.isChecked to execute the function.

But it's not updating the route state on setRoute(newRoute); and setIsLoading(false). The setIsLoading(true) inside the function is called but the one inside the useEffect route isn't because it never call the route update. The screen keeps loading infinitely because of that.

Why it not updates the isLoading and route states?

import React, { useEffect, useState } from 'react';
import { useFocusEffect, useIsFocused } from '@react-navigation/native';

const MyRoute = ({ navigation, route: myRoute }) => {
  const [route, setRoute] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  const isFocused = useIsFocused();

  /** ... */ 

  useEffect(() => {
    console.log('route call')
    if (Object.keys(route).length) {
      setIsLoading(false);
    }
  }, [route]);

  useEffect(() => {
    console.log(isLoading);
  }, [isLoading]);

  useEffect(() => {
    // trigger route refresh on navigate when checkin/checkout
    if (isFocused && myRoute.params?.isChecked) {
      const updateRouteWithCheckInOut = () => {
        setIsLoading(true);
        const newRoute = route;

        for (let i = 0; i < newRoute.visitas.length; i++) {
          const { sub_id, check_in_out } = myRoute.params;

          if (newRoute.visitas[i].sub_id === sub_id) {
            newRoute.visitas[i].realizada = true;
            newRoute.visitas[i].check_in_out = check_in_out;
          }
        }
        debugger;

        setRoute(newRoute);
      };

      updateRouteWithCheckInOut();
    }
  }, [isFocused]);

  /** ... */
}