Como fazer o equivalente ao appendChild no React?

Uma sugestão seria utilizar um estado para decidir quando o componente CadastroEfetuado seria renderizado. Assim, o valor desse estado seria inicialmente falso, e quando a sua promise do cadastro for resolvida, você alteraria o estado para verdadeiro:

function SeuComponente() {
  // Estado iniciado como falso
  const [cadastroFeito, setCadastroFeito] = useState(false);

  function handleClick() {
    // Sua Promise (o conteúdo da promise que eu escrevi não importa)
    new Promise((resolve) => {
      resolve(true);
    }).then(() => {
      // Altera o estado para verdadeiro
      setCadastroFeito(true);
    });
  }

  return (
    <div>
      {/* Seu conteúdo */}

      <button onClick={handleClick}>Cadastrar-se</button>

      {/* Se o valor de cadastroFeito for verdadeiro,
      ele irá renderizar o componente */}
      {cadastroFeito && <CadastroEfetuado />}
    </div>
  );
}

Agora, levando mais em consideração a sua pergunta do que seu exemplo, outro cenário que você poderia encontrar seria o de querer usar appendChild para vários elementos baseado numa lista de informações. Um meio de fazer isso seria usando um map:

function SeuComponente() {
  const [estados, setEstados] = useState([]);

  function handleClick() {
    new Promise((resolve) => {
      resolve(["Minas Gerais", "Rio Grande do Sul", "São Paulo"]);
    }).then((dados) => {
      setEstados(dados);
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Exibir estados</button>
      <ul>
        {/* Como a lista inicia vazia, nada será renderizado,
        mas, assim que o botão ser clicado e a promise resolver,
        a lista será renderizada*/}
        {estados.map((estado) => (
          <li>{estado}</li>
        ))}
      </ul>
    </div>
  );
}