O useReducer é um gancho que nos permite gerenciar lógicas de estado complexas. Se você já usou o Redux antes, o conceito de useReducer é bastante semelhante ao Redux. Um redutor é basicamente uma instrução switch definindo todas as ações possíveis que um contexto pode executar e atualizando apenas a parte do estado global relacionada a essa ação. Em um redutor, você encapsula o estado e as funções que alteram esse estado em um só lugar.

Vamos fazer um exemplo muito simples para clarear melhor esse hook na sua cabeça.

No seu App.js faça:

```javascript
import { useReducer } from "react";
import { products } from "./products";
import Card from "./components/Card";
import "./App.css";

function App() {
  const [state, dispatch] = useReducer(myReducer, [products[0]]);

  const addHandler = (product) => {
    dispatch({ type: "ADD", payload: product });
  };

  const removeHandler = (id) => {
    dispatch({ type: "REMOVE", id });
  };

  const clearHandler = () => {
    dispatch({ type: "CLEAR" });
  };

  return (
    <div className="App">
      <h2 className="Header">useReducer - Shopping Cart</h2>

      <div className="CardsContainer">
        {products.map((product) => (
          <Card
            key={product.id}
            title={product.name}
            price={product.price}
            onClick={() => addHandler(product)}
          />
        ))}
      </div>

      <div className="CartHeader">
        <h3>Cart</h3>
        <button onClick={clearHandler}>Clear</button>
      </div>

      <div className="CartBody">
        {!state.length && (
          <p className="CartEmptyMessage">Your cart is empty</p>
        )}

        <ul>
          {state.map(({ id, name, price }, index) => (
            <li className="CartProduct" key={index}>
              <h4>
                {name} - ${price}{" "}
              </h4>
              <button onClick={() => removeHandler(id)}>x</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;
```

Dentro de App, você já deve ter identificado o useReducer e alguns funções que executam um tal de dispatch né? Beleza! Vamos lá.

Do useReducer nos extraímos o estado e a função que altera o estado, dentro dele temos myReducer e o valor inicial.

State, OK, acho que você sabe!

Dispatch é como setState, porem precisa receber um objeto contendo a função que você quer executar e o valor/objeto que essa função receberá.

Agora vamos construir o restante. No seu src crie o arquivo products.json contendo:

```json
{
  "products": [
    {
      "id": 1,
      "name": "Product 1",
      "price": 111
    },
    {
      "id": 2,
      "name": "Product 2",
      "price": 222
    },
    {
      "id": 3,
      "name": "Product 3",
      "price": 333
    }
  ]
}
```

No src crie a pasta components, depois Card, dentro crie o index.jsx com:

```javascript
export default function Card({ title, price, onClick }) {
  return (
    <div className="Card">
      <div className="CardHeader">
        <h4>{title}</h4>
        <h4>${price}</h4>
      </div>
      <button onClick={onClick}>Buy</button>
    </div>
  );
}
```

No App.css coloque:

```css
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.App {
  margin: 0 32px;
  width: 600px;
}

.Header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.CardsContainer {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
}

.Card {
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px black;
  padding: 16px;
  flex: auto;
}

.Card h4 {
  margin: 0 0 16px 0;
  padding: 0;
}

.CardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.CartHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

button {
  border-radius: 10px;
  height: 2rem;
  font-size: 1rem;
  box-shadow: 7px 7px 10px -10px black;
  font-weight: 700;
  border: none;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button:hover {
  cursor: pointer;
}
.Card button {
  width: 100%;
  border-radius: 10px;
  height: 2rem;
  font-size: 1rem;
  box-shadow: 7px 7px 10px -10px black;
  font-weight: 700;
  border: none;
}

.CartBody ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.CartBody ul li {
  list-style: none;
  display: flex;
  align-items: center;
}

.CartEmptyMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

.CartProduct {
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px black;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
}
```

Agora vamos criar nosso redutor, em cima da função App, crie:

```javascript
const myReducer = (product, action) => {
  switch (action.type) {
    case "ADD":
      if (product.find((p) => p.id === action.payload.id)) {
        return product;
      }
      return [...product, action.payload];
    case "REMOVE":
      return product.filter((item) => item.id !== action.id);
    case "CLEAR":
      return [];
    default:
      return product;
  }
};
```

É uma função que recebe um produto e uma ação, dentro temos um switch com 3 tipos de ação, adicionar, remover e limpar.

ADD verificar se o id existe no estado, e sim, não faça nada, se não, adiciona ao array do estado.

REMOVE filtra pelo id que é diferente daquele enviado e retorna.

CLEAR só retorna um array vazio, zera nosso estado!

Agora, ao executar você verá:

![useReducer Exemplo 1](/assets/img/usereducer-1.png "useReducer Exemplo 1")

Criamos uma página contendo 3 produtos para compra, o carrinho já inicia com um produto, lembra que nos passamos um valor iniciar para o hook useReducer? Joia!

Com certeza você entendeu o uso do useReducer, mesmo que seja de forma simples, é assim que começa!

Teremos exemplos um pouco mais complexos em um post futuro com uso de Context e criando Custom Hook (já esta no gatilho)!

useReducer

Antes de apresentar a solução que a Context API resolve, vou apresentar o problema.

Para que você entenda perfeitamente o problema, vamos criar alguns componentes, no seu arquivo App.js faça:

```javascript
import { useEffect, useState } from "react";
import Navbar from "./components/Navbar";
import Header from "./components/Header";
import Card from "./components/Card";

function App() {
  const [user, setUser] = useState();

  useEffect(() => {
    setUser("Bruno");
  }, []);

  return (
    <div className="App">
      <Navbar user={user} />
      <main>
        <Header user={user} />
        <Card user={user} />
      </main>
    </div>
  );
}

export default App;

```

No src crie a pasta components, dentro de components crie a pasta Card, dentro de Card crie index.jsx com:

```javascript
import CardImage from "../CardImage";
import CardTitle from "../CardTitle";
import CardBody from "../CardBody";

export default function Card({ user }) {
  return (
    <div className="Card">
      <CardImage />
      <CardTitle user={user} />
      <CardBody />
      <button>Botão</button>
    </div>
  );
}

```

Dentro de components crie a pasta CardBody com o arquivo index.jsx, no arquivo coloque:

```javascript
function CardBody() {
  return (
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  );
}

export default CardBody;

```

Dentro de components crie a pasta CardImage com o arquivo index.jsx, no arquivo coloque:

```javascript
function CardImage() {
  return <div className="img" />;
}

export default CardImage;

```

Dentro de components crie a pasta CardTitle com o arquivo index.jsx, no arquivo coloque:

```javascript
function CardTitle({ user }) {
  return <h2>{user}</h2>;
}

export default CardTitle;

```

Dentro de components crie a pasta Header com o arquivo index.jsx, no arquivo coloque:

```javascript
function Header({ user }) {
  return (
    <div className="Header">
      <h1>Usuário: {user}</h1>
    </div>
  );
}

export default Header;

```

Dentro de components crie a pasta Navbar com o arquivo index.jsx, no arquivo coloque:

```javascript
function Navbar({ user }) {
  return (
    <ul className="horizontal">
      <li>
        <a href="home">Home</a>
      </li>
      <li>
        <a href="news">News</a>
      </li>
      <li>
        <a href="contact">Contact</a>
      </li>
      <li className="rightli floatright">
        <a href="user" className="active">
          Olá, {user}
        </a>
      </li>
    </ul>
  );
}

export default Navbar;

```

Joia! Agora pra finalizar coloque esse CSS no arquivo index.css principal do projeto:

```css
body {
  margin: 0;
  padding: 0;
}

.App {
  margin: 0;
}

ul.horizontal {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(51 51 51);
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

ul.horizontal li {
  float: left;
}

ul.horizontal li a.active {
  background-color: rgb(4 170 109);
}

ul.horizontal li a {
  display: inline-block;
  color: rgb(255 255 255);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.floatright {
  float: right !important;
}

main {
  padding: 32px 64px;
}

.Card {
  padding: 5%;
  border-width: 1px;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px black;
  margin-top: 3rem;
  height: auto;
  width: 260px;
}

.Card button {
  width: 100%;
  border-radius: 10px;
  height: 2rem;
  font-size: 1rem;
  box-shadow: 7px 7px 10px -10px black;
  font-weight: 700;
  border: none;
}

.Card .img {
  width: 100%;
  height: 150px;
  opacity: 0.9;
  background: url("https://assets-global.website-files.com/5d9bc5d562ffc2869b470941/5e1f8bd1dc3c511ea5a28a56_icon-rect-tech.png");
  background-size: cover;
}

```

Legal! Feito tudo isso, agora execute e vamos ver o resultado:

![Context API Exemplo 1](/assets/img/7eewyq.csb.app_-hd-.png "Context API Exemplo 1")

Preste atenção em uma coisa, no App.js estou fazendo um setUser dentro do useEffect pra imitar uma chama a API, o nome Bruno que esta no state esta sendo apresentado em 3 componentes diferentes, na NavBar, no Header e no Card, o que é muito normal, as vezes temos o mesmo dado sendo apresentado em diversos componentes. 

O problema esta em como passar esses dados de um lado para o outro, passando props pra lá e pra cá, passando props até para componentes que não vão precisar desse dado somente para passar para outro componente filho,  esse problema se chama **Prop Drilling**, veja o exemplo como estamos passando a prop para o component Card somente repassar para o filho CardTitle:

```javascript
<div className="App">
    <Navbar user={user} />
    <main>
        <Header user={user} />
        <Card user={user} />
    </main>
</div>
```

```javascript
import CardImage from "../CardImage";
import CardTitle from "../CardTitle";
import CardBody from "../CardBody";

export default function Card({ user }) {
  return (
    <div className="Card">
      <CardImage />
      <CardTitle user={user} />
      <CardBody />
      <button>Botão</button>
    </div>
  );
}


```

```javascript
function CardTitle({ user }) {
  return <h2>{user}</h2>;
}

export default CardTitle;

```

Não seria mais fácil se tivéssemos esse dado em algum outro lugar e importar somente no componente que precisa desse dado? Sim! Pois é, esse é o problema que Context API pode te ajudar a resolver! Vamos começar a implementação.

No src crie uma pasta context, dentro crie o arquivo user.js com o código:

```javascript
import { useState, createContext } from "react";

export const UserContext = createContext();

export const UserProvider = (props) => {
  const [user, setUser] = useState("Bruno");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {props.children}
    </UserContext.Provider>
  );
};

```

Vou explicar as coisas referentes a Context API, o restante provavelmente você já sabe. Estamos importando createContext que nos ajuda na criação do context, criando uma const UserContext que recebe a função createContext do React, criando o UserProvider que é o nosso provedor das informações referentes a usuário, criando o state que armazena as informações, no return temos a declaração do provedor, value são as informações que queremos que o provedor disponibilize e children são as páginas do nosso projeto.

Legal, agora precisamos importar nosso provedor lá no index.js principal:

```javascript
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { UserProvider } from "./context/user";
import "./index.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <UserProvider>
      <App />
    </UserProvider>
  </StrictMode>,
  rootElement
);

```

Como o componente App agora é filho do nosso UserProvider, toda essa página ou componente juntamente com seus filhos tem acesso as informações disponibilizadas por esse provedor.

Agora já podemos dar uma limpada no nosso App.js e parar de passar as props:

```javascript
import Navbar from "./components/Navbar";
import Header from "./components/Header";
import Card from "./components/Card";

function App() {
  return (
    <div className="App">
      <Navbar />
      <main>
        <Header />
        <Card />
      </main>
    </div>
  );
}

export default App;

```

Joia, agora já podemos usar nosso context pegando dados dele, vamos começar lá pela nossa Navbar, vai ficar dessa forma:

```javascript
import { useContext } from "react";
import { UserContext } from "../../context/user";

function Navbar() {
  const { user } = useContext(UserContext);

  return (
    <ul className="horizontal">
      <li>
        <a href="home">Home</a>
      </li>
      <li>
        <a href="news">News</a>
      </li>
      <li>
        <a href="contact">Contact</a>
      </li>
      <li className="rightli floatright">
        <a href="user" className="active">
          Olá, {user}
        </a>
      </li>
    </ul>
  );
}

export default Navbar;

```

Viu? O nome voltou a ser apresentado na Navbar!

Aqui nos estamos importante a função useContext do React que é a função que nos auxilia no uso de contextos. Importanto nosso UserContext. Extraindo o state user de dentro do context UserContext.

Agora não estamos criando state no App e repassando para vários componentes criando Prop Drilling, o código fica mais limpo e podemos pegar informações do context somente nos componentes que precisarmos.

Vou deixar 2 desafios para você:

1. Utilize o state user do context nos outros componentes que precisam dessa informação.
2. Percebeu que em nosso UserContext também estamos disponibilizando a função setUser? Crie um useEffect no componente que quiser, use a função setUser para trocar o nome do usuário depois de 2 segundos. Dica: use a função setTimeOut.

Context API

O hook useDebugValue tem um uso muito simples, é usado para exibir um label ao lado do nome de um hook personalizado no React DevTools.

Exemplo. Em seu App.js faça:

```javascript
import useTeste from "./hooks/useTeste";
import "./styles.css";

export default function App() {
  const [state, toggleState] = useTeste();

  return (
    <div className="App">
      <h1>isTeste: {state.toString()} </h1>
      <button onClick={toggleState}>Toggle state!</button>
    </div>
  );
}

```

Depois crie uma pasta hooks e dentro dela crie o arquivo useTeste.js:

```javascript
import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  return [state, toggleState];
}

export default useTeste;
```

Ótimo, agora você tem um hook personalizado. Ao executar você verá:

![useDebugValue Exemplo 1](/assets/img/usedebugvalue-1.png "useDebugValue Exemplo 1")

Se você estiver com a extensão React DevTools instalada no seu navegador clique em App e veja ao lado:

![useDebugValue Exemplo 2](/assets/img/usedebugvalue-2.png "useDebugValue Exemplo 2")

Muito bem, ai esta o nome do nosso hook personalizado, seu state e o valor na qual o state foi iniciado.

Agora vamos inserir o useDebugValue. No hook inseria `useDebugValue("Label do useTeste");` antes do return. Ficará assim:

```javascript
import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  useDebugValue("Label do useTeste");

  return [state, toggleState];
}

export default useTeste;

```

Ao ir novamente no React DevTools, clicando em App, verá:

![useDebugValue Exemplo 3](/assets/img/usedebugvalue-3.png "useDebugValue Exemplo 3")

É isso! useDebugValue é isso!

Agora, da pra fazer um pouco mais, por exemplo, ele aceita uma segunda função para formatação desse label, dito isso, fica interessante fazer o seguinte:

```javascript
import { useState, useDebugValue } from "react";

function useTeste() {
  const [state, setState] = useState(false);

  const toggleState = () => setState((v) => !v);

  const date = new Date();

  useDebugValue(date, (date) => date.toLocaleString("pt-br"));

  return [state, toggleState];
}

export default useTeste;
```

Você verá:

![useDebugValue Exemplo 4](/assets/img/usedebugvalue-4.png "useDebugValue Exemplo 4")

useDebugValue

O hook useLayoutEffect tem 2 pequenas diferença com useEffect.

A primeira diferença é que useLayoutEffect é síncrono e useEffect é assíncrono.

A segunda diferença é o momento em que eles são executados, enquanto useEffect é executado após todos os componentes serem pintados na tela, useLayoutEffect é executado antes.

Estrutura: 

```javascript
useLayoutEffect(() => {
  // código a ser executado
}, [/* array de dependências*/])
```

Vamos fazer um exemplo bem simples, sem seu App.js coloque o código:

```javascript
import { useState, useEffect, useLayoutEffect } from "react";
import "./styles.css";

function App() {
  const [count, setCount] = useState(0);

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect executado!");
  });

  return (
    <div className="App">
      <h1>{count}</h1>
      <h2>
        <button onClick={() => setCount((count) => count + 1)}>
          Update Count
        </button>
      </h2>
    </div>
  );
}

export default App;

```

No styles.css coloque:

```css
body {
  background: #2980b9;
  color: #fff;
}

h1 {
  font-size: 10rem;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

```

Execute e veja no console. useLayoutEffect é executado primeiro, antes do useEffect, independente da ordem que você coloque ele no seu código.

Clique no botão Update Count e verá o console sendo apresentado novamente.

O hook useLayoutEffect tem pouco uso no dia a dia, alguns de seus usos seria modificações no DOM, alteração do título da página ou até mesmo iniciar algumas animações caso o uso do useEffect não parece fluida para esse fim.

> Não use useLayoutEffect para chamadas a API ou executar funções caras ou demoradas. Lembre-se que ele é síncrono e pode travar a pintura da sua aplicação, pois ela só será pintada após o fim da execução.

Como usar o hook useLayoutEffect e suas diferenças useEffect

useLayoutEffect

O hook useMemo é usado para agrupar funções dentro de um componente. Podemos utiliza-lo para garantir que valores dentro dessas funções só sejam recalculados se uma de suas props mudar, props essas que ficam no array de dependências.

Aquele disclaimer básico:

> É um hook que tem um "custo" para ser usado.

Estrutura:

```javascript
const valorMemoizado = useMemo(() => {
    return /* retorne algo a ser armazenado em `valorMemoizado` */
  }, [/* array de dependências */],
);
```

Vou usar um exemplo um pouco mais complexo que os anteriores, mas bem legal para entender o uso do useMemo e suas diferenças com memo.

## Exemplo

Utilizei um exemplo que cria uma aplicação em que você seleciona um tipo de queijo e ela mostra qual tipo de vinho combina mais. 

Para este exemplo estou utilizando tailwindcss na versão 2.0.2. Leia mais em: <https://v2.tailwindcss.com/docs>

Crie um componente principal, pode ser em seu App.js com o código:

```javascript
import { useState, useEffect, useRef, useMemo } from 'react';
import constants from '../utils';
import Counts from './counts';
import Button from './button';
import MemoizedCounts from './react-memo-counts';
import UseMemoCounts from './use-memo-counts';
const { MOZARELLA, CHEDDAR, PARMESAN, CABERNET, CHARDONAY, MERLOT } = constants;

export default function ParentComponent({
  title,
  withoutMemo = false,
  withReactMemo = false,
  withUseMemo = false,
}) {
  const [cheeseType, setCheeseType] = useState('');
  const [wine, setWine] = useState('');
  const [times, setTimes] = useState(0);
  const useMemoRef = useRef(0);

  const incrementUseMemoRef = () => useMemoRef.current++;

  // const memoizedValue = useMemoRef.current++;
  const memoizedValue = useMemo(() => incrementUseMemoRef(), [times]);

  const whichWineGoesBest = () => {
    switch (cheeseType) {
      case MOZARELLA:
        return setWine(CABERNET);
      case CHEDDAR:
        return setWine(CHARDONAY);
      case PARMESAN:
        return setWine(MERLOT);
      default:
        CHARDONAY;
    }
  };

  useEffect(() => {
    let mounted = true;

    if (mounted) {
      whichWineGoesBest();
    }

    return () => (mounted = false);
  }, [cheeseType]);

  return (
    <div className="flex flex-col justify-center items-center border-2 rounded-md mt-5 dark:border-yellow-200 max-w-lg m-auto pb-10 bg-gray-900">
      <h3 className="text-center mt-10 text-gray-400 text-opacity-100">
        {title}
      </h3>
      <h1 className="font-semibold text-2xl text-white max-w-md text-center">
        Selecione um queijo e diremos qual vinho combina melhor!
      </h1>
      <div className="flex flex-col gap-4 mt-10">
        <Button text={MOZARELLA} onClick={() => setCheeseType(MOZARELLA)} />
        <Button text={CHEDDAR} onClick={() => setCheeseType(CHEDDAR)} />
        <Button text={PARMESAN} onClick={() => setCheeseType(PARMESAN)} />
      </div>
      {cheeseType && (
        <p className="mt-5 text-green-400 font-semibold">
          Para {cheeseType}, <span className="text-yellow-500">{wine}</span> é a
          melhor escolha!
        </p>
      )}

      {/* Without React Memo */}
      {withoutMemo && <Counts />}

      {/* With React.memo() */}
      {withReactMemo && <MemoizedCounts />}

      {/* With useMemo() */}
      {withUseMemo && (
        <div className="mt-10 text-center">
          <button
            className="bg-indigo-200 hover:bg-indigo-300 py-2 px-10 rounded-md"
            onClick={() => setTimes(times + 1)}
          >
            Forçar renderização
          </button>
          <UseMemoCounts memoizedValue={memoizedValue} />
        </div>
      )}
    </div>
  );
}
```

Depois crie uma pasta com nome utils e dentro crie um index.js com o código:

```javascript
export default {
  MOZARELLA: 'Mozarella',
  CHEDDAR: 'Cheddar',
  PARMESAN: 'Parmesão',
  CHARDONAY: 'Chardonay',
  MERLOT: 'Merlot',
  CABERNET: 'Cabernet Sauvignon',
};
```

Depois, na mesma pasta que seu App, crie o counts.js com o código:

```javascript
import { useRef } from 'react';

export default function Counts() {
  const renderCount = useRef(0);

  return (
    <div className="mt-10">
      <p className="text-white">
        Nada mudou aqui, mas eu renderizei:{' '}
        <span className="text-green-300 text-grey-900">
          {renderCount.current++} vezes
        </span>
      </p>
    </div>
  );
}
```

Agora vamos criar o button.js: 

```javascript
export default function Button({ onClick, text }) {
  return (
    <button
      className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
      onClick={onClick}
    >
      {text}
    </button>
  );
}
```

Agora crie um novo componente, react-memo-counts.js:

```javascript
import { useRef, memo } from 'react';

function Counts() {
  const renderCount = useRef(0);

  return (
    <div className="mt-10">
      <p className="text-white">
        Nada mudou aqui, mas eu renderizei:{' '}
        <span className="text-green-300 text-grey-900">
          {renderCount.current++} vezes
        </span>
      </p>
    </div>
  );
}

export default memo(Counts);
```

Agora o último componente, use-memo-counts.js:

```javascript
function UseMemoCounts({ memoizedValue }) {
  return (
    <div className="mt-3">
      <div className="max-w-md mb-5">
        <p className="text-white">
          Só vou renderizar novamente quando você clicar em{' '}
        </p>
        <span className="font-bold text-indigo-400">Forçar renderização.</span>
      </div>
      <p className="text-white">
        Eu renderizei:{' '}
        <span className="text-green-400">{memoizedValue} vezes</span>{' '}
      </p>
    </div>
  );
}

export default UseMemoCounts;
```

Tudo criado, vamos a execução! 

Se você criou este exemplo com React puro, execute `npm start`

Se você usou NextJS, execute `npm run dev`

Temos agora nossa página mostrando 3 cards.

![useMemo Exemplo Card 1](/assets/img/usememo-1.png "useMemo Exemplo Card 1")

![useMemo Exemplo Card 2](/assets/img/usememo-2.png "useMemo Exemplo Card 2")

![useMemo Exemplo Card 3](/assets/img/usememo-3.png "useMemo Exemplo Card 3")

No primeiro card **Sem memo() ou useMemo()**, temos tudo sendo renderizado novamente a cada click.

No segundo card **Com memo()**, temos o uso do memo, embrulhando todo o componente.

No terceiro card **Com useMemo()**, temos o uso do useMemo na prop **memoizedValue**.

Muito bem, feito isso, isso é um exemplo, componentes e funções simples como essas não necessitam deste tipo de otimização. Lembra do custo?

> O uso de memo ou useMemo tem um custo, esse custo é a comparação entre o componente atual e o novo ou, props atuais e novas.

## Diferenças entre memo, useMemo e useCallback

É muito fácil ficar confuso com isso, eu mesmo fiquei e demorei um certo tempo para entender o uso de cada um deles.

* **memo**: É um componente de ordem superior que podemos usar para agrupar componentes que não queremos renderizar novamente, a menos que as props dentro deles mudem.
* **useMemo**: É um React Hook que podemos usar para agrupar funções dentro de um componente. Podemos usar isso para garantir que os valores dentro dessa função sejam recalculados somente quando uma de suas dependências for alterada. É executada na primeira renderização, não armazena a função, somente o retorno.
* **useCallback**: Mantem a referência de uma função. Usamos quando tempos funções pesadas sendo recriadas em memória desnecessariamente. Armazena a função. Interessante ser utilizado em todas as funções internas de um Context API. Não é executado na renderização, somente em callback, tipo onClick ou useEffect.

Usei como referencia a publicação: <https://blog.logrocket.com/react-memo-vs-usememo/>

Como usar o hook useMemo e suas diferenças entre memo e useCallback

useMemo

O higher order component memo é muito útil quando estamos trabalhando com componentes pesados e demoram  um certo tempo para ser renderizado, causando um problema de usabilidade.

> Precisar ser usado com cautela, por que é uma das funções do React que tem um "custo" para ser usado.

Imagine que nos temos um componente principal que possui vários state e vários componentes.

```javascript
import { useState } from 'react';

function App() {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);
  const [state3, setState3] = useState(0);
  const [state4, setState4] = useState(0);
  const [state5, setState5] = useState(0);

  return (
    <div className="App">
      <Componente1 props={state1} functHandler={setState1}/>
      <Componente2 props={state2} functHandler={setState2}/>
      <Componente3 props={state3} functHandler={setState3}/>
      <Componente4 props={state4} functHandler={setState4}/>
      <Componente5 props={state5} functHandler={setState5}/>
    </div>
  );
}

export default App;
```

Toda vez que você alterar qualquer state, todos os outros componentes mesmos os que não sofreram alteração no seu state será renderizado novamente. E tudo bem! Sim, tudo bem! Se isso não estiver gerando nenhuma demora na apresentação dos seus componentes, tudo bem!

Agora, talvez existam momentos que tenhamos componentes muito pesados que gerem alguma demora na renderização e o state dele não esta sendo alterado, ai sim, é interessante o uso do memo, veja o exemplo.

No nosso arquivo principal App.js temos:

```javascript
import { useState } from 'react';
import SkillList from './components/SkillList';
import Counter from './components/Counter';

function App() {
  const [skill, setSkill] = useState('');
  const [skills, setSkills] = useState(['HTML', 'CSS', 'JavaScript']);
  const [count, setCount] = useState(0);

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill));
  }

  return (
    <div className="App">
      <input onChange={handleChangeInput} />
      <button onClick={handleAddSkill}>Add Skill</button>
      <SkillList skills={skills} />

      <hr />

      <Counter count={count} setCount={setCount} />
    </div>
  );
}

export default App;
```

Em src crie uma pasta componentes, dentro da pasta components crie o arquivo SkillList.jsx.

```javascript
import { memo } from 'react';

const SkillList = memo(({ skills }) => {
  console.log('SkillList renderizou!');

  return (
    <ul>
      {skills.map((skill, i) => (
        <li key={i}>{skill}</li>
      ))}
    </ul>
  );
});

export default SkillList;
```

Dentro da pasta components crie tambem o arquivo Counter.jsx.

```javascript
function Counter({ count, setCount }) {
  console.log('Counter renderizou!');

  return (
    <>
      <h4>{count}</h4>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </>
  );
}

export default Counter;
```

Temos o resultado na imagem:

![memo Exemplo 1](/assets/img/memo-1.png "memo Exemplo 1")

Perceba no código, nosso componente SkillList esta utilizando memo, o componente Counter não.

Ao executar nossa aplicação pela primeira vez, os 2 são renderizados.

Agora clique no botão Incrementar alguma vezes e veja, o componente Counter é renderizado novamente toda vez que o contador é incrementado.

![memo Exemplo 2](/assets/img/usestate-2.png "memo Exemplo 2")

Percebeu que o componente SkillList não sofreu nova renderização? Pois é, esse é o uso do memo! O React verifica se as props que o componente recebe foram alteradas, se sim, renderiza novamente, se não, mantem o que está em memória. Lembra que falei sobre "custo"? 

> O React precisa verificar e fazer a comparação entre as props que estão em memória e as novas, esse processo de comparação é o custo.

Já o componente Counter sofrera nova renderização de qualquer forma, mesmo o state ou props que ele recebe não sejam alteradas.

![memo Exemplo 3](/assets/img/memo-3.png "memo Exemplo 3")

> Quando for necessário utilizar memo, faça testes, veja o que fica menos "pesado".

Para entender melhor o uso do memo retire-o do componente e faça um teste, clique no botão Incrementar.

Como utilizar o higher order component memo

memo

O hook useCallback é um pouco complexo de explicar, vou tentar simplificar ao máximo para ser didático. 

Imagine um componente que possui uma função em seu interior e uma nova renderização é realizada, essa função é recriada em memoria.

Funciona de maneira semelhando ao memo, por isso fica aqui um disclaimer semelhante.

> Precisa ser usado com cautela, por que é um hook do React que tem um "custo" para ser usado.

Ele é mais comumente usado para **manter a referência de uma função**.

Quando colocamos alguma função dentro de useCallback o React entendera que não é para recriar esta função em memória e que vamos utilizar a mesma criada anteriormente.

O Javascript compara as coisas *de uma forma estranha*... Mas é muito importante entender como essa comparação (*muito estranha*) acontece. Veja o exemplo abaixo:

```javascript
1 === 1; // true;
"ReactJS" === "ReactJS"; // true;
false === false; // true;

{} === {}; // false;
[] === []; // false;
() => {} === () => {}; //false;
```

Nas linhas 5, 6 e 7 todos os exemplos estão retornando false, porque? Por que o Javascript não compara objeto com objeto, array com array, ele compara as referencias de memória. Na linha 5 o segundo objeto não tem a mesma referencia de memória que o primeiro objeto.

Vamos a estrutura. O useCallback recebe como argumentos, uma função e um array de dependências.

```javascript
const minhaFuncao = useCallback(() => {
  // corpo da função
}, [])
```

Vamos ao código de exemplo:

```javascript
import { useState, useCallback } from 'react';

const functionsAPP = new Set();

function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  const incrementCounterOne = () => {
    setCountOne(countOne + 1);
  };
  
  const decrementCounterOne = () => {
    setCountOne(countOne - 1);
  };

  const incrementCounterTwo = () => {
    setCountTwo(countTwo + 1);
  };
  
  const decrementCounterTwo = () => {
    setCountTwo(countTwo - 1);
  };

  functionsAPP.add(incrementCounterOne);
  functionsAPP.add(decrementCounterOne);
  functionsAPP.add(incrementCounterTwo);
  functionsAPP.add(decrementCounterTwo);

  alert(`Funções do App: ${functionsAPP.size}`);

  return (
    <>
      Counter One: {countOne}
      <button onClick={incrementCounterOne}>+</button>
      <button onClick={decrementCounterOne}>-</button>
      <hr />
      Counter Two: {countTwo}
      <button onClick={incrementCounterTwo}>+</button>
      <button onClick={decrementCounterTwo}>-</button>
    </>
  );
}

export default App;
```

Neste exemplo estou utilizando new Set() que nos permite adicionar somente elementos únicos. Leia mais em: <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set>

Estou criando 2 contadores, cada um usando suas funções de incremento e decremento.

Ao executar esse código você receberá 2 alerts.

![useCallback exemplo 1](/assets/img/usecallback-1.png "useCallback exemplo 1")

![useCallback exemplo 2](/assets/img/usecallback-2.png "useCallback exemplo 2")

Ou seja, temos 8 funções criadas nesta primeira renderização.

Agora clique 1x em cada um dos botões de incrementar dos componentes e veja a quantidade de funções criadas. São um total de 24.

No nosso dia a dia de trabalho isso não chega a ser um problema por que as funções são leves, mas em determinado momento teremos funções complexas, pesadas, que processam suas props recebidas e podem levar algum tempo para processar atrasando as renderizações e a apresentação da nossa UI.

E se tivéssemos uma forma de recriar somente a função que recebeu uma prop diferente? Esse é o uso do useCallback.

Agora vamos adicionar o hook useCallback em nossas funções.

```javascript
import { useState, useCallback } from 'react';

const functionsAPP = new Set();

function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  const incrementCounterOne = useCallback(() => {
    setCountOne(countOne + 1);
  }, [countOne]);

  const decrementCounterOne = useCallback(() => {
    setCountOne(countOne - 1);
  }, [countOne]);

  const incrementCounterTwo = useCallback(() => {
    setCountTwo(countTwo + 1);
  }, [countTwo]);

  const decrementCounterTwo = useCallback(() => {
    setCountTwo(countTwo - 1);
  }, [countTwo]);

  functionsAPP.add(incrementCounterOne);
  functionsAPP.add(decrementCounterOne);
  functionsAPP.add(incrementCounterTwo);
  functionsAPP.add(decrementCounterTwo);

  alert(`Funções do App: ${functionsAPP.size}`);

  return (
    <>
      Counter One: {countOne}
      <button onClick={incrementCounterOne}>+</button>
      <button onClick={decrementCounterOne}>-</button>
      <hr />
      Counter Two: {countTwo}
      <button onClick={incrementCounterTwo}>+</button>
      <button onClick={decrementCounterTwo}>-</button>
    </>
  );
}

export default App;
```

Na primeira renderização temos o segundo alert mostrando 8 funções criadas, clicando 1x em cada botão incrementar e teremos o segundo alert mostrando 16, o que já é um avanço, menos funções recriadas em memória.

Agora somente a função que receber uma prop nova diferente da atual será recriada, as demais não, já que o React faz a comparação entre as props.

Por fim, lembra do "custo"? Pois é, useCallback tem um custo para ser usado, esse custo é comparação das props.

> Quando for necessário utilizar useCallback, faça testes, veja o que fica menos "pesado".

useCallback

Esse hook é o segundo hook mais usado do React e é importante que você saiba como e por que utiliza-lo.

É mais comumente usado para realizar chamadas a API. 

Ele é sempre executado depois que todo o JSX do nosso componente é renderizado, sendo assim, a montagem do nosso código na tela fica mais rápida já que estamos separando ele em 2 partes, a primeira é a montagem de todo o componente e a segunda é a chamada a API.

A estrutura dele é essa:

```javascript
useEffect(() => {
    
}, []);
```

A declaração do useEffect, ele recebe uma função e possui um array de dependências. 

Vamos ao exemplo:

```javascript
import { useState, useEffect } from 'react';

function App() {
  const [digimons, setDigimons] = useState([]);

  useEffect(() => {
    fetch('https://digimon-api.herokuapp.com/api/digimon')
      .then((response) => response.json())
      .then((data) => setDigimons(data));
  }, []);

  return (
    <div className="App">
      <h4>Digimons</h4>

      <ul>
        {digimons.map((digimon) => (
          <li key={digimon.name}>
            <img src={digimon.img} alt={digimon.name} />
            {digimon.name} - {digimon.level}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

![useEffect Exemplo 1](/assets/img/useeffect-1.png "useEffect Exemplo 1")

Estamos utilizando a Digimon API (leia mais em: <https://digimon-api.vercel.app/>). Sempre utilizo ela como exemplo pela simplicidade.

Veja que dentro do useEffect estamos fazendo uma chamada a api, convertendo o retorno e jogando para o state.

E dentro do retorno da nossa função principal APP estou criando uma limpa, percorrendo o array que esta no state digimons e criando um list item para cada objeto do array.

useEffect

Comecei com a saga de passar por todos os Hooks do React, por que sempre no meio do trabalho me deparo com situações que penso: -Pera... Não tem um Hook que faz mais ou menos isso?

Pois é! Agora revolvi pegar um tempo, estudar todos, tê-los em mente e usar quando necessário.

Vou começar com useRef, e citar alguns "bons" exemplos.

useRef é usado para manter a referência de um objeto e podendo usar as propriedades que essa referência mantem. Veja o exemplo:

![useRef Exemplo 1](/assets/img/useref-1.png "useRef Exemplo 1")

Temos um componente simples com um input e um botão.

Como faríamos para, ao clicar no botão dar foco no input? Usando useRef.

```javascript
import { useRef } from 'react';

function App() {
  const inputRef = useRef();
  
  const handleClick = () => inputRef.current.focus();
  
  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Foco</button>
    </>
  );
}
export default App;
```

Outro exemplo é para substituir um state.

Já parou para pensar que componentes como input não necessitam de um estado para armazenar seu valor?

Já parou para pensar que se tivermos um formulário complexo, cada componente ligado a seu state, a cada vez que você digita algo seu state recebe um novo valor e tudo dentro daquele formulário é renderizado novamente e desnecessariamente? Pois é... Veja neste exemplo como evitar isso.

```javascript
import { useState, useRef } from 'react';

function App() {
  const inputRef = useRef();
  const [value, setValue] = useState('');
  
  const handleClick = () => setValue(inputRef.current.value);
  
  console.log('renderizou!');
  
  return (
    <>
      <h4>Valor: {value}</h4>
      <input ref={inputRef} />
      <button onClick={handleClick}>Clique</button>
    </>
  );
}
export default App;
```

![useRef Exemplo 2](/assets/img/useref-2.png "useRef Exemplo 2")

Temos um componente simples com um texto "Valor", um input e um botão. Ao digitar algo no input nenhuma nova renderização é feita pois o input não está direcionando seu value para um state, e ao clicar no botão o state do componente "Valor" recebe o value do input que estava armazenado em inputRef. Aí claro, uma nova renderização é realizada pois alteramos um estado, o do "Valor", mas não precisamos de estado para o input.

![useRef Exemplo 2 finalizado](/assets/img/useref-3.png "useRef Exemplo 2 finalizado")

useRef

Esse hook é o mais usado do React e é importante que você saiba como e por que utiliza-lo.

Vamos a uma explicação muito simples. Um state armazena um valor, um objeto, um array, qualquer tipo de dado, sempre que é alterado gera uma nova renderização. 

![useState Exemplo 1](/assets/img/usestate-1.png "useState Exemplo 1")

```javascript
import { useState } from 'react';

function App() {
  const [value, setValue] = useState('Valor inicial');
  
  console.log('renderizou!');
  
  return (
    <div className="App">
      <h4>{value}</h4>
      <button onClick={() => setValue('Novo valor')}>Alterar</button>
    </div>
  );
}
export default App;
```

Se você for iniciante, primeiramente, mantenha a calma, vou te explicar linha por linha!

Linha 1: Estamos importando o hook useState do React.

Linha 3: Declaramos nossa função principal.

Linha 4: O useState nos fornece 2 posições de 1 array, sendo eles, a primeira posição é nosso state que armazena um valor, segunda posição é a função que altera esse valor. Caso você queira iniciar esse state com um valor, podemos passar para o hook assim: useState('Valor inicial').

Linha 6: Coloquei no exemplo pra você perceber sempre que houver uma renderização.

Linha 8: Estamos retornando um JSX

Linha 10: Aqui estamos mostrando nosso state value.

Linha 11: Estamos inserindo um botão com a função que vai alterar nosso state. A função onClick esta executando uma função anônima que vai executar setValue. Essa função anônima é usado por que se colocarmos nosso setValue direto no onClick ela será executada assim que nosso app renderizar, e não é o que nos queremos, queremos que setValue seja executado somente no click do botão. 

![useState Exemplo 2](/assets/img/usestate-2.png "useState Exemplo 2")

Percebeu que ao clicar no botão o valor foi alterado e nosso app renderizou novamente? Pois é. Agora vou aprendeu como utilizar useState!

useState

## Combinador Descendente

Seleciona todos os elementos input que são filhos de um form

```css
form input {
  color: blue;
}
```



## Combinador Filho Direto / Descendente Direto

Seleciona o input somente se ele for um filho de form, não funciona para netos ou outros.

```css
form > input {
  color: blue;
}
```



## Combinador Irmão Adjacente

Seleciona o primeiro irmão encontrado de form, nesse caso somente a primeira div encontrada logo apos form será selecionada

```css
form + div {
  color: blue;
}
```



## Combinador Irmão Geral

Todos os irmão de form, ou seja, todas as divs que venham depois de form.

```css
form ~ div {
  color: blue;
}
```

Combinando Seletores

Vira e mexe eu ainda tenho que buscar nas minhas anotações de blocos de nota sobre alguma coisas de CSS.

Então, hoje começa a brincadeira de escrever posts. Sem mais, bora lá!



## Seletor Universal

Meio obvio né, nem precisa de muita explicação, esse cara seleciona tudo.

```css
* {
  background: black;
}
```



## `Seletor de Elemento`

Seleciona elementos HTML, body, input, h1, a, p e etc..

```css
body {
  background: black;
}
```



## Seletor de Classe

Vc quer explicação? Sério mesmo?!

```css
.fundo-preto {
  background: black;
}
```



## Seletor por ID

Seleciona o ID que vc colocar no elemento.

```css
#nome {
  background: black;
}
```



## Seletor por Atributo

É possível selecionar por atributo, veja alguns exemplos:

```css
[type="text"] {
  background: black;
}

a[href="http://site.com"] {
  color: green;
}

input[type="radio"]:checked {
 border: 1px solid red;
}
```



## Seletor de Pseudos

Seleciona as pseudo classes dos elementos.

```css
a:hover {
  color: red;
}

a:visited {
  color: green;
}

input:checked {
  border: 1px solid blue;
}
```



Vou adicionando mais coisas aos poucos.

Universal, Elemento, Classe, ID, Atributo, Pseudo elemento

Bruno ArdelSoftware Engineer

# CSS

Combinando Seletores

Usar mais de 1 seletor CSS

Seletores

Universal, Elemento, Classe, ID, Atributo, Pseudo elemento