[deep loop] Can't use in component?

[rks118]

When I first enter the page, I need a modal to alert the user if there is no data:

// RegisterModal
import {
  Box,
  Modal,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
} from '@chakra-ui/react';
import NiceModal, { useModal } from '@ebay/nice-modal-react';
export const RegisterModal = NiceModal.create<{ name: string }>(({ name }) => {
  const modal = useModal();

  return (
    <Modal isOpen={modal.visible} onClose={modal.hide}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>Modal Title {name}</ModalHeader>
        <ModalCloseButton />
        <button
          onClick={() => {
            modal.hide();
          }}
        >
          {' '}
          close modal{' '}
        </button>
      </ModalContent>
    </Modal>
  );
});

Usage (deep loop):

const data = useFetch('/api/getUser')
const modal = useModal(RegisterModal);

if (!data) {
  modal.show({ name: 'no data' });
}

return <div>...</div>

Usage (deep loop):

const data = useFetch('/api/getUser')
if (!data) {
  NiceModal.show(RegisterModal, { name: 'no data' });
}

return <div>...</div>

[ArturKustyaev]

Do this in useEffect