Os React Hooks permitem que você use o estado e outros recursos do React sem ter que construir um componente de classe do React. Usando ganchos, você pode construir aplicativos React totalmente operacionais exclusivamente com Function Components. Não é mais class Example extends React.component {}necessário.

Ganchos Básicos

Ganchos diários para casos de uso diário.

React Basic Hooks
- useEffect
- useState => Este artigo
- useContext => Em breve

useState

Documentação oficial para usoEstado

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

1. Estado inicial

Uma matriz contendo dois valores.

1. Estado mais recente
2. Função para atualizar o estado para novos valores

useStateaceita um valor inicial e retorna dois valores: estado mais recente e uma função para atualizar o estado. Os valores são retornados na forma de um array e normalmente são lidos usando a sintaxe de desestruturação do array .

setStateé uma função assíncrona, por isso é crucial ter em mente que pode levar algum tempo para ser concluída. Às vezes, um novo estado requer que o estado anterior seja calculado. O cálculo de um novo estado com base em um estado antigo pode ser realizado passando uma função para o setStatemétodo fornecido no segundo [1]argumento (na matriz javascript) da matriz retornada. É importante certificar-se de que as funções useStatee useEffectsão executadas sempre na mesma ordem. Se as funções useStatee useEffectnão dispararem na mesma ordem, você passará por momentos muito ruins (mais informações sobre como realizar a ordem correta abaixo). Em cálculos precisos, será retornado quando a ordem da função não for mantida.

Exemplos

Entendendo useStateos valores de retorno.

O código a seguir pode ser expresso de várias maneiras.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Transformando ursos em touros.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

O código a seguir adicionará 27 ao estado anterior.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Compreendendo a inicialização preguiçosa de variáveis ​​de estado. Explicação oficial do React Docs.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Site pessoal
LinkedIn
Instagram