18

Gostaria de entender o conceito e se possível com exemplos dessa nova feature do React.

  • O que vai alterar na forma que se cria projetos com React?

  • A comunidade parece ter gostado, quais os motivos?

3 Respostas 3

10

Existem 4 tipos de Hooks:

Resumindo:

"When would I use a Hook? If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component."

Traduzindo...

"Quando eu usaria um gancho? Se você escrever um componente de função e perceber que precisa adicionar algum estado a ele, anteriormente você precisou convertê-lo para uma classe. Agora você pode usar um gancho dentro do componente de função existente."

Ele foi pensado para as pessoas que não são essencialmente programadores JS, e tem dificuldade para entender como o this funciona na linguagem, então antes a pessoa tinha que entender isso:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

E agora ela só precisa disso:

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Basicamente você tem uma função construtora que retorna dois valores, o primeiro é o objeto criado e o segundo é um setter que altera o valor inicial, mais ou menos como isso:

class Hook {
  constructor(initialValue) {
    //Define o valor inicial passado por parâmetro
    this.value = initialValue

    //Define a função que altera o valor
    const setter = newValue => this.value = newValue

    //Retorna o objeto criado e a função setter
    return [this, setter];
  }

  //Retorno como string do objeto
  toString() {
    return this.value;
  }
}

const [value, setter] = new Hook('foo'); 

console.log(value);

setter('bar');

console.log(value);

//Aqui vai retornar o valor do toString
console.log('Esse é o valor: '+value);
//Equivalente a
console.log('Esse é o valor: '+value.toString());

O que vai alterar na forma que se cria projetos Reacts?

Você pode continuar usando classes e não irá mudar nada, mas agora é possível criar componentes mais complexos no React com simples funções. Mas é importante lembrar que os Hooks estão disponíveis apenas na versão 16.8 ou superior.

6

O que são Hooks?

Hooks são um conjunto de novas funcionalidades que dentre outras coisa permitem ao desenvolvedor controlar o state de uma forma mais simples, mais rápida e mais intuitiva.

Sua implementação deu-se a partir da versão 16.7.0-alpha.0 e a promessa é que o desenvolvedor consiga transitar gradativamente do padrão utilizado atualmente para o hooks sem Breaking Changes e sem quebra muito a cabeça, podendo no inicio até utilizar as duas formas.

Os Hooks são classificados em básicos e adicionais da seguinte forma:

Hooks básicos:

  • useState
  • useEffect
  • useContext

Hooks adicionais:

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeMethods
  • useMutationEffect
  • useLayoutEffect

Explicando o Hooks básicos.

O useState permite ler e armazenas as informações de maneira mais fácil e prática no state, eliminando alguns componentes de classes e substituindo por componentes funcionais.

O useEffect é o hook que utilizamos para executar funções que necessitam ou realizam algum efeito no componente, por exemplo, mutations, subscriptions, timers e logging. Tem o mesmo efeito que os componentDidMount e componentDidUpdate tem nas classes.

O useContext é um hook que permite você utilizar o Context passando o state entre os componentes Provider(de onde vem o state) e Consumer(quem receberá) de forma mais fácil e rápida.

Conclusão.

Os hooks vieram para ajudar ao desenvolvedor escrever componentes de forma mais simples e legível.

Não será preciso refatorar todas as classe e todo o projeto. Eles não quebrarão seu código e você poderá inclusive escrever das duas formas até se acostumar com eles.

Os hooks também não matarão o redux, inclusive podem ser utilizados com ele.

É preciso cuidado ao utilizar hooks como o useMutationEffect e o useLayoutEffect, pois os mesmo podem causar efeitos indesejados e problemas de desempenho.

No meu blog tem um exemplo com link para download do código no gitHub

https://bognarjunior.wordpress.com/2018/11/04/react-hooks-entendendo-o-conceito/

2

O que são hooks?

Hooks são funções, por isso variam tanto entre si. Alguns retornam um objeto, outros retornam um array, uma função ou nada. Cada hook terá sua responsabilidade, inclusive você pode criar os seus. Exemplos de alguns hooks do React:

  • useState: Retorna um valor com estado e uma função para atualizá-lo. Equivalente ao state dos componentes classe.

  • useEffect: Executa uma função após a renderização do componente ser realizada na tela. É possível definir se será executado apenas na primeira renderização, em todas, ou quando alguma variável é atualizada. É como o componentDidMount ou componentDidUpdate dos componentes classe.

  • useContext: Faz o uso de um contexto compartilhado entre diferentes componentes. É como o static contextType = MyContext ou <MyContext.Consumer> dos componentes classe.

  • useRef: Retorna uma referência para um valor mutável. Pode ser usado para armazenar ref de elementos no DOM.

Existem vários outros hooks, citei esses brevemente apenas para dar exemplos de que seus comportamentos são bem distintos, e que é possível realizar coisas de componentes classe em componentes funcionais.

Como uso hooks?

Os hooks só podem ser usados em componentes funcionais. A cada renderização, o hook é executado novamente, já que você está invocando ele no seu componente, por exemplo:

function Component() {
  // O hook abaixo é o useEffect, e estou invocando ele passando dois argumentos,
  // uma arrow function e um array vazio.
  useEffect(() => {}, []);
}

E aqui entra um ponto importante. Não é porque o hook é invocado em todo render que necessariamente algo será feito. Alguns hooks fazem uso de um array de dependências para saber se devem executar algo novamente (veja O que é e por que devo fornecer um “array de dependências” para os hooks do React?).

Outros, não precisam do array de dependências, pois não executam nenhum código diferente no segundo render em diante, é o caso do useState, que aceita apenas o estado inicial e retorna o valor corrente e uma função para atualizar o valor:

function SubComponent({ current }) {
  const [childCounter] = React.useState(current);

  return (
    <div>
      <p>childCounter: {childCounter}</p>
      <p>O <b>childCounter</b> não atualiza porque apenas passo o valor inicial para o hook useState, mesmo sabendo que a prop current possui o valor {current} :)</p>
    </div>
  );
}

function App() {
  const [parentCounter, setParentCounter] = React.useState(0);

  function increment() {
    setParentCounter((oldCounter) => oldCounter + 1);
  }

  return (
    <div>
      <p>parentCounter: {parentCounter}</p>
      <SubComponent current={parentCounter} />
      <button onClick={increment}>Incrementar</button>
    </div>
  );
}

ReactDOM.render(<App /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Para que servem os hooks? Por que eles existem?

Aqui vale a leitura da documentação oficial, que é bem completa sobre o assunto. Em resumo, eles foram criados para:

  • Permitir que você reutilize a lógica com estado sem alterar sua hierarquia de componentes;
  • Permitir que você divida um componente em funções menores com base nas partes relacionadas (como buscar dados);
  • Classes são confusas, e os hooks permitem que você use mais recursos do React sem classes.

Falo mais sobre isso na pergunta Os "Class Components" morreram no React?

Regras

Os hooks possuem algumas regras bem definidas. Eles devem ser executados:

  • Apenas no top level. Ou seja, não execute hooks dentro de laços, condições ou funções aninhadas;
  • Apenas em componentes funcionais.

Além disso, os hooks customizados, criados por você, devem iniciar com use. Por exemplo: useShortcut, useRequest, useAuthentication.


Outras perguntas

O que vai alterar na forma que se cria projetos com React?

Bom, agora você pode utilizar apenas componentes funcionais, sem precisar mais de componentes classes. Isso aparentemente se tornou um padrão hoje em dia, é muito difícil de encontrar alguma biblioteca que é atualizada e que utilize classes (ou que crie código novo com classes).

Mas você pode continuar fazendo as coisas apenas com componentes classe. A documentação diz que não possuem planos para acabar com as classes. Novamente, referencio a pergunta Os "Class Components" morreram no React?

Inclusive, existe uma pergunta no FAQ, em tradução livre:

Eu preciso reescrever todos os meus componentes classe?

Não. Não existem planos de remover classes do React — todos nós precisamos continuar desenvolvendo projetos e não podemos arcar com as reescritas. Nós recomendamos experimentar Hooks em códigos novos.

E também em Estratégia de Adoção Gradual, onde recomendam evitar qualquer "grande reescrita", principalmente em componentes classe complexos.

A comunidade parece ter gostado, quais os motivos?

Cada um tem seu motivo. No geral, acredito que a documentação elencou bem os pontos no tópico Motivation. São mais simples de entender do que classes, para quem não está habituado; você consegue reutilizar lógica com estado; possuem um padrão funcionam bem.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .