A new feature from version 16.8.0, one of the most hyped topics as 2019 kicks off.

Image for post
Image for post
Fish hook via AntanO

What is React Hook?

React Hook is a feature that allows you to use state and other React features without the necessity of writing a class. With React Hook you’ll be able to:

  • Execute functions when the component is mounted and when dismounted
  • Add to context API more easily to reflect the changes in a functional component
  • Create your own abstractions that play with the lifecycles of React and use them as functional components

Why were Hooks made?

Hooks were intended to resolve three problems that frequently occurred, in the language Javascript as much as in the React lib.

First motive: It’s hard to reuse logic between components.

If you already use React you’ve probably noticed that you have to repeat yourself nearly a thousand times in order to duplicate logic, such as connecting to a state provider (connect in Redux for example). …

Image for post
Image for post
Exemplo de uso do decorator

Quando comecei com Redux não entendia direito qual era a razão de ter que escrever em arquivos separados o componente e conector do Redux. Eu achava isso muito verboso e não via ganhos.
Quando vi os decorators no connect fiquei encantado pois era muito menos verboso, simples de ser usado e dava uma boa estética no código.

Porém o tempo e experiencia me mostrou as partes ruins: quando usamos os decorators temos que lidar com quatro problemas gigantes que para mim inviabilizam o uso dele. Resolvi escrever este artigo para que não caiam nos mesmos problemas que já tive e se atentem ao começar um novo projeto com Redux! …


Pedro Henrique Santiago

Software engineer @creditasbr

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store