useEffect is in infinite loop - reactjs

Question

I have a component which once once it rendered I need to redirect a user to another path and I'm using useEffect hook of react but it's getting rendered over and over and over without stopping:
const App: FunctionComponent<{}> = () => {
const [message, setMessage] = useState("");
useEffect(() => {
if (condition) {
setMessage("you are being redirected");
setTimeout(() => {
location.href = `http://localhost:4000/myurl`;
}, 2000);
} else {
setMessage("you are logged in");
setTimeout(() => {
<Redirect to={"/pages"} />;
}, 2000);
}
}, [message]);
return (
<>
{message}
<BrowserRouter>
<Route exact path="/login/stb" render={() => <Code />} />
</BrowserRouter>
</>
);
};
export default App;

Answer 1

It looks like setMessage is setting a message state variable in the component. This occurs during every run of useEffect. State changes will cause your component to rerender.
Basically, the flow causing the loop is this:
Initial component render
useEffect is run
message state is updated
Component rerenders due to state change
useEffect is run as it's trigged on message change
Back to step 3
If you want useEffect to only run on initial render, and redirect after a user has logged in, you could change it to something like this:
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
if (someConditionHere) {
setLoggedIn(true);
}, []);
return (
loggedIn ? <Redirect to={"/pages"} /> :
<BrowserRouter>
<Route exact path="/login/stb" render={() => <Code />} />
</BrowserRouter>
);
I don't know everything about the setup, so that's simplifying and making some assumptions.