If the callback of a useEffect contains a state variable not listed in its trigger array, could this create an inconsistency?

  const [first, set_first] = useState(false);
  const [is_mobile, set_is_mobile] = useState(false);
  useEffect(() => {
    if (!first) {
      window.scrollBy({ top: is_mobile ? -180 : -195 });
    }
  }, [first]);

is_mobile is not part of the useEffect's dependency, but is part of its callback. Could this potentially create an inconsistency?

For example,

• is_mobile is changed
• useEffect is not fired
• first is changed. Will useEffect use the outdated value of is_mobile

Short answer: no.

Long answer:

React by it-self contains not magic and does not modify the JS language, it only uses it. Let's be practical and take your example:

  const [first, set_first] = useState(false);
  const [is_mobile, set_is_mobile] = useState(false);
  useEffect(() => {
    if (!first) {
      window.scrollBy({ top: is_mobile ? -180 : -195 });
    }
  }, [first]);

Some generic concept first:

• useState will return the current value (initialized to the given initialValue or undefined if no one is present), which is a constant btw, and a setter function.

• useEffect will take the callback and execute it if the dependency array given is "shallow different" than on the previous execution (and the first time it is always called).

• Because your component is defined in a single function, the only way it could render it is to call it.

OK, now that we have made clear the basic concepts, let's consider you want to modify a state. You call its setter function:

set_is_mobile(true);

This function is provided by React, so we don't know exactly what happens, but we can imagine:

1. React store the new value is some internal array or object.
2. It calls the component function once again: It's a "re-render".

On this new render, the same exact useState() instruction is invoked (this is why it's so important for them to always be invoked in the same order), but it returns the new value, and the same setter function. The other states did not changed, so the same value is returned for them.

The useEffect is called too, but the dependency array is the same (first value did not changed) so the callback is ignored. However, the callback had the updated value for is_mobile, if it were invoked.

Now you decide to update the second state, set_first(true). Once again, a re-render is triggered, and the same exact process occurs. The newly up-to-date first state is returned by the first useState, and the "not-new-but-still-up-to-date" is_mobile state is returned by the second useState. Then, the useEffect is called, and the callback passed to it has the two up-to-date values, as always. But this time, because the value of first changed, the callback is being invoked by React. And it has all the up-to-date values.

To sum-up:

The dependencies of the useEffect controls when a callback is being invoked, but every values used inside are always up-to-date.

I hope this was clear and satisfies your comprehension about React states and effects!