[Question] 생성된 overlay에서 state 변경에 따른 rerendering 되지 않아요.

[with-key]

질문

• 이미 생성된 overlay에서 상태가 변경되어도 리렌더링이 되지 않습니다. 구조적으로 이것을 구현하는 것은 불가능한가요?

예시코드

• tanstack query의 useMutate() 를 사용하여 post 요청을 보내고, 요청 상태 (isIdle, isPending, isError)에 따라 각각 다른 UI를 표시하고자 합니다.

<IconButton
  onClick={() => {
    overlay.open(({ isOpen, unmount }) => {
      return (
        <Confirm.Root open={isOpen} onOpenChange={unmount}>
          <Confirm.Content>
            {(() => {
              if (isIdle) {
                return (
                  <Confirm.Title>
                    파일을 삭제하시겠어요?
                  </Confirm.Title>
                );
              }

              // 리렌더링 되지 않음 ❌
              if (isPending) {
                return (
                  <Confirm.Title>
                    파일을 삭제중입니다.
                  </Confirm.Title>
                );
              }

              // 리렌더링 되지 않음 ❌
              if (isError) {
                return (
                  <Confirm.Title>
                    {error.message}
                  </Confirm.Title>
                );
              }
            })()}
          </Confirm.Content>
          <Confirm.Actions>
            <Confirm.Dismiss onClick={unmount}>
              아니오
            </Confirm.Dismiss>
            <Confirm.Ok
              onClick={() => {
                mutate(
                  undefined,
                  {
                    onSuccess: () => {
                      reset();
                      unmount();
                    },
                    onError: () => {
                      //
                    },
                  },
                );
              }}
            >
              예
            </Confirm.Ok>
          </Confirm.Actions>
        </Confirm.Root>
      );
    });
  }}
>
  <div
    className={css({
      bg: "semantic.bg.contents",
      color: "semantic.icon.defaultAssist",
      borderRadius: "semantic.radii.full",
    })}
  >
    <Icon iconName="x" size="sm" />
  </div>
</IconButton>

기대 결과

• 상태 (isIdle, isPending, isErro) 에 따라 각각 UI를 표시하는 것

실행 결과

• 상태가 변경되어도, 최초 상태 (isIdle)에 해당하는 UI로 유지됨.

[jungpaeng]

overlay-kit은 쉽게 말해서 오버레이가 열릴 때, 스냅샷을 찍어서 컴포넌트 내부 상태로 저장하는 형태로 동작합니다. 따라서 동적인 props를 인지할 수 없습니다.

동적 props를 처리하는 데 여러 옵션이 있습니다.

• 컴포넌트 내부에서 state를 관리하도록 하세요(controlled 방식이 아닌 uncontrolled 방식으로 동작하도록 하세요).
• overlay-kit 대신 오버레이 컴포넌트를 직접 호출하세요.

mantine ui의 modals manager는 overlay-kit과 유사한 방식으로 동작하며, 동일한 이슈가 있습니다: mantinedev/mantine#751 (comment)