How do I update React component on a global variable change?

Question

I have a React component that shows details of a soccer game when that game is clicked on in a table, called GameData. The table is part of another component, and it updates a variable that GameData uses to show the data. That variable is global, so using useState() inside of GameData doesn't work. How do I make GameData re-render when the variable updates/changes?

Here is what my GameData component is currently:


let gameToDisplay = {};

function displayGameData(gameId) {
    gameToDisplay = gameData.find(game => game.id === gameId);
    // This function runs when a game in the table is clicked. This part updates and works as expected. 
}

function GameData() {
    const [gdDisplay, setgdDisplay] = useState(true);

    function handleDetailClick() {
        setgdDisplay(!gdDisplay);
    }

    return (
        <div className='GameData box'>
            <h2>Game Details</h2>
            <div className='Links'>
                <ButtonGroup variant="contained" aria-label="outlined primary button group">
                    <Button onClick={handleDetailClick}>{gdDisplay ? 'Less' : 'More'} details</Button>
                </ButtonGroup>
            </div>
            {gdDisplay ? (
                <p className='data'>
// Data display that gets data from gameToDisplay 
                </p>
            ) : ( 
                <></> 
            )}
        </div>
    )
}

Yes, the button approach works, but you have to click the button twice for the data to update. I'm trying to change the data inside of <p className='data'> when gameToDisplay is changed. How can I watch for that variable to change and re-render <p className='data'> when that happens?

You can't do this, somehow your react components need to be "connected" to changes to that variable. Usually this is done via a hook of some kind. You seem to want to pass a global down the entire hierarchy of your components. You can read on [useContext](https://react.dev/reference/react/useContext). I am not suggesting to actually use `useContext` but the usage scenarios contain useful information to help you determine whether context is the correct thing to use and what alternatives to consider. — apokryfos, Jun 06 '23 at 18:32

score 2 · Accepted Answer · answered Jun 06 '23 at 18:27

How do I update React component on a global variable change?

You don't. Don't use global variables. Use state.

State doesn't have to be local to this exact component. If this component needs to be re-rendered based on a state change in another component, you have a variety of options:

Lift state up so that it's managed by a common parent component and passed to the child components as props.
Use the useContext hook to manage state outside of the components.
Use a custom hook which manages the state outside of the component(s) and provides access to reading and setting that state within any component which needs it.
Use a "global" state management system which manages state outside of the components and allows components to subscribe to that state.

Basically, overall you're thinking about it the wrong way. You're trying to use React without using React by managing "state" manually in your global variables and re-rendering components manually with your own logic.

Don't.

React manages state updates and component re-renders. That's its core functionality. So if your goal is to use React then, well, use React.

Thanks for the links! I'm brand new to React and didn't know much about that. I'll take a look and see if I can make it work with my current code. — ajmcallister27, Jun 06 '23 at 18:43
It worked! I used your first link and moved both components inside of a common parent. Thank you for the help! — ajmcallister27, Jun 06 '23 at 21:35

How do I update React component on a global variable change?

1 Answers1