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>
  </>
}

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →