Hooks - useState e useContext

useState

O que é?

É uma função nativa do React adicionada na versão 16.8.0, popularmente conhecida como hook de estado. É uma funcionalidade recente, logo códigos legados normalmente ainda não a utilizam.

O que faz?

Permite a criação e manipulação de estados dentro de componentes funcionais.

Sintaxe

A sintaxe é muito simples, primeiro precisamos importar a função, em seguida, dentro do componente funcional, a chamamos passando como parâmetro o valor inicial do estado. Com isso podemos atribuir o retorno do useState() a constantes, essas que devem ser criadas a partir da desconstrução de Array.

É necessária essa desconstrução pelo fato de que a função useState() retorna um Array com dois valores, o primeiro é o valor do estado em si e o segundo é uma função que nos permite alterar aquele estado, podendo ser comparada a um “setState exclusivo”.

import { useState } from 'react';

function SomeComponent() {
  const [myState, setMyState] = useState(<valor inicial>);
}

Por convenção o segundo valor do Array retornado do useState() deve ser nomeado da seguinte forma: set + nome do estado.

---

useContext

O que é?

É uma função nativa do React adicionada na versão 16.8.0, popularmente conhecida como hook de contexto. É uma funcionalidade recente, logo códigos legados normalmente ainda não a utilizam.

O que faz?

Essa função permite a utilização de contextos de forma mais simplificada e menos verbosa, porém por se tratar de um hook, seu uso é exclusivo em componentes funcionais.

Sintaxe

Sua sintaxe se assemelha muito a do useState(), com a diferença que passamos o contexto por parâmetro no lugar no valor inicial. Outra diferença é a desconstrução dos valores, no useContext() devemos desconstruir com base na estrutura passada no Provider, se for um Array, desconstruimos um Array, se for um objeto, desconstruimos um objeto.

import { useContext } from 'react';

const { someState, someHandler } = useContext(MyContext);
const [someState, setSomeState] = useContext(MyContext);

A utilização do useContext() substitui o .Consumer, porém a criação e estruturação do .Provider ainda é a mesma.

---

Criando "Contexto"

O que é?

O “Contexto”, aqui em questão, nada mais é do que um componente React que se preocupará única e exclusivamente com a parte lógica, sendo assim os estados, efeitos e até mesmo os "handlers" de eventos, podem ficar agrupados no componente de “Contexto”.

Sintaxe

Primeiro precisamos criar nosso "Contexto", para isso utilizamos a função createContext() e armazenamos seu retorno a uma constante com nome adequado. Com o "Contexto" criado, partimos para a definição do componente que irá armazenar nossa lógica.

Para criarmos tal componente utilizamos a sintaxe padrão de um componente funcional, uma função (clássica ou arrow function) que irá conter funções e hooks próprios e retorna um código JSX. Com a diferença que nesse caso, nosso retorno será o .Provider, esse que irá renderizar os componentes que ele encapsular (props.children).

export const MyContext = createContext();

export function MyContextProvider() {
  const [someState, setSomeState] = useState(<valor inicial>)

  return (
    <MyContext.Provider value={{ someState, setSomeState }}>
      {props.children}
    </MyContext.Provider>
    )
}

export const MyContext = createContext();

export const MyContextProvider = () => {
  const [someState, setSomeState] = useState(<valor inicial>)

  return (
    <MyContext.Provider value={{ someState, setSomeState }}>
      {props.children}
    </MyContext.Provider>
    )
}

---

Usando “Contexto”

O que é?

É a forma pela qual iremos acessar os estados, efeitos ou "handlers" que definimos no componente de “Contexto”. (explicado logo acima)

Sintaxe

O acesso a esses elementos é muito simples, primeiramente precisamos “empacotar” os componentes que estarão sobre o mesmo Contexto. Feito isso, basta importar o “Contexto” em si e salvá-lo dentro de uma constante através do hook useContext().

import MyContextProvider from './';

function App() {
  return (
    <MyContextProvider>
      <SomeComponent />
      <OtherComponent />
    </MyContextProvider>
  )
}

Logo acima temos o exemplo de encapsulação de componentes através do "Componente Contexto" criado anteriormente na seção Criando Contexto.

E logo abaixo está o exemplo de como se consumir o contexto do <MyContextProvider /> através do hook useContext().

function SomeComponent() {
  const { someState, setSomeState } = useContext(MyContext);

  return (
    <div>
      <p>{someState}</p>
      <button onClick={() => setSomeState()}>Click</button>
    </div>
  )
}

Reforçando, o useContext() recebe por parâmetro o Contexto que desejamos consumir e sua desestruturação deve respeitar a estrutura passada no value={} do .Provider.

Comments

[Bruno de Oliveira]

Muito bom, obrigado pela explicação.