Montei o código para marcar tarefas concluídas apenas com essas linhas de código e o resultado foi o mesmo:

svgIcon.addEventListener("click", evento => {
        
        evento.stopPropagation();
        li.classList.add("app__section-task-list-item-complete");
    })

Não entendi o porquê de varias linhas do código:

 const button = document.createElement('button')

    svgIcon.addEventListener('click', (event) => {
        event.stopPropagation()
        button.setAttribute('disabled', true)
        li.classList.add('app__section-task-list-item-complete')
    })

    if(tarefa.concluida){
        button.setAttribute('disabled', true)
        li.classList.add('app__section-task-list-item-complete')
    }

Qual a utilidade de criar o button? Onde ele foi criado? Não consigo encontrá-lo no HTML pelo no DevTools.

Qual a utilidade do if? Não entendi seu parametro: ele pergunta se tarefa contem a propriedade concluida ou se a propriedade "concluida" recebe true? Creio ser o primeiro caso pois na aba application do DevTools é possivel ver que a propriedade continua recebendo false. O problema q toda tarefa já é criada com a propriedade "concluida", entao, toda tarefa já estaria marcada.

Vi uma duvida semelhante em um outro tópico dessa aula e as respostas n fizeram sentido:

O setAttribute é definido tanto no addEventListener quanto no if para cobrir dois cenários diferentes. No addEventListener, ele é definido para desativar o botão quando o ícone SVG é clicado. No if, ele é definido para desativar o botão se a tarefa já estiver concluída quando a página é carregada. Isso pode acontecer se a tarefa foi concluída em uma sessão anterior e a página foi recarregada.

O if é necessário para verificar se a tarefa já está concluída quando a página é carregada. Como mencionado na resposta anterior, isso pode acontecer se a tarefa foi concluída em uma sessão anterior e a página foi recarregada. Se a tarefa já estiver concluída, o botão precisa ser desativado e a classe appsection-task-list-item-complete precisa ser adicionada à li para indicar visualmente que a tarefa está concluída.

Recarregando a pagina, a tarefa não permanece concluída.