Como alertar o usuário ao tentar sair de uma página com editor de texto em React

Quando trabalhamos com React e precisamos avisar o usuário antes dele sair de uma página onde há um editor de texto, a solução mais prática envolve o uso do evento beforeunload do navegador.

Você já declarou um estado que fica true ao começar a digitar, o que é ótimo para controlar a mudança de conteúdo. Agora, o desafio é fazer o React escutar o evento de saída da página e exibir uma mensagem de alerta.

Um ponto importante é que, por padrão, o navegador não permite customizar a mensagem do beforeunload, apenas exibir uma mensagem padrão de aviso. Então, o fluxo seria: Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.

1. Quando o usuário começa a editar, você adiciona um listener para o evento beforeunload.
2. Se o usuário tentar sair, o navegador dispara o evento, e a mensagem padrão é exibida.
3. Ao salvar ou descartar as mudanças, remova o listener para evitar alertas desnecessários.

No React, isso pode ser feito usando o hook useEffect. Veja um exemplo rápido:

useEffect(() => {
  if (hasUnsavedChanges) {
    const handleBeforeUnload = (e) => {
      e.preventDefault(). e.returnValue = ''. }. window.addEventListener('beforeunload', handleBeforeUnload). return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload). }
  }
}, [hasUnsavedChanges]). 

Esse padrão ajuda a evitar surpresas na navegação. Mas é preciso ficar atento que a mensagem do alerta não é controlável, só a confirmação de que há mudanças. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.

Vamos lá, quem já fez algo assim? Tem alguma dica pra melhorar essa abordagem? A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois.