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.

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

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.

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.