Re-render component when navigating the stack with React Navigation

Question

I am currently using react-navigation to do stack- and tab- navigation.

Is it possible to re-render a component every time the user navigates to specific screens? I want to make sure to rerun the componentDidMount() every time a specific screen is reached, so I get the latest data from the server by calling the appropriate action creator.

What strategies should I be looking at? I am pretty sure this is a common design pattern but I failed to see documented examples.

Answer 1

If you are using React Navigation 5.X, just do the following:

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

export default function App(){

    const isFocused = useIsFocused()

    useEffect(() => {
        if(isFocused){
            //Update the state you want to be updated
        }
    }, [isFocused])

}

The useIsFocused hook checks whether a screen is currently focused or not. It returns a boolean value that is true when the screen is focused and false when it is not.

Answer 2

React Navigation lifecycle events quoted from react-navigation

React Navigation emits events to screen components that subscribe to them. There are four different events that you can subscribe to: willFocus, willBlur, didFocus and didBlur. Read more about them in the API reference.

---

Let's check this out,

With navigation listeners you can add an eventlistener to you page and call a function each time your page will be focused.

const didBlurSubscription = this.props.navigation.addListener(
  'willBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

Replace the payload function and change it with your "refresh" function.

Hope this will help.

Answer 3

You can also use also useFocusEffect hook, then it will re render every time you navigate to the screen where you use that hook.

useFocusEffect(()=> {
    your code
})

Answer 4

At the request of Dimitri in his comment, I will show you how you can force a re-rendering of the component, because the post leaves us with this ambiguity.

If you are looking for how to force a re-rendering on your component, just update some state (any of them), this will force a re-rendering on the component. I advise you to create a controller state, that is, when you want to force the rendering, just update that state with a random value different from the previous one.

Answer 5

This one works fine: We listen to the focus event which trigger whenever the current screen is printed. In which case, we call the callback function attached that define what we want to do. And don't forget to remove the event listener when you're done.

import { useNavigation } from "@react-navigation/native";
const navigation = useNavigation();
useEffect(() => {
  const didFocus = navigation.addListener(
    'focus',
    () => {
      yourFunctionToCall();
    }
  );
  
  // Remove the listener when you are done
  return didFocus;
}, [navigation]
);

Answer 6

To trigger a render when navigating to a screen.

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

// Quick little re-render hook       
function useForceRender() {
    const [value, setValue] = useState(0);
    return [() => setValue(value + 1)];
}

export default function Screen3({ navigation }) {
  const [forceRender] = useForceRender();

  // Trigger re-render hook when screen is focused
  // ref: https://reactnavigation.org/docs/use-focus-effect
  useFocusEffect(useCallback(() => { 
    console.log("NAVIGATED TO SCREEN3")
    forceRender();
  }, []));
}

Note:

"@react-navigation/native": "6.0.13",
"@react-navigation/native-stack": "6.9.0",