reactjs - React.useState が間違った状態で再レンダリングする

Question

ダッシュボードを制御する次の縮小コードがあります

function App(props){
    const [role, setRole] = React.useState("guest");
    const [componentDrawerRender, setComponentDrawerRender] = React.useState(null);

    const handleSelectionDrawerClick = (component) => {

        setComponentDrawerRender(component);
        handleOpenComponentDrawer(true);
    };

    const handleLoginCallback = (user) => {

        if (user !== false) {
          handleCloseComponentDrawer();
          setRole(user.type);    <-- setting the new state does not work 
          console.log(val.type + " -> " + role );   <-- this here shows != values

        } else {
          //do nothing
        }
      };

    return (  
        <Button
        onClick={() => {
          handleSelectionDrawerClick(
            <LoginPage callback={handleLoginCallback} />
          );
        }}
      >
        LOG IN
      </Button>);
}

このコードの目的は、ドロワーを開き (実行)、ドロワーにコンポーネントをレンダリングし (実行)、ユーザーがコンポーネントでログインした後、ドロワーを閉じ (実行)、状態を更新することです (それはほとんどそうです）。

問題はhandleLoginCallbackメソッド内で発生します。正常なデータが返され、状態が正常なデータで更新されます。ただし、ページ上の一部のコンポーネントのみが更新されます。

機能コンポーネントの再レンダリング プロセスはどのように機能しますか? 関数をもう一度呼び出すだけですか、それとも何らかの方法で戻り値を再計算するだけですか? 次のコードは、再レンダリング時に再計算されません。一部の状態が他の状態に依存していても問題ありませんか?

const [mainList, setMainList] = React.useState((role) => {
    console.log(role);
    if (role === undefined || role === null) {
      return GuestListItems(handleSelectionDrawerClick);
    } else if (role === "customer") {
      return CustomerListItems;
    } else {
      return OwnerListItems;
    }
  });

<LoginPage>以下は、コールバック メソッドを呼び出すのコードです。

onSubmit(e) {
    e.preventDefault();

    this.setState({ isLoading: true });
    this.props.login(this.state, this.handleLoadingBar).then((retState) => {
      if(retState === null){
        this.props.callback(false);       <-- here 
      }else {
        this.props.callback(retState);    <-- here 
      }
    });
  }