Hooks useState e useEffect no React

O Hooks do React são como de forma ludica darei um primeiro exemplo sobre os hooks, são como Âncora ( âncoras que são utilizadas nos navios para prender os mesmo no fundo do oceano), dessa forma vamos começar falando sobre o useState() .

useState()

O useState é o hook que fornece a funcionalidade para definir o estado de uma variável e atualizar automaticamente o DOM (Document Object Module) com um novo estado.

usetState.png

Exemplo useState()

import React, { useState } from 'react';

export function App() {
	const [count, setCount] = useState(0);	
	let count = 0
	return (
	<div className="container">
	<h4>Count: {count}</h4>
	<button className="btn btn-info" 
onClick={() => {setCount(count + 1);}}>Clique aqui</div>
	)	
}

useState-example-02.png

Neste trecho do código, count será atualizado tanto como um variável quanto na DOM, (por causa da operação +1).

Exemplo useState para objetos:

import React, {useState} from 'react';

export function App() {
const [{ contador1, contador2 }, setContador] = useState({ contador1: 0, contador2: 20})
return (
<div className="container">
	<h4>Contador 1:{contador1}</h4>
	<h4>Contador 2:{contador2}</h4>
	<button className="btn btn-info" onClick={() => setCounter(currentState => ({
          ...currentState,          
          counter1: currentState.counter1 - 1,
        }))}>Clique aqui</button>
		</div>
	)
}

Outro exemplo useState().

import React, { useState } from 'react';

export function App() {
const [] = useState(localStorage.getItem("name") || "");
return (
<div className="container">
<input name="name" value={name} onChange={e => {
	setName(e.target.value)
	localStorage.setItem("name", e.target.value)
}} className="form-control" />
<h4>Nome: {name}</h4>
</div>
	)
}


useEffect() :

O useEffect executa toda vez que um componente é renderizado, por sua vez quando passado, nenhum array de dependência funciona como *componentDidMount. Muitos hooks do useEffect podem coexistir em um componente.

useEffect.png

O Hook do useEffect permite executar efeitos colaterais em componentes funcionais:

const [repositories, setRepositories] = useState();
useEffect(() ⇒ {
fetch('<https://api.github.com/users/aleksanderpalamar/repos>')
	.then(response ⇒ response.json())
	.then(data => setRepositories(data))
}, [])

Este trecho de código acima tem a funcionalidade de mostrar uma listagem de repositorios do meu usuário do github, consumindo a API do GitHub.

Company

PostsCareersContato

Install App

©2022 Aleksander Palamar. All rights reserved | CNPJ 26.328.604/0001-55