Atualmente o React é umas das bibliotecas reativas mais utilizadas para criação de interfaces, desta forma existem diversas implementações para diversos ambientes; como desktop, web, mobile, e dispositivos embarcados. Porém as implementações mais conhecidas são ReactJS para web, e React Native para criação de aplicativos mobile.

Com isso temos uma enorme vantagem pois a curva de aprendizado para criar interfaces em diversos ambientes é minimizada, pois os conceitos aprendidos do React em qualquer ambiente são totalmente reutilizados em qualquer outro ambiente.

Como o React funciona.

Basicamente tudo no React são componentes, esse é basicamente o conceito principal, e com ele em mente será possível criar diversas interfaces. Pois bem, o que são componentes? São os diversos elementos que formam uma página, como botões, inputs, headers, e cards, desta forma podemos criar componentes que usam outros componentes aumentando a manutenção do código e principalmente a reusabilidade. 

Para criar componentes dentro do React, utilizamos uma sintaxe chamada JSX, onde temos um único arquivo JavaScript que contém além do próprio JavaScript, HTML e CSS.

Com esses conceitos temos basicamente dois tipos de componentes: 

Stateless

São componentes que não possuem um estado controlado e geralmente mostram uma informação estática na página.

Statefull

São componentes que possuem um estado controlado internamente e que geralmente mostram informações dinâmicas.

Outro conceito bastante importante é o de propriedades, desta forma podemos compartilhar informações e até mesmo funções entre diversos componentes.

Quando um componente se atualiza? 

Obrigatoriamente existem duas principais formas; primeira, quando alguma informação interna do componente é atualizada e a segunda forma é quando uma propriedade que é passada de um componente para outro é atualizada, pois quando utilizamos essa técnica de compartilhamento de informações, as propriedades passadas também começam a ser observadas automaticamente.

Hooks

Para conseguirmos criar diversas funcionalidades foram criados os hooks, que basicamente implementam um pattern chamado observer, com isso os componentes são atualizados em tela de forma reativa.

UseState

Ele serve para guardar uma informação que será observada e toda vez que a mesma for alterada o componente irá ser renderizado novamente.

Este hook permite que seja possível configurar um valor inicial, e a partir desse valor podemos utilizar a informação atual e acessar um callback para modificarmos esse estado. 

UseEffect

Este hook serve para disparar efeitos colaterais em nosso componente, onde podemos até ficar observando uma variável e toda vez que ela for atualizada um callback será disparado, para fazer isso basta adicionar a variável no arreio de dependências. E para disparar esse mesmo callback uma única vez, basta criar o hook com um arreio de dependências vazio.

UseCallback

Este hook permite que seja possível salvar um callback na memória para evitar que a toda renderização o mesmo não seja recriado, desta forma ele é muito utilizado quando temos uma função que é passada de um componente para outro e queremos ganhar performance, pois se a função que foi passada for recriada o componente que a recebe como propriedade também irá ser renderizado novamente.

UseMemo

O funcionamento do useMemo é bem parecido com com o do useCallback, mas ao invés de salvarmos uma função em memória, salvamos um valor que não queremos calcular ou processar a cada renderização do componente.