useFocusEffect vs useEffect | Chinese Rule of Eight

useFocusEffect

By defintion:

1	function useFocusEffect(effect: EffectCallback): void;

It just has an effect to run.

For useFocusEffect, when you hit the current page, it runs the effect, and caches the cleanup.
When you go to the next page, it’ll execute the next page’s effect first. And then runs the clean up of the previous page.

So in our case

when we hit Page1, execute effect Page 1 (A).
Goes to page 2, execute effect page 2 (K), clean up Page 1 (Z)
Goes to page 3, execute effect page 3 (M), clean up Page 2 (R)

From page 3 back to page 2, clean up Page 3 (N), execute effect Page 2 (K)
From page 2 back to page 1, clean up Page 2 (R), execute effect Page 1 (A)

A huge difference is that useFocusEffect does not have a dependency list, which it depends on for it to run its cleanup/effect.

import React, { useEffect } from 'react';

import { Button, View } from 'react-native';

import {

NavigationContainer,

useNavigation,

useFocusEffect,

} from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

const Page1 = () => {

const { navigate } = useNavigation();

useFocusEffect(() => {

console.log('A');

return () => {

console.log('Z');

};

});

return (

<View>

<Button onPress={() => navigate('PAGE2')} title="Go to Page2" />

</View>

);

};

const Page2 = () => {

const { navigate } = useNavigation();

useFocusEffect(() => {

console.log('K');

return () => {

console.log('R');

};

});

return (

<View>

<Button onPress={() => navigate('PAGE3')} title="Go to Page3" />

</View>

);

};

const Page3 = () => {

useFocusEffect(() => {

console.log('M');

return () => {

console.log('N');

};

});

return null;

};

const Stack = createStackNavigator();

const App = () => {

return (

<Stack.Navigator initialRouteName="PAGE1">

<Stack.Screen name="PAGE1" component={Page1} />

<Stack.Screen name="PAGE2" component={Page2} />

<Stack.Screen name="PAGE3" component={Page3} />

</Stack.Navigator>

</NavigationContainer>

);

};

export default App;

useEffect

Whereas for useEffect, we also have an effect and cleanup, but they depend on the dependency list’s variables changing.
If it changes, then we’ll run the clean up, and then the effect.

If nothing changes in the variables, then we do nothing!

import React, { useEffect, useState } from 'react';

import { Button, View } from 'react-native';

import {

NavigationContainer,

} from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

const Page1 = () => {

const [b, setB] = useState(false);

useEffect(() => {

console.log('sign you in!');

return () => console.log('sign you out!');

}, [b])

return (

<View>

<Button onPress={() => setB(!b)} title="push me" />

</View>

);

};

const Stack = createStackNavigator();

const App = () => {

return (

<Stack.Navigator initialRouteName="PAGE1">

<Stack.Screen name="PAGE1" component={Page1} />

</Stack.Navigator>

</NavigationContainer>

);

};

export default App;