React Context - useEffect

Question

Is it correct that a useEffect is listening to the context?

const {
  data,
} = useContext(AuthContext);

async function getProfile() {
    try {
      setLoading(true);
      console.info('getProfile called', data.token);
      const response = await getByToken(data.token);
      if (response && response.ok) {
        setFirstName(response.userData.firstName);
        setLastName(response.userData.lastName);
        setEmail(response.userData.email);
      }
    } catch (e) {
      console.info('Error', e);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (data.userData) {
      getProfile();
    }
  }, [data.userData]);

This is the way I found to make it make calls to getProfile with a userData different from null

Answer 1

Yes that is how it works. Although it might be incorrect to say that useEffect is listening to changes in the variable. The callback inside useEffect runs because of 2 conditions being fulfilled:

1. a render happens.
2. the dependency array has a changing dependency

The rerender is because the context value has changed and the inner component is a Consumer of the Context (cause it calls useContext). And since the dependency included in the useEffect dependency array also changes, the callback is run.

A sandbox link with a simple example