Categories
Mastering Development

When does a functional component “execute” in React Native when context changes?

I have a screen in React Native written as a functional component that uses a context containing location data, and a hook that sets the location using watchPositionAsync.

const TrackCreateScreen = ({ isFocused }) => {
  const { addLocation } = useContext(LocationContext);
  const [err] = useLocation(addLocation);
  console.log(isFocused);
  return (
  ...
  );
};

When I navigate from that screen to another screen using a BottomTabNavigator in which both screens are located false gets logged. This means that the function inside the component gets called even if the component isn’t displayed on the screen just because that component uses a context that changed (it can’t be the hook causing the execution as the err state inside the hook doesn’t change)…

Is this always the case, with any screens? Wouldn’t this make an app unnecessarily slow on every change of context? And if no, why is this the case here?

Leave a Reply

Your email address will not be published. Required fields are marked *