useEffect not working in Stack Navigation

Question

I have 2 screens in Stack Navigator.

All Categories, Add a new category

In the All Categories screen, all categories are displayed.

useEffect(() => {
    loadCategories();
  }, []);

This is the useEffect hook that load all the categories.

I have made a touchable opacity to navigate to Add a new category screen, So users can easily add a new category if needed.

What I'm expecting to do: So after adding a new category and going back to the All Categories screen loadCategories() should run again, So the user can see the newly added category there. But the problem is when I add a new category and go back the loadCategories() function doesn't execute again. What will be the cause for this?

try get('domain/addCategory').then( (res)=> {loadCategories()}) — Ahmed5G, Oct 04 '22 at 17:25
[related](https://stackoverflow.com/questions/60182942/useeffect-not-called-in-react-native-when-back-to-screen?rq=1) — Ahmed5G, Oct 04 '22 at 18:10

score 3 · Answer 1 · answered Oct 05 '22 at 05:19

If you want to load categories when screen is focus

function Categories({ navigation }) {
  React.useEffect(() => {
    const loadCategories = navigation.addListener('focus', () => {
     loadCategories();
    });

    return loadCategories;
  }, [navigation]);

  ...rest
}

score 1 · Answer 2 · answered Oct 05 '22 at 05:43

Often we need to fetch data when we come to some screens back,

For this, there is a hook from the @react-navigation/native library (useFocusEffect), which we can use to accomplish such requirements.

For Ex.

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(user));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

In the above code, Whenever the ProfileContent screen is getting focused, the code inside the useFocusEffect will re-run.

Refer to official docs for in-depth understanding.

Mishen Thakshana · Accepted Answer · 2022-10-28T10:57:01.873

1

I found this answer which is relatable to this question. https://stackoverflow.com/a/62703838/19317939

import {useIsFocused} from '@react-navigation/native';

...
const isFocused = useIsFocused();

useEffect(() => {
    if (isFocused) loadCategories();
  }, [isFocused]);

edited Oct 28 '22 at 10:57

answered Oct 05 '22 at 06:08

Mishen Thakshana

1,050
1
14
38

useEffect not working in Stack Navigation

3 Answers3