Como Usar o Spread Operator (…) em React ⚛
Tags: javascript, react, beginners, webdev
Published: 2022-12-21 22:29:51


![Ilustração Programming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2lhunf9wu0233v5fcm2.jpg)
O operador de espalhamento (`spread operator`) é um recurso do JavaScript que permite que um objeto iterável, como um _array_ ou uma string, seja **expandido em vários elementos individuais**. Ele é representado por três pontos seguidos (`...`).

Exemplo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ophnhctnq5iitzbj4lf.png)
O operador de espalhamento também pode ser usado em objetos literais para **copiar as propriedades** de um objeto para outro:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdfr4ygk1qylrtt3cpw0.png)
<br>
# Aplicabilidades do Spread Operator em React
No React, o operador de espalhamento (`...`) é frequentemente usado para passar propriedades **de um componente pai para um componente filho**. Por exemplo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qkc403okhqh2ja0zjrj.png)
Isso permite que todas as propriedades passadas para `MyComponent` sejam passadas para `OtherComponent` sem precisar especificar cada uma delas individualmente.

Outro uso comum do operador de espalhamento no React é ao trabalhar com **estado imutável**. Por exemplo, digamos que você tenha um estado de objeto com uma propriedade chamada “items” que é um array de itens. Se você quiser adicionar um novo item a esse array, em vez de modificar o array original, é possível criar uma cópia do array e adicionar o novo item a ela usando o operador de espalhamento.

Exemplo:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op4sstsuvu5l9r790e48.png)
Aqui, a cópia do array de itens é criada usando o operador de espalhamento e o novo item é adicionado a ela com o operador de concatenação (`[...this.state.items, 4]`). Depois, o novo array é passado para o método setState para atualizar o estado. Dessa forma, o estado original não é modificado, o que é importante no React, já que o estado deve ser imutável.

Além disso, o operador de espalhamento também pode ser usado para passar um número variável de argumentos para uma função. Por exemplo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w4eeh8dufvktzgw2gs1.png)
Neste exemplo, o array de números é expandido em três argumentos individuais usando o operador de espalhamento e então passado para a função `sum`. O resultado é o mesmo que se tivéssemos chamado a função como `sum(1, 2, 3)`.
<br>
## Atualizar propriedades de um objeto:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6fzetvlqgdxxl3oof94.png)
No exemplo acima, o estado do componente inclui um objeto chamado “user” com duas propriedades: “name” e “age”. O método `updateUser` atualiza a propriedade "age" do objeto usando o operador de espalhamento para copiar as propriedades existentes do objeto e adicionar a nova propriedade "age".
<br>
## Clonar um componente e passar propriedades personalizadas para ele:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulx8r3fk9vnd1s1br8kc.png)
Aqui, o componente `MyButton` é um componente de botão genérico que aceita qualquer conteúdo como filhos e uma função de retorno de chamada para a propriedade `onClick`. O componente `App` clona o componente `MyButton` e passa uma nova função de retorno de chamada para a propriedade `onClick` usando o operador de espalhamento.
<br>
## Passar todas as propriedades de um componente para outro componente:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klkwfrtyrsqezxp3q017.png)
Neste exemplo, o componente `MyComponent` recebe propriedades e as passa para o componente `OtherComponent` usando o operador de espalhamento. Isso permite que qualquer propriedade passada para `MyComponent` seja passada para `OtherComponent` sem precisar especificar cada uma delas individualmente.
<br>
## Unir dois arrays:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mstldmtdmep4skllp2pw.png)
Este exemplo mostra como usar o operador de espalhamento para unir dois arrays em um único array. O array `arr1` e o array `arr2` são expandidos em elementos individuais usando o operador de espalhamento e então concatenados usando o operador de concatenação (`[...]`).
<br>
## Passar um número variável de argumentos para uma função:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxvnonuusi4e4yjiivrd.png)
Neste exemplo, a função `sum` espera três argumentos (`x, y, e z`) e retorna a soma deles. O array de números é expandido em três argumentos individuais usando o operador de espalhamento e então passado para a função `sum`. O resultado é o mesmo que se tivéssemos chamado a função como `sum(1, 2, 3)`.
<br>
## Conclusão
O operador de espalhamento (spread operator) é uma ferramenta poderosa do JavaScript que permite **expandir objetos iteráveis** em elementos individuais ou **copiar propriedades** de um objeto para outro. No React, o operador de espalhamento é amplamente utilizado para **passar propriedades** de um componente pai para um componente filho, **atualizar estado imutável**, **clonar componentes** e passar propriedades personalizadas para eles, e **passar um número variável de argumentos** para uma função.

Usar o operador de espalhamento pode tornar o código mais conciso e legível, além de facilitar a manipulação de dados. No entanto, é importante lembrar que o operador de espalhamento também pode ter algumas limitações, como a incapacidade de clonar objetos profundamente aninhados ou a possibilidade de sobrescrever propriedades existentes se o objeto de espalhamento vier depois do objeto de destino.

Em resumo, o operador de espalhamento é uma ferramenta valiosa no React e em outras situações do JavaScript que pode ajudar a escrever código mais eficiente e legível. É importante entender como ele funciona e quando usá-lo para aproveitar ao máximo seus benefícios.

---


Autor: Marcelo Schäffer Petry

[marcelopetry.com](https://marcelopetry.com)