Function Components e Hooks

Em aulas anteriores já foi mostrado como criar um componente utilizando função. Porém, nesta aula veremos como explorar ainda mais as opções dos functions components.

Evolução functions components

Os componentes baseados em funções tinham algumas limitações, um exemplo delas seria a manipulação de estados. Então, a partir da versão 16.8 o react incrementou ainda mais as functions components.

Agora será implementada uma function component que armazena um estado e para fazer isso utilizaremos o conceito de Hooks.

Hooks é como se fosse uma função que entrega um estado e uma função de atualizar esse estado.

Acompanhe a aula e produza o código abaixo:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Toogle(props) {

  const [toogle, setToogle] = useState(true);
  return <button onClick={() => { setToogle(!toogle) }}>{toogle ? 'ON' : 'OFF'}</button>
}

ReactDOM.render(
  <Toogle />,
  document.getElementById('root')
);

Para usar os Hooks é importante lembrar de fazer as importações. Veja o exemplo abaixo:

import React, {useState } from 'react';

É visível a diferença de tamanho do código. E todas as mudanças não alteraram a funcionalidade, mas sim melhoraram o desempenho.