useState-useEffect.md

Como usar os hooks useState e useEffect na pratica

Sumário

• useState

  • Pra que ser o useState?
  • Primeiro passo importar: o useState
  • Segundo passo: Criar o estado
  • Terceiro paso: Definir o valor inicial
  • Quarto passo: Usar o estado
  • Quinto passo: Mudar o valor do estado

• useEffect

  • Pra que serve o useEffect

  • Primeiro passo: Importar o useEffect

  • Primeira opção de uso do useEffect

  • Segunda opção de uso do useEffect

  • Terceira opão de uso do useEffect

  • Quarta opção de uso do useEffect

useState

Pra que ser o useState?

Para definirmos estados dos nossos componentes funcionais no react

Como usar

Primeiro passo: Importar o useState

import React, { useState } from "react";

Segundo passo: Criar o estado

const [name, setName] = useState();

Mas por que desse formato estranho? Porque o useState retorna um array com 2 elementos, o primeiro é o estado e o segundo é uma função que serve para alterar o estado

Terceiro passo: Definir o valor inicial.

Para fazer isso é nescessario colocar o valor como argumento da hoof

// exeplo 1 iniciando o estado com a string 'a'
const [name, setName] = useState("a");

// exeplo 2 iniciando o estado com o numero 0
const [number, setNumber] = useState(0);

// exeplo 3 iniciando o estado com um objeto vazio
const [obj, setObj] = useState({});

Quarto passo: Usar o estado

const [name, setName] = useState("Bruno");
console.log(name);
// resultado 'Bruno'

Quinto passo: Mudar o valor do estado

Como dito anteriormente o useState retorna um array com 2 elementos, sendo que o segundo elemento é uma função que serve apenas para mudar o valor do primeiro elemento que é o estado. Para fazer isso a gente precisa chamar o segundo elemento e como argumento colocar o novo valor do estado

const [name, setName] = useState("Bruno");
console.log(name);
// resultado 'Bruno'
setName("Claudio");
console.log(name);
// resultado 'Claudio'

useEffect

Pra que ser o useEffect?

O useEffect serve para lidar com os efeitos. Podemos usá-los como os lifeCycles componentDidMount, componentDidUpdate e componentWillUnmount.

Primeiro passo: Importar o useEffect

import React, { useEffect } from "react";

Primeira opção de uso do useEffect

Chama-lo com uma calback como primeiro argumento

useEffect(() => {
  console.log("aqui");
});

Efeito: Irá exibir a string 'aqui' sempre que houver alguma alteração no componente. Efeito semelhante ao componentDidUpdate

Segunda opção de uso do useEffect

Chama-lo com uma calback como primeiro argumento e um array vazio no segundo argumento.

useEffect(() => {
  console.log("aqui");
}, []);

Efeito: Irá exibir a string 'aqui' assim que o componente for montado, semelhante ao componentDidMount

Terceira opão de uso do useEffect

Chama-lo com uma calback como primeiro argumento e um array com um ou mais estados dentro.

const [name, setName] = useState("");
const [email, setEmail] = useState("");

// Exemplo: 1 irá exibir a string 'Claudio' quando o estado name mudar,
// mas NÃO irá exibir quando o estado email mudar para 'claudio@teste.com'
useEffect(() => {
  console.log(name);
}, [name]);

// Exemplo 2: irá exibir a string 'aqui' quando o estado name mudar para
// 'Claudio' e quando o estado email mudar para 'claudio@teste.com'
useEffect(() => {
  console.log("aqui");
}, [name, email]);

console.log(name); // exibe uma string vazia

setName("Claudio");
setEmail("claudio@teste.com");

Efeito: Sempre que algum estado dentro do array mudar a calback será chamada, semelhante ao componentDidUpdate

Quarta opção de uso do useEffect

Com um return dentro da calback e um array vazio

useEffect(()=>{
	return () => {
	console.log('aqui')
		}
}, [])

Efeito: Sempre que o componente for desmontado o return do useEffect será executado. Efeito semelhante ao componentWillUnmount