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

CodePudding user response：

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