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

Tushar Shahi · Accepted Answer · 2022-07-22 19:18:52Z

2

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:

a render happens.
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

answered Jul 22, 2022 at 19:18

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Context - useEffect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related