How to useEffect()

Paulo Alenquer — Sat, 17 Jul 2021 20:56:04 +0000

What is useEffect and what exactly this hook does?

I'm going to teach you (or at least try) these topics here in this post.

What is useEffect?

useEffect is a hook from React that receives two parameters. The first one is a function and the second one is a dependency array.

What this hook does?

There's a lot of things that you can do with this hook like trigger a function when your component is mounted or when a variable is updated. Look at this example:

useEffect(() => {
//first parameter
}, [/*second parameter*/]);

The first parameter is the function that will execute your code and the second parameter is when we want to execute this code. For example, with second parameter you can put all variables that you want and when these variables receives an update, useEffect will trigger the function.

If you want to trigger the function when your component mount, you just need to leave the array empty.

That's it! Now you can do what we want with useEffect. You can even make api requests with fetch.

Thanks for reading. Feel free to comment anything or correct me if I'm wrong.

Aqui está um tutorial de useState (ou quase)

Paulo Alenquer — Sun, 09 May 2021 22:12:24 +0000

Sempre que alguém se depara com o React pela primeira vez, se assusta com os seus hooks e funcionalidades, não é mesmo? Eu mesmo sinto medo de alguns hooks e já fui dormir chorando várias vezes por conta de alguns deles.

Mas fica tranquilo que pelo menos o useState eu posso tentar te ensinar de uma forma simples como se você estivesse no ensino fundamental pela primeira vez.

Em React nós temos vários hooks e um deles é o useState, esse pra mim é o mais simples de entender e aplicar, então vamos ver como que ele funciona.

Criando e iniciando o useState

O que é o useState? useState é um hook do React a qual nos retorna um array com dois elementos, sendo o primeiro o nosso estado e o segundo uma função para alterar o nosso estado. Além disso, podemos passar como argumento, um estado inicial para o nosso estado. Não entendeu ainda? relaxa que eu vou te explicar. Veja no exemplo abaixo:

import { useState } from "react";

export default function Component() {
  const [state, setState] = useState(0);

Aqui nós temos o state que é o estado, o setState que é a função para alterar o valor do nosso estado e o useState(0) que é o valor inicial do nosso estado, nesse caso é o 0 (poderia ser qualquer outro valor, como uma string e boolean).

Utilizando o useState na prática

Para entender melhor como funciona o useState, precisamos também entende-lo na prática. E pra isso vou mostrar um exemplo de useState para fazer um contador simplezão.

import { useState } from "react";

export default function Component() {
  const [counter, setCounter] = useState(0);

  function addCounter() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={addCounter}>Adicionar</button>
    </div>
  );
}

na linha 4 temos um exemplo de um estado que está recebendo um valor inicial de 0

const [counter, setCounter] = useState(0);

e uma função logo abaixo na linha 6 que irá acrescentar 1 para nosso estado toda vez que o botão for clicado

function addCounter() {
    setCounter(counter + 1);
  }

para exibir o estado na tela é só adicionar um {} no seu HTML com o estado dentro, no exemplo é o h1 (linha 12).

<h1>{counter}</h1>

Ao clicar no botão duas vezes automaticamente nosso estado foi exibido na página com o número 2, graças a nossa funçãozinha chamada addCounter que acrescentou 2 vezes.