Adeus, useState! Descubra como @paint & @repaint estão mudando minha forma de desenvolver Componentes
Tags: webcomponents, javascript, html, css
Published: 2023-03-15 12:13:45

O desenvolvimento de componentes é uma parte fundamental do desenvolvimento de aplicativos modernos. No entanto, muitas vezes, os desenvolvedores acabam escrevendo muito código repetitivo para gerenciar o estado e a renderização dos componentes. Isso pode tornar o código difícil de entender e manter, especialmente à medida que o aplicativo cresce em tamanho e complexidade.

Neste post, vamos explorar uma abordagem mais limpa para o desenvolvimento de componentes usando os recursos `@paint` e `@repaint` do [kuba](https://github.com/deMGoncalves/kuba). Com essa abordagem, você pode se concentrar no que o seu componente deve fazer em vez de como ele deve atualizar o estado para a view reagir.

## O que são @paint e @repaint?

Os recursos `@paint` e `@repaint` do [kuba](https://github.com/deMGoncalves/kuba) são adivices que permitem que você defina a renderização de um componente sem se preocupar com mudanças de estado.

**@paint** é responsável por renderizar o componente na primeira vez.

**@repaint** é responsável por uma nova renderização na mudança de estado.

Esses recursos ajudam a manter o código limpo e organizado, evitando a necessidade de se preocupar com estado.

## Como funciona o @paint e @repaint?

Para usar os recursos `@paint` e `@repaint` em um componente [kuba](https://github.com/deMGoncalves/kuba), primeiro você precisa importá-los do pacote `@kuba/h`. Em seguida, você pode definir o ponto de conexão do `@paint` sobre da classe do componente para descrever como ele deve ser renderizado na tela. Da mesma forma, você pode definir ponto de conexão `@repaint` sobre o método para descrever como o componente deve atualizar o component.

```js
import { paint, repaint } from '@kuba/h'
import component from './component'

@paint(component)
class MyComponent {
  #text

  get text () {
    return (this.#text ??= '')
  }

  @repaint
  changeText(newText) {
    this.#text = newText
    return this
  }
}

export default MyComponent
```

Observe que o método `changeText` é decorado com o `@repaint`, isso indica que quando o método for chamado, o estado será atualizado e o componente será renderizado novamente.

## Por que usar @paint e @repaint?

Uma das principais vantagens de usar os recursos `@paint` e `@repaint` é a simplificação do código. Você não precisa se preocupar com a manipulação direta do DOM ou com a atualização do estado por meio da função setState. Em vez disso, você pode se concentrar em definir o comportamento do seu componente.

Além disso, o uso do `@paint` e `@repaint` pode tornar o código mais fácil de entender e manter, especialmente à medida que o aplicativo cresce em tamanho e complexidade. Isso ocorre porque você está se concentrando no que o componente deve fazer, em vez de como ele deve ser renderizado.

Finalmente, o uso do `@paint` e `@repaint` pode melhorar o desempenho do seu aplicativo, porque a renderização do componente é controlada pelo [kuba](https://github.com/deMGoncalves/kuba), que pode otimizar a renderização de acordo com asnecessidades do seu aplicativo.

## Resumo

Neste post, exploramos o uso das diretivas `@paint` e `@repaint` do [kuba](https://github.com/deMGoncalves/kuba), uma abordagem inovadora para o desenvolvimento de componentes no frontend. Ao contrário do useState, as diretivas não sujam o Root Aggregate com controle de estado e escrita de JSX, o que torna o código mais limpo e fácil de entender. Além disso, o [kuba](https://github.com/deMGoncalves/kuba) pode otimizar a renderização de acordo com as necessidades específicas do componente, melhorando o desempenho do aplicativo. Se você está procurando uma abordagem mais limpa e eficiente para o desenvolvimento de componentes no frontend, vale a pena conferir o [kuba](https://github.com/deMGoncalves/kuba) e seus adivices `@paint` e `@repaint`.

Gostou do que viu neste post? Então, conheça o Kuba - um projeto código aberto para desenvolvimento front-end. Com o Kuba, você pode criar aplicativos modulares, reutilizáveis e escaláveis com facilidade. Ele possui pacotes para gerenciamento de estado, roteamento, validação de formulários e muito mais. Além disso, o Kuba é altamente personalizável e oferece uma experiência de desenvolvimento mais ágil. Saiba mais em [link para o Github do Kuba](https://github.com/deMGoncalves/kuba).