Question 261668 in React native Question posted in
The official React Native documentation can be found here.

React native – How to prevent execute useEffect when back to previous screen react-native stack navigator

In my usecase there are two screens (stacknavigator) and from the first screen it need to get data from firebase (using getList() method) and need to show them in a flat list. Then detailed screen show all the data. When clicking a flatlist item, the getList() method executes only one time and not executes every time I want.
Therefore I used the following useIsFocused method to solve that.

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


  const isFocused = useIsFocused();

  useEffect(() => {
    if (isFocused == true) {
      getList();
     }

  }, [isFocused]);

But when navigating back to the first screen from the detailed screen need to persist the data that got from the getList() method without executing/refreshing it again. If I don’t use useIsFocused() it is working fine because by default the not refreshing it when go back to previous screen but in that case my first requirement can not be fulfilled.
Any solution for this? Appreciate your inputs.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to solve this issue by following way.

    const [dataFetched, setDataFetched] = useState(false);

  useEffect(() => {
    if (!dataFetched) {
    if (isFocused == true) {
      getStoryList();
      setDataFetched(true);
     }}

  }, [isFocused]);

  2. 0

    When going to the detailed screen, you can take the data from the first screen along with you. So, when you come back from the detailed screen to the first screen, you still have the data without doing anything special. You can use navigate function and put data in params object like this:

    navigation.navigate('DetailedScreen', { data: data });

    And in the detailed screen, you can access the data using route.params.data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search