Hooks básicos do React(useState, useEffect, useContext)

Hooks são recursos introduzidos na versão React 16.8. Ele nos permite usar o estado e outros recursos do React sem escrever uma classe.

useState

O hook useState nos permite criar variáveis de estado em um componente de função React.
O estado nos permite acessar e atualizar determinados valores em nossos componentes ao longo do tempo
Quando criamos uma variável de estado, devemos fornecer a ela um valor padrão.E podemos incluir o estado em qualquer lugar do componente.

import { useState } from 'react'

export default function App () {
 const [count, setCount] = useState (0)
 return <h1>{count}</h1>
}

E para atualizar basta fazermos um função usando o setCount para atualizar o estado.

import { useState } from 'react'

export default function App () {
 const [count, setCount] = useState (0)
 return ( 
   <div>
    <h1>{count}</h1>
    <button 
     type="submit"
     onClick={() => setCount(count + 1)
     >Adicionar</button>
   </div>
  )
}

useEffect

O useEffect Hook nos permite realizar efeitos colaterais em nossos componentes funcionais.O useEffect aceita dois argumentos, a função e o os paramêtros, o segundo sendo opcional.

import { useEffect, useState } from 'react'

export default function App () {
 const [count, setCount] = useState (0)
 useEffect(()=>{
  document.title = `Vc clicou ${count}x`
 },[])
 return (...)
}

Nesse exemplo o useEffect tem um array de dependências vazio e isso irá fazer com que o código dentro só execute um vez, quando o componente é montado.O que talvez não seja sua intenção se vc quer mostrar no title quantas vezes o botão foi clicado.

Para resolver isso basta colocar no array de dependências o count, assim o useEffect irá monitorá-lo e toda vez que detectar uma mudança em count executará a função, alterando o title da página.

import { useEffect, useState } from 'react'

export default function App () {
 const [count, setCount] = useState (0)
 useEffect(()=>{
  document.title = `Vc clicou ${count}x`
 },[count])
 return (...)
}

useContext

O useContext fornece a forma de compartilhar dados entre todos componentes da mesma árvore de componentes, sem precisar passar explicitamente props entre cada nível.

Criar contexto

Para criar contexto, você deve Importar createContext e inicializá-lo.

import { createContext } from 'react'
const UserContext = createContext()

Em seguida, usaremos o Context Provider para agrupar a árvore de componentes que precisam do estado Context.
Envolva os componentes filho no Provedor de Contexto e forneça o valor do estado.

import { createContext, useState } from 'react'
const UserContext = createContext()
export default function App () {
 const [user, setUser] = useState("Maria")
 return (
   <UserContext.Provider value={user}>
    <Component1/>
  </UserContext.Provider>
 )
}

Agora, todos os componentes desta árvore terão acesso ao user do Context.

import { useContext } from 'react'
export default function Component5 () {
 const user = useContext(UserContext)
 return (
  <>
   <h1>Componente 5</h1>
   <h2>Oi {user}, seja bem vindo</h2>
  </>
}