order of execution in useEffect clean up-CodePudding

  useEffect(() => {
    return history.replace({
      pathname: "path/A",
    });
  }, []);

  useEffect(() => {
    return history.replace({
      pathname: "path/B",
    });
  }, []);

When the component unmounts, what will be the URL? What determines the order of execution of the above 2 useEffect?

CodePudding user response：

Due to the nature of you passing no deps; both of these useEffects will only be rendered on component mount. Therefore, the result is (and always will be) "path/B".

If you wanted it to change on component unmount, you'd need to add a return function to one of them.

useEffect(() => {
    history.replace({ pathname: "path/B" });
    return () => history.replace({ pathname: "path/B" });
}, []);