DEV Community: Matheus Ricelly

Introducing Hooks in React (useState)

Matheus Ricelly — Sun, 02 May 2021 14:09:54 +0000

Hey guys!

Although hooks are no longer a great novelty within React (since they have been introduced since version 16.8), there is still a large collection of documents that exemplify on the traditional model of development through classes in React components.

I will write a series of introductory articles talking about the main React Hooks, among them, the useState (which will be our first), useEffect and useContext, then we will pass through those a little more complex for some users, such as useRef, useCallback, useReducer, among others. You can also create your own hook, this is very useful in certain situations (we can see in a next publication, leave your comment).

Theory

What is a hook?

Well summarized, a hook is nothing more than a function that gives you access to certain features of a functional component of React (yes, functional component, since hooks do not work within classes), and that way you can access to your state and life cycle.

And to have a good performance as states and lifecycles are rendered in the component, Hooks have a basic rule that specifies that it should never be used within loops, conditional rules (if, else for example) or nested functions, be aware of this rule!

Hands-on

useState

const [state, setState] = useState(initialState);

This hook is responsible for manipulating the state of your application. It returns to us an array where we have a value and a function that when invoked will have a responsibility to change the information of this value.

We can pass an initial value when the initial rendering of the component occurs. This value is the same signpost within the initial argument in useState (initialState).

In this example, setState is used when we want to update that state variable within the component. It receives the new value informed and instead of updating immediately, it queues that value, thus passing the most recent value to this variable, this process is well known in the react by immutability.

An alternative, and you can find in several codes, it is the possibility of invoking the function that updates the status with a callback, taking the same previous example, could refactor it like this:

setState(prevState => nextState);

That way the new state based on the previous one returns. Due to immutability, this is widely used in some applications where we want to make some comparisons on state changes for screen animations, for example.

const [name, setName] = useState<string>('John Doe');

Already when we use the TypeScript, we infer the state type as in the above example useState<string>('value'). However, it is worth mentioning, that for primary types (such as strings, number, boolean, for example) you do not need to make the type explicit because the typescript interpreter can dynamically define them, leaving that way, the cleaner code Thus avoiding an error if a different data type is informed.

A more complete example about using type in useState with TypeScript you can be below:

import React, { useState } from 'react'

type ProductProps = {
  id: number
  name: string
  price: number
}

export default function Product() {
  const [ product, setProduct ] = useState<ProductProps[]>([
    {
      id: 1,
      name: 'Samsung Galaxy S20',
      price: 1999
    },
    {
      id: 2,
      name: 'Headset Misoftsot LX-300',
      price: 79
    },
    {
      id: 3,
      name: 'Mouse Gamer Corsair',
      price: 449
    }
  ])

  return (
    <div>
      <ul>
        { 
          product.map(item => (
            <li key={item.id}>{item.name} - {item.price}</li>
          ))
        }
      </ul>
    </div>
  )
}

Above, very simple, show how to pass an array of products, inside the useState. With this, in addition to testing the use of array (which is another type allowed inside the useState), we can verify how to proceed with this typing through the typescript and infer within the code perform the listing for view on the page.

Tips that are essential in using useState

As good practice, always try to call the useState Hooks at the beginning of the component. Even if you position it in different places, React will try to organize so that your code works, however, you will present several warnings in your devtools.

Avoid creating Usestate within loops, conditional or some nested function, this can cause various errors in the rendering of your component, damaging your project.

It's from this introductory line, that you can deepen a little more of your knowledge within React and React Hooks. Explore your knowledge and studies in this React functionality that allows you to help in various tasks in your applications. You can have all the information about Hooks in Official Documentation or a Detailed Reference of Usestate.

If you liked this article, be sure to share and comment. If you want to know a little more, change some ideas, you can leave the comments your opinion on the subject and even suggest something for the upcoming articles.

Enjoy and get to know a little of my jobs, visiting the site www.fsenaweb.me. It's has my portfolio, my social networks (including GitHub, where you have a few applications of examples to practice), and contacts links.

And that's it, until next time! My name is Matheus Ricelly, and for his attention, my thank you!

Introdução aos Hooks no React (useState)

Matheus Ricelly — Sun, 02 May 2021 14:03:38 +0000

Olá Pessoal!

Apesar dos Hooks não serem mais uma grande novidade dentro do React (pois foram introduzidos desde a versão 16.8), ainda existe um grande acervo de documentos que exemplificam sobre o modelo tradicional de desenvolvimento através de classes nos componentes do React.

Irei escrever uma série de artigos introdutórios falando sobre os principais Hooks do React, entre eles, o useState (que será nosso primeiro), useEffect e useContext, logo em seguida, passaremos por aqueles um pouco mais complexas para alguns usuários, como useMemo, useRef, useCallback, useReducer, entre outros. Você também pode criar seu próprio Hook, isso é muito útil em determinadas situações (poderemos ver numa próxima publicação, deixe o seu comentário).

Tentarei explicar de uma forma bem introdutória e clara (utilizando exemplos com Javascript e TypeScript), com a intenção de auxiliar aos desenvolvedores que estão iniciando nessa carreira do desenvolvimento front-end com o React (Web e Native) e que pode ser aplicado dentro dos frameworks mais populares como o Gatsby, Next.js e React Native.

Teoria

O que é um Hook?

De forma bem resumida, um Hook nada mais é que uma função que te dá acesso a determinados recursos de um componente funcional do React (sim, componente funcional, pois os Hooks não funcionam dentro de Classes), e dessa forma, você pode ter acesso ao seu estado e ciclo de vida.

E para ter uma boa performance da forma como os estados e os ciclos de vida são renderizados no componente, os Hooks tem uma regrinha básica que especifica que nunca deve ser utilizado dentro de loops, regras condicionais (if, else por exemplo) ou funções aninhadas, fique atento a essa regra!

Mão na massa

useState

const [state, setState] = useState(initialState);

Esse Hook é o responsável por manipular o state da sua aplicação. Ele nos retorna um array onde temos um valor e uma função que ao ser invocada terá responsabilidade de alterar a informação desse valor.

Podemos passar um valor inicial, quando ocorre a renderização inicial do componente. Esse valor é o mesmo sinalizado dentro do argumento inicial em useState(initialState).

Já nesse exemplo, o setState é utilizado quando queremos atualizar aquela variável de estado dentro do componente. Ele recebe o novo valor informado e em vez de atualizar de forma imediata, ele enfileira esse valor, passando assim o valor mais recente a essa variável, esse processo é bem conhecido no React por imutabilidade.

Uma outra alternativa, e que poderá encontrar em diversos códigos, é a possibilidade de se invocar a função que atualiza o estado com um retorno de chamada, pegando o mesmo exemplo anterior, poderia refatorá-lo assim:

setState(prevState => nextState)

Dessa forma retorna-se o novo estado com base no anterior. Devido a imutabilidade, isso é muito utilizado em algumas aplicações onde queremos fazer algumas comparações em mudanças de estado para animações em tela, por exemplo.

const [name, setName] = useState<string>('John Doe');

Já quando utilizamos o TypeScript, inferimos o tipo do estado como no exemplo acima useState<string>('value'). Porém, vale ressaltar, que para tipos primários (como strings, number, boolean, por exemplo) você não precisa tornar o tipo explícito, pois o interpretador do TypeScript consegue defini-los de forma dinâmica, deixando dessa forma, o código mais limpo e evitando assim um erro caso seja informado um tipo de dado diferente.

Um exemplo mais completo sobre o uso de tipo no useState com o TypeScript você pode ser abaixo:

import React, { useState } from 'react'

type ProductProps = {
  id: number
  name: string
  price: number
}

export default function Product() {
  const [ product, setProduct ] = useState<ProductProps[]>([
    {
      id: 1,
      name: 'Samsung Galaxy S20',
      price: 1999
    },
    {
      id: 2,
      name: 'Headset Misoftsot LX-300',
      price: 79
    },
    {
      id: 3,
      name: 'Mouse Gamer Corsair',
      price: 449
    }
  ])

  return (
    <div>
      <ul>
        { 
          product.map(item => (
            <li key={item.id}>{item.name} - {item.price}</li>
          ))
        }
      </ul>
    </div>
  )
}

Acima, de forma bem simples, mostro como passar um array de produtos, dentro do useState. Com isso, além de testarmos a utilização de Array (que é mais um tipo permitido dentro do useState), podemos verificar como proceder com essa tipagem através do TypeScript e inferir dentro do código realizar a listagem para exibição na página.

Dicas que são essenciais no uso do useState

Como boa prática, procure sempre chamar os hooks useState no início do componente. Mesmo que você o posicione em locais diferentes, o React irá tentar organizar para que seu código funcione, porém, apresentará diversos warnings em seu DevTools.

Evite criar useState dentro de loops, condicionais ou em algum função aninhada, isso pode causar diversos erros na renderização do seu componente, prejudicando o seu projeto.

É a partir dessa linha introdutória, que você poderá aprofundar um pouco mais dos seus conhecimentos dentro do React e o React Hooks. Explore um pouco os seus conhecimentos e estudos nessa funcionalidade do React que te permite ajudar em diversas tarefas nas suas aplicações. Você pode ter todas as informações sobre os Hooks na documentação oficial ou uma referência detalhada do useState.

Se você gostou desse artigo, não deixe de compartilhar e comentar. Se você quiser saber um pouco mais, trocar algumas idéias, poderá deixar nos comentários sua opinião sobre o assunto e até sugerir algo para os próximos artigos.

Aproveite e conheça um pouco dos meus trabalhos, visitando o site www.fsenaweb.me. Ele tem o meu portfólio, minhas redes sociais (inclusive o GitHub , onde você tem a disposição algumas aplicações de exemplos para poder praticar), e links para contatos.

Se você já desenvolve com o React e deseja ampliar os conhecimentos, eu indico um excelente curso, do Willian Justen, chamado React avançado, onde ele aborda de uma maneira super didática como trabalhar com o React, utilizando conceitos avançados, montando um projeto prático, realizando testes unitários, testes de integração e muito mais, vale a pena o investimento.

E é isso, até a próxima! Meu nome é Matheus Ricelly, e pela sua atenção, o meu muito obrigado !

Conhecendo e desenvolvendo filtros no Vue.js

Matheus Ricelly — Thu, 25 Jun 2020 13:04:47 +0000

Olá pessoal!

Nesse artigo, de forma especial, irei falar sobre uma funcionalidade que na minha opinião é pouco utilizada (ou comentada) dentro da comunidade Vue.js, que são os Filtros. Assim como os Plugins, Diretivas Personalizadas e os Mixins, os filtros fazem parte das funcionalidades reutilizáveis dentro do Vue, auxiliando no processo de criação de componentes.

Nos componentes do Vue, os filtros são funcionalidades que nos permitem obter diversas formatações na saída dos dados dinâmicos do seu estado. Ou seja, eles não alteram os dados de um componente, apenas podem formatar seus dados na renderização.

Filtros locais

Conforme a documentação oficial, a utilização dos filtros ocorrem dentro de interpolações mustache e expressões v-bind. Veja um exemplo da formatação do filtro no template:

<!-- em interpolações de texto --> 
{{ message | capitalize }}  
<!-- em interligações de atributos --> 
<div v-bind:text="message | capitalize"></div>
Criando de forma local, dentro do componente, podemos ter:
filters: {
   capitalize(value) {
     if (!value) return ''
     value = value.toString()
     return value.charAt(0).toUpperCase() + value.slice(1)
   }
}

Nesse primeiro exemplo, extraído da própria documentação, podemos analisar que a função capitalize apenas pega o valor passar e faz o tratamento com os métodos necessários para que se obtenha o resultado, não existindo nenhuma interferência no valor original do estado do componente.

Em algumas situações, os Filtros podem ser bem semelhantes as Propriedades Computadas, com a diferença de que nos filtros, os dados não são transformados, eles apenas alteram a saída e retornam uma versão com o determinada filtragem da informação. Assim, não é gerado um novo valor para aquele dado do componente.

Filtros Globais

Tem certas situações onde determinado filtro poderá ser usado em diversos componentes dentro da sua aplicação, principalmente naqueles projetos maiores, onde pode ocorrer diversas interações do sistema ao longo do projeto.
Para isso, existe a possibilidade de se criar os filtros globais, e assim como disse anteriormente, igualmente aos mixins, plugins, entre outros, eles ficam disponíveis em qualquer parte do seu projeto, facilitando a sua utilização e o reaproveitamento dos códigos.

Vue.filter('capitalize', function (value) {
   if (!value) return ''
   value = value.toString()
   return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
   // sua instância do Vue...
})

Nesse exemplo vemos a criação de um filtro global, utilizando a propriedade .filter dentro do arquivo main.js. Caso sua aplicação utilize muitos filtros, por questão de organização, é recomendado criar um arquivo separado e colocar todos os filtros neles e fazer o import dentro do arquivo main.js. E tem um detalhe que é muito importante e deve sempre ser lembrado: quando um filtro global possuir o mesmo nome de um filtro local, o filtro local terá prioridade.

Como os filtros são funções JavaScript, eles aceitam o valor a ser transformado como o primeiro parâmetro. Você também pode passar quantos argumentos achar necessários de acordo com a necessidade da sua aplicação.

{{ message | filterA('arg1', arg2) }}

Assim como podemos passar diversos argumentos, é possível encadear diversos filtros, para isso basta utilizarmos o símbolo pipe (|) e através de diversos filtros transformadores, obtermos único valor.

filters: {
    Upper(value) {
       return value.toUpperCase();
    },

    Lower(value) {
       return value.toLowerCase();
    },
}

E dentro do valor, utilizamos da seguinte forma:

{{ message | Upper | Lower }}

Claro que esse exemplo não teria nenhuma funcionalidade, mas apenas para exemplificar que é possível colocarmos diversos filtros dentro de um único valor, e como eu mencionei que são encadeadas, a função Lower será executada após obter o resultado de Upper, sendo passado como o único argumento de Lower.

Explore um pouco os seus conhecimentos e estudos nessa funcionalidade do Vue.js que te permite ajudar em diversas tarefas nas suas aplicações. Veja mais na documentação oficial.

Aproveite e conheça um pouco dos meus trabalhos, visite o site www.fsenaweb.me, ele tem o meu portfólio, minhas redes sociais (inclusive o GitHub, onde você tem a disposição algumas aplicações de exemplos para praticar com o Vue.js), e um pequeno espaço para contatos.

E não deixe de participar de nosso grupo no Telegram (VueJS Brasil), tem uma galeria muito especial pronta trocar outras experiências.

E é isso, até a próxima! Meu nome é Matheus Ricelly , e pela sua atenção, o meu muito obrigado !

Knowing and developing filters in Vue.js

Matheus Ricelly — Sat, 08 Feb 2020 16:46:31 +0000

Hi guys!

In this article, in a special way, I will talk about a feature that in my opinion is little used (or commented on) within the Vue.js community, which are Filters. Like Plugins, Custom Directives and Mixins, filters are part of the reusable features within Vue, helping in the process of creating components.

In Vue components, filters are functionalities that allow us to obtain different formats in the output of the dynamic data of its state. That is, they do not change the data of a component, they can only format their data in rendering.

Local filters

According to the official documentation, the use of filters occurs within mustache interpolations and v-bind expressions. See an example of the formatting of the filter in the template:

<!-- in interpolations text --> 
{{ message | capitalize }}  
<!-- in attribute interconnections --> 
<div v-bind:text="message | capitalize"></div>

Creating locally, within the component, we can have:

filters: {
   capitalize(value) {
     if (!value) return ''
     value = value.toString()
     return value.charAt(0).toUpperCase() + value.slice(1)
   }
}

In this first example, extracted from the documentation itself, we can analyze that the capitalize function just takes the value through and does the treatment with the necessary methods to obtain the result, with no interference in the original value of the component's state.

In some situations, the Filters can be very similar to the Computed Properties, with the difference that in the filters, the data is not transformed, they just change the output and return a version with the determined filtering of the information. Thus, a new value is not generated for that component data.

Global Filters

There are certain situations where a particular filter can be used on several components within your application, especially in those larger projects, where several interactions of the system can occur throughout the project.

For this, there is the possibility of creating global filters, and just as I said earlier, equally to mixins, plugins, among others, they are available anywhere in your project, facilitating their use and the reuse of codes.

Vue.filter('capitalize', function (value) {
   if (!value) return ''
   value = value.toString()
   return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
   // your Vue instance...
})

In this example, we see the creation of a global filter, using the .filter property inside the main.js. If your application uses many filters, for organization reasons, it is recommended to create a separate file and place all filters in them and import them into the main.js file. And there is a detail that is very important and should always be remembered: when a global filter has the same name as a local filter, the local filter will have priority.

Since filters are JavaScript functions, they accept the value to be transformed as the first parameter. You can also pass as many arguments as you need according to the needs of your application.

{{ message | filterA('arg1', arg2) }}

Just as we can pass several arguments, it is possible to link several filters, for that we just need to use the pipe symbol (|) and through several transforming filters, we obtain a single value.

filters: {
    Upper(value) {
       return value.toUpperCase();
    },

    Lower(value) {
       return value.toLowerCase();
    },
}

And within the value, we use it as follows:

{{ message | Upper | Lower }}

Of course, this example would have no functionality, but just to exemplify that it is possible to put several filters within a single value, and as I mentioned that they are chained, the Lower function will be executed after obtaining the result of Upper, being passed as the only one Lower's argument.

Explore your knowledge and studies a little in this Vue.js feature that allows you to help with various tasks in your applications. See more in the official documentation.

If you liked this article, be sure to share and comment. If you want to know a little more, exchange some ideas, you can leave your opinion on the subject in the comments and even suggest something for the next articles.

Enjoy and get to know a little of my work, visit the website www.fsenaweb.me, it has my portfolio, my social networks (including GitHub, where you have some sample applications to practice with Vue.js), and a small space for contacts.

And be sure to join our group and Vue.js in Brazil, through Telegram (VueJS Brasil), has a very special gallery ready to exchange other experiences.

That's it, see you next time! My name is Matheus Ricelly, and for your attention, my thanks!

How to work with mixins on Vue.js

Matheus Ricelly — Fri, 18 Oct 2019 18:03:20 +0000

Through my work with Vue, I have gained experience in developing components and reusing them in applications, thus gaining agility, time, resources, among others. And in recent projects I had come to realize that some of my components had very similar code, including some methods, computed properties.

It was a lot of code that I practically copied and pasted from one component to another, changing small details and that caught my attention, so I went to get more information on the internet, mainly in the documentation of Vue.js itself, and also in telegram, in the Vuejs Brasil group. I found out that there is a fantastic feature that is Mixins, where the documentation itself gives a clear explanation:

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Clearer than that, impossible, isn’t it ?! Mixins allow you to have methods, props, data, computed properties applied to various components. They closely resemble an approach to having an inheritance composition (those same inheritances we find in C #, Java, and other languages). Well, after that, I saw that my work on code reuse has slowed down a lot, making it even faster to build my applications. But let’s stop talking and let’s practice.

Let’s go to the example!

Inside your Vue application, we will create a folder called mixins, where we will put files with extension .js to import in the components where we will take advantage of the codes in the application.

In my case, I will use some words in the Portuguese language, but nothing is changed in the use of features.

In this first example (nomeMixins.js) I created a constant named nomeMixins and returned an object, just as we do in the Vue instance itself containing three simple properties for our study. Now we can import the nomeMixins.js file into the component:

Initially we made the import (import nomeMixins …) and declared mixins and assigned the value declared in import, in this case being mixins: [nomeMixins], where you can insert several other files through an array.

Not only with the data() we can work with, as I said earlier, you can work with methods, computed properties, and many others. Continuing, in the same file nameMixins.js, we will insert a computed property, where it will join 2 properties of the object in data (), which follows:

In the .vue component, we don’t need to add anything, since it already understands that that computed property will be part of it, so just call it inside the tag or via a console.log () to view the result:

This saves you line after line of code for activities that are repetitive on your site or application with Vue.js. There are several possibilities for this reuse, including a way to produce a global mixin where you can use it in all instances of Vue, but the documentation itself recommends caution, as this may affect other parts of your code.

You can find more information in the official Vue.js documentation, containing many examples of using mixins in your application, go there and check it out.

If you enjoyed this article, be sure to share and comment. If you want to know a little more, exchange some ideas (I’m still improving my English, but we can talk), you can leave your comments on the subject and even suggest something for the next articles.

Enjoy and know a little of my work, visit the site www.fsenaweb.dev, he has my portfolio, my social networks (including GitHub, where you have available some sample applications to practice with Vue.js), and a small space for contacts.

Matheus RicellyFollow

Career developed in the Information Technology area, with experience and academic training in web systems development.

And that’s it, see you next time! My name is Matheus Ricelly, and for your attention, thank you very much!