reactjs - How to update state when routing

Question

I have the following button.

const [search, setSearch] = useState(false);
<Button component={RouterLink}
        to="/cr-journey"
        onClick={() => setSearch(true)}
        fullWidth>Search
    </Button>

I would like to update the state when the button is click. Probably because the button will route to a different component then the state will not be updated.

const xxx = useCallback(() => { dispatch(journeyAction.journeyFilterData(search));}, [dispatch,search]);
useEffect(() => { xxx() });

How can I make sure useEffect will update the state when clicking the button?

Thank you

question from:https://stackoverflow.com/questions/65835245/how-to-update-state-when-routing

Answer 1

When route changes basically component unmounts.And you cannot control local state of unmounted component.

But you can update redux state when component unmounts.

useEffect(() => {

   return () => // your dispatch function  

}, []);

But if component does not unmount just paste update function in useEffect without return keyword.

 useEffect(() => {

      dispatch(someFunc()); // when search updates this will be call
    
 }, [search]);