Refactoring Logout Component into Function Component – React native

I think Ryan’s answer is good but insufficiently answers your questions. It seems you might have a larger lack of understanding the React component lifecycle so I’ll answer your questions more generally.

useEffect(() => {
  if (XYZ) {
    ... side-effect ...
  }
}, [XYZ]);

Question 1

Is [XYZ] useful/necessary as a dependency in the useEffect() hook in
this case?

In this case, code-wise, yes, absolutely it is. It’s an external dependency that potentially changes and thus should be listed in the dependency array in order to retrigger the side-effect, i.e. the useEffect‘s callback function.

Not taking into account the actual business logic/use case here, just looking at code and syntax, what this means is any time dependencies update, run a side-effect.

A good general rule-of-thumb, and something the eslint-plugin-react-hooks plugin will help catch for you, is basically anything that is externally (to the hook) declared within the React function body is considered an external dependency. This includes the props object, any declared component state, any locally declared variables, etc.

From the React docs: Conditionally firing an effect

If you use this[dependency array] optimization, make sure the array includes all values
from the component scope (such as props and state) that change over
time and that are used by the effect. Otherwise, your code will
reference stale values from previous renders.
…

Which leads naturally to your other question.

Question 2

What would behave differently if I didn’t include it here?

A useEffect hook, or any hook really, with missing dependencies simply won’t be retriggered when the missing dependency value changes.

The rest of the note from above:

…
If you want to run an effect and clean it up only once (on mount
and unmount), you can pass an empty array ([]) as a second argument.
This tells React that your effect doesn’t depend on any values from
props or state, so it never needs to re-run. This isn’t handled as a
special case — it follows directly from how the dependencies array
always works.

If you pass an empty array ([]), the props and state inside the effect
will always have their initial values. While passing [] as the second
argument is closer to the familiar componentDidMount and
componentWillUnmount mental model, there are usually better solutions
to avoid re-running effects too often. Also, don’t forget that React
defers running useEffect until after the browser has painted, so doing
extra work is less of a problem.

We recommend using the exhaustive-deps rule as part of our
eslint-plugin-react-hooks package. It warns when dependencies are
specified incorrectly and suggests a fix.

The logout effect is pretty poor example since the optimal solution is to handle that logic completely outside a React component and any component lifecycle. Next to that though, the business logic/use case there is to run the logout logic once when the component mounts and then navigate away. The component and useEffect hook exists only to trigger the logout flow and navigate to "Auth", something that is easily achieved in an asynchronous Redux action. In the case you do need to use the component and the useEffect hook then logically it makes sense to omit the dependencies.

useEffect(() => {
  props.deauthenticateUser();
  props.navigation.navigate('Auth');
}, []);

Note however that if you are using the eslint-plugin-react-hooks plugin that it will complain about missing dependencies, props in this case and want to add them. Again, for the reasons listed above, this is completely expected and correct/desired code. BUT if you still wanted to use an empty dependency array so the effect only runs once when the component mounts then you can, at your discretion, disable the linting rule for that specific line. If you do this then the recommendation is to also document why you are deviating from recommended settings.

Example:

useEffect(() => {
  props.deauthenticateUser();
  props.navigation.navigate('Auth');
  // NOTE: Effect triggered on component mount
  // Check dependencies if side-effect logic is updated.
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

A more concrete example is refetching data based on a parameter.

Example:

<Route path="/product/:id" element={<ProductDetail />} />

…

const ProductDetail = () => {
  const { id } = useParams();
  const [details, setDetails] = React.useState();

  useEffect(() => {
    fetch(`/product/${id}`)
      .then(setDetails);
  }, [id, setDetails]);

  ...
};

In this scenario the id parameter and the setDetails function are externally declared and referenced within the useEffect callback and added to the dependency array.