How do I reset a screens state to its initial state when using react navigation?-CodePudding

I want to reset the state (back to initial state) in a functional component when navigated via navigation.navigate().

Say a user navigates to an A screen and some state is set, then they click a button on that screen and navigate to a B screen via navigation.navigate('B);`

The problem Im having appears when the user clicks another button to go back to the A screen (again via navigation.navigate('A');). The A component at this point is still holding all the state from its initial mount. I want the state to be reset to the initial state for the A component so users have to start whatever process over again from the beginning.

Is there a way to accomplish this? I attempted some half measure of listening for that navigation back and resetting the state with a bunch of set hooks, but it feels wrong and does not work very well.

Edit:
Someone asked for a code sample, so a quick example is below. The problem is; if someone navigates to component A and clicks the button that calls setInput which makes text appear above the buttons, they then click the other button labeled Go To B which react navigation takes them to component B. If they then proceed and click Go To A and are then navigated back to component A, component A will still have the input state equal to Hello. I want it to be reset back to an empty string (hopefully without having to call setInput("").

import React, { useState } from "react";
import {Center, Button, Text} from "native-base";

const A = ({ route, navigation }) => {
  const [input, setInput] = useState("");

  return (
    <Center>
      <Text>{input}</Text>
      <Button onPress=(() => { setInput("Hello") })>Click Me For Words</Button>
      <Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
    </Center>
  );
};

const B = ({ route, navigation }) => {
  return (
    <Center>
      <Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
    </Center>
  );
};

CodePudding user response：

You can call the React Native life cycle method like as:

 componentDidMount() {
    console.log('onResume')
    //call your method here
  }

CodePudding user response：

You can try this, it will set setInput("") when you come back to screen A from screen B

useEffect(() => {
   const unsubscribe = navigation.addListener('focus', () => {
         setInput("");
   });
   return unsubscribe;
}, [navigation]);

import React, { useState, useEffect } from "react";
import {Center, Button, Text} from "native-base";

const A = ({ route, navigation }) => {
  const [input, setInput] = useState("");
  useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
         setInput("");
     });
     return unsubscribe;
  }, [navigation]);

  return (
    <Center>
      <Text>{input}</Text>
      <Button onPress=(() => { setInput("Hello") })>Click Me For 
      Words</Button>
      <Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
    </Center>
  );
};

const B = ({ route, navigation }) => {
  return (
    <Center>
      <Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
    </Center>
  );
};