Aprenda a usar hooks em React em poucos minutos

HOOKS

Hooks são códigos prontos que simplificam o desenvolvimento. O estado é uma informação que o componente usa.

useState

O useState é um hook do React que permite manipular o estado de um componente de maneira fácil.

State Lift

useEfects

O hook useEffect é usado para monitorar as alterações em um elemento. Ele recebe como parâmetro uma função e um array. A função contém o código que será executado quando o elemento for atualizado ou criado, e o array inclui o elemento que será monitorado. Se houver alguma mudança, o hook useEffect irá reagir e executar a função correspondente.

useEffect(() => {
  document.title = `Você clicou ${count} vezes`;
}, [count]);

useReducer

O Reducer é uma alternativa ao useState, é recomendado usar quando vamos manipular listas, objetos...
const [state, dispatch] = useReducer(reducer, initialState)

state:

é aonde temos acesso as informações

dispatch:

é uma função, que quando executada recebe como parametro um objeto com um type, que indica a ação a ser feita dentro do reducer
<button onClick={() => dispatch({type: 'ADD'})}>

useReducer:

receber como parametro 1 função e os valores iniciais

reducer:

sempre vai receber 2 parametros, 1° o valor atual do reducer(state); 2° a função que vai executar(action)
const reducer = (state, action) => {}
a função reducer faz as alterações com base no action, e no final retorna o novo state.

para fazer as alterações utilizamos o switch da seguinte forma:

switch(action.type){
 case: 'ADD':
  return ... 
 break
}

podemos organizar nossos reducers em aquivos diferentres, para fazer isso criamos um hook proprio aonde neel é criado o useReducer e todas as configurações, ao final damos um:
return useReducer(reducer, initialState)
para usa-lo basta importar dentro do seu componente e usar:
const [state, dispatch] = useCriado()