Class Component x Function Components
Tags: react, typescript
Published: 2022-10-20 19:10:21

Class Components são instanciados por uma classe JavaScript e permitem funcionalidades adicionais, como ter métodos específicos e principalmente, manter um state interno.
Já functional Components são instanciados por uma função, que é basicamente um render, portanto por padrão eles não possuem state, mas podem possuir props.

Antes do React 16.8, os componentes eram escritos no formato de classes, e o react da/dava pseudo-classe para que pudessemos gerenciar o ciclo de vida
ex: 
```tsx
class App extends Components(){
render()
}
/*o render é um dos métodos que a class
nos dá para que consigamos mostrar o componente;
*/
```

De início, quero deixar claro que a **function components** do React chegou para simplificar a **class components**, uma vez que ela deixa nosso componente verboso. Sendo assim, a maioria das coisas nos componentes de classe é omitida ou simplificada demais nos componentes funcionais.

## **O que deixou de ser necessário**
 **O this.** -> Não precisamos nos componentes funcionais,
se fossemos nos referir a uma função dentro do nosso componente:
ANTES

```tsx
class meuComponente extends React.Component {
    constructor() {
        super();
        this.meuMétodo= this.meuMétodo.bind(this);
    }
    meuMétodo() { 
        
    }
    render() {
        return 
    }
}
// Ai pá, deu uma ideia de usar esse meu método no meu button

<button onClick={this.meuMétodo}>My Button</button>
```

AGORA pega a visão de como tá bem mais simples
```tsx
const meuComponente = () => {
 const meuMétodo= () => {}
}
/* Como não há mais instancia de class, podemos 
chamar a nossa função diretamente 
*/
<button onClick={meuMétodo}>My Button</button>
```
 **O render** -> Não precisamos nos componentes funcionais;
 **O componentDidMount** -> useEffect
 **O componentDidUpdate** -> useEffect
 **O componentWillUnmount** -> useEffect

## **O que mudou?**
**1-**
Antes: 
Criação de um STATE

No class, DEVE haver um objeto e PODE haver apenas um objeto de estado em um componente de classe.
```tsx
class meuComponente extends React.Component {
    state = { myState: "my value" }
   }
```
Agora:
consigo receber 3 states diferentes, cada um com sua característica.
Entendendo o hook useState:
Ele têm dois elementos, um é o estado (**_estado,idade,isOpen_**), o segundo é a função para cambiar/atualizar ( tudo que começa com _**set**_)  o estado/pedaço do estado específico.
```tsx
 const MyComponent = () => {
    const [estado, setMeuEstado] = useState('my value');
    const [idade, setIdade] = useState(22);
    const [isOpen, setIsOpen] = useState(false);
   
}
```

**2-**
Antes:  Setar um STATE
Para que nós pudessemos mudar um state, teriamos que instanciar o setState, chamar o objeto e só assim mudar o valor,

```tsx
 this.setState({ modalStatus: isOpen })
``` 
 Agora: 

```tsx
setModalStatus(isOpen)
```
**3-**
 Antes: RECEBER props.
props em construtor	
```tsx
class meuComponente extends React.Component {
    constructor(props) {
        super(props);
    }    
}
```

 Agora: props como parâmetro do componente funcional

```tsx
function meuComponente (props) {
    
}
```
**4-**
Os três ciclos de vida de uma class, foram transformados em apenas um método no componente funcional, segue ->

*componentDidMount*, *componentDidUpdate*, and *componentWillUnmount* simplificado em um só método:_ 

> useEffect_

Exemplo:
```tsx
interface ModalProps{
isOpen: boolean;
}

export default function Modal({isOpen} : ModalProps) {
  const [ modalStatus, setModalStatus ] = useState(isOpen) 
	
  componentDidUpdate(prevProps) {
    const { isOpen } = this.props;
    if (prevProps.isOpen !== isOpen) { // se o isOpen mudar.. faça isso
      console.log(this.props)
      this.setState({ modalStatus: isOpen }) // set o modalStatus para isOpen..
    }
  }

/*
 agora dá uma sacada como  o mesmo **componentDidUpdate**
 fica utilizando o hook do React 16.8:
*/
useEffect(() => {    
      setModalStatus(isOpen)
    }
  }, [isOpen])

```
**Considerações finais**

- 
Sei que existe algumas outras mudanças, mas por base foi isto.

- 
Converter um projeto React existente de componentes de classe para componentes funcionais PODE parecer complicado, mas não é, depois que você começa a usar os componentes funcionais, é um caminho sem volta.
- 
Isso tá sendo um breve resumo, pra efeito de conhecimento próprio, fixação de aprendizado e compartilhamento de conhecimento.