[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)

[with-key]

답변 감사합니다.

아래 방식으로 처리했습니다.
어떤 문제를 야기할 가능성이 있을까요?

<BoxButton
  onClick={() => {
    overlay.open((props) => {
      return (
        <Confirm.Root
          open={props.isOpen}
          onOpenChange={props.unmount}
        >
          <ConfirmContents />
        </Confirm.Root>
      );
    });
  }}
>
 action button
</BoxButton>

// ConfirmContents.tsx

export const ConfirmContents = ({ user }: Props) => {
  const mutation = useMutate();

  if (mutation.isIdle) {
    return (
      <>
        <Confirm.Content>
          <>
            <Confirm.Title>
            </Confirm.Title>
            <Confirm.Description>
            </Confirm.Description>
          </>
        </Confirm.Content>
        <Confirm.Actions>
          <Confirm.Dismiss></Confirm.Dismiss>
          <Confirm.Ok
            onClick={(e) => {
              // overlay.unmount() 하지 않기 위해. 
              // 즉, isIdle -> isPending -> isSuccess 가 진행되어도 
              // overlay의 open 상태를 유지 하기 위함.
              e.preventDefault(); 

              mutation.mutate(
                undefined,
                {
                  onSuccess: () => { 
                   // 중첩모달 구조이고, 특정 overlay만 off 해야한다면, 
                   // 부모에서 해당 overlayId를 받아 unmount() 하는 것도 가능.
                   overlay.unmountAll(); 
                   //...
                  },
                },
              );
            }}
          ></Confirm.Ok>
        </Confirm.Actions>
      </>
    );
  }

  if (mutation.isPending) {
    return <Confirm.Loading />;
  }

  if (mutation.isError) {
    return (
      <>
        <Confirm.Content>
          <Confirm.Title>
          </Confirm.Title>
          <Confirm.Description>
          </Confirm.Description>
        </Confirm.Content>
        <Confirm.Actions>
          <Confirm.Ok />
        </Confirm.Actions>
      </>
    );
  }
};