Function running after a component is no longer being rendered (React)

I will preface this by saying I am very new to react

I am trying to switch between a main menu component and a Lobby component when a button is clicked within the menu component by lifting state up from the menu component (as shown below):

My menu screen

The render() method for my MenuPage:

My issue: I am using firebase to create lobbies for a simple game. Essentially the join code input is used to find the lobby, and if a lobby is found, the main menu screen is no longer rendered and the gamepage state is updated to change to the "Hello word" button, my code is:

In theory my code should set the state of the menu screen to the new game key, check if the key is valid, perform the necessary operations, then change the state of GamePage to render the button, meaning the MenuPage methods are no longer being run, right? Or am i missing something? Because I get the following error: I guess it is trying to read the text input that is no longer being rendered, but why is that function still being called even when the component is no longer rendering? I tried to do a simple if(document.querySelector("#name")) to avoid the statement if it doesn't exist, but it just leads to more errors down the road so I figure I should solve it properly. I'm not sure what I should even try to do since this seems like a fundemental misunderstanding of how react works. Can someone offer any insight?

https://stackoverflow.com/questions/67428122/function-running-after-a-component-is-no-longer-being-rendered-react May 07, 2021 at 10:06AM