React - what is the proper way to do global state?

Take a look at React Context and more specifically useContext as you're using hooks.

The idea of context is exactly that - for you to be able to share updateable state to the descendants without having to pass it from component to component.

const UserContext = React.createContext(null);

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <Router>
      <div className="app">
        <UserContext.Provider value={user}>
          <Topbar />
          <Switch>
            <Route path="/login" exact component={Login} />
            <Route path="/home" exact component={Home} />
            <Route path="/" exact component={ShopMenu} />
            <Route path="/orders">
              <Orders />
            </Route>
            <Route path="/wishlist" exact component={Wishlist} />
            <Route path="/wallet" exact component={Wallet} />
            <Route path="/cart" exact component={Cart} />
          </Switch>
          <BottomBar />
        </UserContext.Provider>
      </div>
    </Router>
  );
};

Then, in your component:

const Topbar = () => {
  const user = useContext(UserContext);

  // use `user` here
};

If you want to have access to the setter (setUser) you can pass it through the context as well.

Welcome to stack overflow;

Yes you can save your state globally for which react-redux library react offers in which you need to store your state globally and you can access state in any component from redux

here is the complete guide

You can also check

complete guide here of how to use redux with react

Also you can use context api check here for context api