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

Question

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>
  );
};

Answer 1

I found the answer to my own question. Basically if you want to unmount/remount the component (which will reset its state) you can do:

const resetAction = CommonActions.reset({
  index: 0,
  routes: [{ name: "A" }]
});
navigation.dispatch(resetAction);

Answer 2

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>
  );
};

Answer 3

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

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

Answer 4

React Navigation unfortunately doesn't unmount the component when changing screens for some ungodly reason. If you want to get back to default React behaviour you can use this snippet anywhere you would use useState.

import { useEffect, useState } from "react";

export const useCustomState = (navigation: any, defaultValue: any) => {
    const [value, setValue] = useState(defaultValue);

    useEffect(() => {
        return navigation.addListener("focus", () => {
            setValue(defaultValue);
        });
    }, [navigation]);

    return [value, setValue];
};

And using it like so

const [counter, setCounter] = useCustomState(navigation, 0);