A funcionalidade de Hooks trazida a partir da versão 16.7.0 do React visa basicamente oferecer formas de trabalharmos com estado e outras API's sem a necessidade de ter uma classe (stateful component).

Antes de falarmos mais sobre as motivações por trás dessa feature ou até mostrar exemplos mais complexos de como os hooks vão ajudar no nosso dia-a-dia, vamos entender um exemplo básico com um pouco de código.

Imagine que você tenha um Modal, no clique de um botão o modal deve aparecer, no clique de outro botão esse modal deve desaparecer. Utilizando a abordagem tradicional do React teríamos algo assim:

Essa seria a abordagem mínima para conseguirmos controlar a aparição do modal em tela utilizando o estado do React. Quando utilizamos os hooks nós simplesmente evitamos a verbosidade desnecessária que toda essa criação do state nos dá, ficando com um código como o seguinte:

Veja que utilizamos o hook useState para declarar um estado em um componente criado em formato de função. A função useState recebe por parâmetro o valor padrão do nosso estado e retorna o valor do estado em si e uma função que altera esse valor.

Até então, a forma mais tradicional de compartilharmos funcionamento entre componentes era pelos patterns já conhecidos, os HOC's (Higher-order components) e as render props.

O grande problema desses padrões é que você precisa modificar boa parte do código do componente para que o mesmo se adapte ao funcionamento compartilhado, aumentando sua verbosidade e perdendo boa parte do isolamento de responsabilidade, ou seja, você acaba perdendo qual parte do código faz o que.

Veja um exemplo de utilização de dois render props em um único componente:

A verbosidade desse pattern torna o código praticamente ilegível, ainda mais se tivermos um crescimento de responsabilidades desse componente com o tempo.

Além disso, os dois patterns utilizados anteriormente acabavam criando muitos níveis na renderização final do React tornando impossível uma visualização de árvore para encontrar o que é o que, veja um exemplo do site da Netflix que utiliza React ainda sem os hooks:

Veja que os elementos AppContextProvider, ConnectToApps, LayoutContext, DetectFonts são tudo fruto de contextos criados através dos patterns de HOC's e Render Props (com o hooks não precisaríamos de nenhum deles).

Como utilizar, motivações e exemplos práticos

React Hooks

Se você trabalha, estuda ou tem curiosidade pelo mundo do frontend, com certeza deve ter ouvido bastante sobre NextJS nos últimos meses. Imagino que você esteja se perguntando, será que é só mais um hype? Será que daqui um mês essa tecnologia vai ter morrido? Provavelmente você tenha falado muito sobre, mas ainda não sabe por que as pessoas a estão usando.

Nesse artigo vamos apresentar as vantagens de se utilizar o NextJS no desenvolvimento dos seus projetos e como ele pode ir além do React. Isso também pode explicar a popularidade da nossa formação Next JS.

Analisando o gráfico de download da npm trends, podemos perceber o número gigantesco de pessoas interessadas no NextJS no último ano.

Essa crescente interesse não é à toa, ela surge por causa das soluções que o NextJS oferece em relação a todo ecossistema JavaScript, principalmente resolvendo nativamente alguns problemas conhecidos do ReactJS.

No que diz respeito à arquitetura client-side, ou lado do cliente em tradução literal, uma vez que carregamos o conteúdo temos que esperar o pacote que contém todo o JavaScript ou bundle como é conhecido carregar antes de determinar o que mostrar na página. E isso torna o tempo de carregamento mais alto o que acaba virando problema para pessoas com dispositivos móveis antigos e conexões fracas.

Outra questão são os mecanismos de pesquisa (SEO) que ainda tem certa dificuldade para indexação de aplicativos JavaScript do lado do cliente, porque o conteúdo real está embutido em algum lugar do bundle gerado. Além disso os motores de busca estão preparados para pegar o HTML, o conteúdo em muitos casos nem está lá porque ele só é renderizado depois de uma Chamada pro Backend, então seu SEO nesse caso é inexistente.

Por que usar?

NextJS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam dolor sapien, vulputate eu diam at, condimentum hendrerit tellus. Nam facilisis sodales felis, pharetra pharetra lectus auctor sed.

Ut venenatis mauris vel libero pretium, et pretium ligula faucibus. Morbi nibh felis, elementum a posuere et, vulputate et erat. Nam venenatis.

Nulla auctor sit amet quam vitae commodo. Sed risus justo, vulputate quis neque eget, dictum sodales sem. In eget felis finibus, mattis magna a, efficitur ex. Curabitur vitae justo consequat sapien gravida auctor a non risus. Sed malesuada mauris nec orci congue, interdum efficitur urna dignissim. Vivamus cursus elit sem, vel facilisis nulla pretium consectetur. Nunc congue.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam consectetur massa nec metus condimentum, sed tincidunt enim tincidunt. Vestibulum fringilla risus sit amet massa suscipit eleifend. Duis eget metus cursus, suscipit ante ac, iaculis est. Donec accumsan enim sit amet lorem placerat, eu dapibus ex porta. Etiam a est in leo pulvinar auctor. Praesent sed vestibulum elit, consectetur egestas libero.

Ut varius quis velit sed cursus. Nunc libero ante, hendrerit eget consectetur vel, viverra quis lectus. Sed vulputate id quam nec tristique. Etiam lorem purus, imperdiet et porta in, placerat non turpis. Cras pharetra nibh eu libero ullamcorper, at convallis orci egestas. Fusce ut est tellus. Donec ac consectetur magna, nec facilisis enim. Sed vel tortor consectetur, facilisis felis non, accumsan risus. Integer vel nibh et turpis.

Nam eu sollicitudin neque, vel blandit dui. Aliquam luctus aliquet ligula, sed:

Suspendisse ac facilisis leo. Sed nulla odio, aliquam ut lobortis vitae, viverra quis risus. Vivamus pulvinar enim sit amet elit porttitor bibendum. Nulla facilisi. Aliquam libero libero, porta ac justo vitae, dapibus convallis sapien. Praesent a nibh pretium, ultrices urna eget, vulputate felis. Phasellus ac sagittis ipsum, a congue lectus. Integer interdum ut velit vehicula volutpat. Nulla facilisi. Nulla rhoncus metus lorem, sit amet facilisis ipsum faucibus et. Lorem ipsum.

Curabitur a rutrum ante. Praesent in justo sagittis, dignissim quam facilisis, faucibus dolor. Vivamus sapien diam, faucibus sed sodales sed, tincidunt quis sem. Donec tempus ipsum massa, ut fermentum ante molestie consectetur. In hac habitasse platea dictumst. Sed non finibus nibh, vitae dapibus arcu. Sed lorem magna, imperdiet non pellentesque et, rhoncus ac enim. Class aptent taciti sociosqu ad litora torquent per conubia.

Praesent ac sapien eros. Suspendisse potenti. Morbi eu ante nibh. Proin dictum, tellus ut molestie tincidunt, urna tortor sodales velit, ut tempor lectus ipsum nec sapien. Nulla nec purus vitae libero aliquet posuere non et sapien. Cras in erat rhoncus, dignissim ligula iaculis, faucibus orci. Donec ligula neque, imperdiet vitae mauris eget, egestas varius massa. Praesent ornare nisi at dui dapibus, ac tristique felis.

Phasellus maximus urna lacus, non imperdiet ex blandit sit amet. Vivamus et tellus est. Mauris ligula elit, placerat non tellus a, dictum porttitor urna. Phasellus mollis turpis id suscipit dapibus. In dolor.

Sed sit amet euismod sapien, non eleifend erat. Vivamus et quam odio. Integer nisi lacus, maximus sit amet turpis in, luctus molestie sem. Duis sit amet euismod erat. Fusce pulvinar ex neque, egestas cursus nulla ullamcorper vel. Pellentesque mollis erat egestas est rhoncus, sit amet sodales massa ullamcorper. Etiam auctor ante a neque facilisis tristique. Proin ultricies fringilla turpis, eget tempus elit imperdiet non. Quisque.

Etiam eu tortor placerat, varius orci non, ornare nunc. Cras suscipit in ligula ultricies lacinia. Pellentesque at tristique sapien, et scelerisque leo. Donec eu nisi at magna tristique luctus vel at turpis. Nam vestibulum ornare ex cursus vulputate. In elementum tellus at sapien bibendum, id maximus mauris convallis. Donec facilisis porta lobortis. Vivamus mauris diam, pretium ac dolor.

Pellentesque et consequat arcu, ac laoreet ante. Nam non.

Criando um app CRA do zero

Por muito tempo, as únicas ferramentas disponíveis para criar leiautes em CSS e posicionar elementos com boa compatibilidade entre browsers eram float e position. Porém, essas ferramentas possuem algumas limitações muito frustrantes, especialmente no que diz respeito à responsividade. Algumas tarefas que consideramos básicas em um leiaute, como centralização vertical de um elemento-filho com relação a um elemento-pai ou fazer com que elementos-filhos ocupem a mesma quantidade de espaço, ou colunas terem o mesmo tamanho independente da quantidade de conteúdo interno, eram impossíveis ou muito difíceis de serem manejadas com floats ou position, ao menos de forma prática e flexível.

A ferramenta Flexbox (de Flexible Box) foi criada para tornar essas tarefas mais simples e funcionais: os filhos de um elemento com Flexbox podem se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar.

O Flexbox é um módulo completo e não uma única propriedade; algumas delas devem ser declaradas no container (o elemento-pai, que chamamos de flex container), enquanto outras devem ser declaradas nos elementos-filhos (os flex itens).

Se o leiaute "padrão" é baseado nas direções block e inline, o leiaute Flex é baseado em direções "flex flow". Veja abaixo um diagrama da especificação, explicando a ideia central por trás do leiaute Flex.

Os ítens serão dispostos no leiaute seguindo ou o eixo principal ou o transversal.

Eixo principal: o eixo principal de um flex container é o eixo primário e ao longo dele são inseridos os flex items. Cuidado: O eixo principal não é necessariamente horizontal; vai depender da propriedade flex-direction (veja abaixo).

main-start | main-end: os flex items são inseridos dentro do container começando pelo lado start, indo em direção ao lado end.

Tamanho principal: A largura ou altura de um flex item, dependendo da direção do container, é o tamanho principal do ítem. A propriedade de tamanho principal de um flex item pode ser tanto width quanto height, dependendo de qual delas estiver na direção principal.

Eixo transversal: O eixo perpendicular ao eixo principal é chamado de eixo transversal. Sua direção depende da direção do eixo principal.

cross-start | cross-end: Linhas flex são preenchidas com ítens e adicionadas ao container, começando pelo lado cross start do flex container em direção ao lado cross end.

cross size: A largura ou altura de um flex item, dependendo do que estiver na dimensão transversal, é o cross size do íten. A propriedade cross size pode ser tanto a largura quanto a altura do ítem, o que estiver na transversal.

Flex container é o elemento que envolve sua estrutura. Você define que um elemento é um Flex Container com a propriedade display e valores flex ou inline-flex.

Flex Item são elementos-filhos do flex container.

Eixos ou Axes são as duas direções básicas que existem em um Flex Container: main axis, ou eixo principal, e cross axis, ou eixo transversal.

Guia Completo, Elementos e Exemplos

Flexbox CSS

Em 2018 eu comecei a trabalhar com Styled Components. No começo eu tive muito preconceito, sempre ficava reclamando, dizendo que não entendia bem como usar e hoje em dia eu praticamente não me imagino fazendo um projeto novo utilizando React sem usar essa belezura.

A ideia desse post é compartilhar um pouco da minha experiência e tentar ti convencer a testar essa lib que pode ti ajudar a resolver vários probleminhas comuns que temos.

Para quem já trabalha a um tempo com Front End, é bem comum já estar acostumado a pensar em trabalhar com o CSS focando em reuso em cima de algum padrão, seja ele BEM, SMACSS…

O que para concluir as tarefas do dia a dia nos leva a escrever um código que segue essa linha:

E isso faz todo sentido funciona super bem e muitos projetos são estruturados assim, esse estilo de organização ganhou muita força quando logo que o SASS e sua trupe de pré processadores foram sendo lançados.

Porém no mundo do desenvolvimento nada para e as coisas seguem evoluindo e nesse ritmo de lançamentos essa estratégia foi portada para os Single File Components do Vue.js.

https://vuejs.org/v2/guide/single-file-components.html

O mais legal dessa abordagem, é que destruimos tudo o que aprendemos nas bases do Front End que é deixar cada coisa em seu canto e juntamos tudo em uma coisa só. Porém muitas vezes acabamos não refletindo o por que disso ser algo tão difundido.

O estalo pra mim veio quando eu fiz um componente de acordeon, e vi que era muito fácil de ver toda a lógica do componente, seu estilo e qual era o markup (html) que estava servindo de base para o componente.