Class Component x Function Components

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:

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

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

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.

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.

 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,

 this.setState({ modalStatus: isOpen })

Agora:

setModalStatus(isOpen)

3-
Antes: RECEBER props.
props em construtor

class meuComponente extends React.Component {
    constructor(props) {
        super(props);
    }    
}

Agora: props como parâmetro do componente funcional

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:

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.