Olá! Não lembro de ter sido comentado, nem se foi nesse curso ou no anterior. Mas nesse bloco de código:
const aoNovoParceiroAdicionado = (parceiro) => {
setParceiros([...parceiros, parceiro])
}O que os 3 pontos antes de parceiros significa? Se eu tiro, o código não funciona como deveria e quando adiciono um segundo colaborador, ele substitui o primeiro. Poderiam me tirar essa dúvida de para quê ele serve?
Olá! Esses 3 pontos representam um operador do Javascript chamado spread operator, que é traduzido para algo como "operador de espalhamento" em português.
A tradução para o português é um bom ponto de partida para entendê-lo, pois é basicamente isso o que ele faz: recebe um conjunto de valores "comprimidos" em uma única referência — como um array (que "comprime" vários elementos), ou um objeto (que "comprime" vários pares chave-valor) — e "espalha" esse conjunto em vários valores separados. Não acho que seja fácil entender apenas com essa explicação, então vou tentar exemplificar de forma prática, utilizando arrays, como no código que você citou.
Podemos imaginar arrays como caixas dentro das quais se guarda vários valores, com a vantagem de que podemos levar esses valores "para lá e para cá" como se fossem uma coisa só. No caso do array de parceiros, o objetivo é atualizar o valor do estado do componente com um novo parceiro, em outras palavras, é produzir uma outra caixa mantendo os mesmos parceiros da primeira, mas também com o novo parceiro. Porém, não basta escrever [parceiros, parceiro], pois isso seria como colocar uma caixa dentro da outra, o que se traduziria para algo como: [[parceiro1, parceiro2], parceiro3]. O ideal seria espalhar, esparramar os valores da primeira caixa na nova caixa: [parceiro1, parceiro2, parceiro3], e é exatamente essa a função dos 3 pontos, fazem com que ...[parceiro1, parceiro2] seja tratado como parceiro1, parceiro2 pelo Javascript.
Recomendo a leitura da página Sintaxe de Espalhamento, na documentação da MDN, pois ela traz mais alguns exemplos.
Espero ter ajudado!