React Design Patterns - Mangayaki/UML GitHub Wiki

Padrões e funcionalidades usadas no Projeto

Controlled Components e Conditional Rendering

Controlled components são uma resposta do React para lidar com o estado de formulários. Esses componentes controlados recebem o estado através de props e podem notificar quaisquer mudanças por meio de callbacks, como o onChange.

Componentes pais podem controlar o estado do componente controlado lidando com o callback e gerenciando seu próprio estado, enquanto os novos valores são passados para o componente controlado como props.

Por padrão, o React tem suporte para componentes controlados e não controlados em formulários. No entanto, é altamente recomendado o uso de componentes controlados.

O trecho de código a seguir mostra um exemplo de componente controlado:

e o uso de Controlled Components nos permite utilizar o conceito de Conditional rendering isso significa que dependendo da ação que for tomada o componente pai pode exibir um componente diferente fazendo com que o nosso site se torne mais dinâmico e performático

React Hooks

os Reacts Hooks foram adicionados na versão 16.8, Essas funções permitem que os desenvolvedores usem o React sem necessidade de classes que foi um padrão bastante usado no React antes das Functions Components viraram um padrão aceito pela comunidade que utilizava a tecnologia.

O React possui diversos Hooks pré-prontos como o useEffect e o useState que são os mais utilizados porém o React tambem permite que criemos nossos proprios Hooks afim de podermos criar a nossa propria logica para gerenciar um estado que queremos alterar