Programação-----------------------------------------------------

useReducer()

useReducer é um React Hook que permite adicionar um redutor ao seu componente.

Chame useReducero nível superior do seu componente para gerenciar seu estado com um
redutor.

EX:

import { useReducer } from 'react';

function x(state, action) {

// ...
}

function MyComponent() {
const [state, dispatch] = useReducer(x, y);
// ...

x: a função redutora que especifica como o estado é atualizado. Deve ser puro, deve
tomar o estado e a ação como argumentos e deve retornar o próximo estado. Estado e
ação podem ser de qualquer tipo.

y: O valor a partir do qual o estado inicial é calculado. Pode ser um valor de

qualquer tipo. Como o estado inicial é calculado depende do próximo initargumento.

A dispatch function que permite atualizar o estado para um valor diferente e

acionar uma nova renderização.

EX:
const [state, dispatch] = useReducer(reducer, { age: 42 });

function handleClick() {
dispatch({ type: 'incremented_age' });
// ...

O estado atual desta variável de estado, inicialmente definido para o estado

inicial que você forneceu.

A sessionStorage (como o nome sugere) está disponível apenas durante a sessão do

navegador (e é excluída quando a guia ou janela é fechada) - mas sobrevive, no
entanto, a atualização das páginas.
HTTP x HTTPS

a resposta DE uma API a uma requisição volta passando por servidores no meio antes
de chegar até nosso navegador. O problema é que, quando usamos HTTP, qualquer
servidor no meio pode espionar os dados enviados, algo totalmente inseguro!

Para estes outros cenários, existe o HTTPS, que basicamente é o HTTP comum, porém
com uma camada adicional de segurança/criptografia

GraphQL

Apontamos como vantagem do uso do GraphQL o retorno exato dos campos solicitados.
Sem precisar ficar fazendo um monte de requisições na api desnecessariamente e
deixando pesado pro usuario, principalmente se tiver uma internet fraca.
Requisições feitas pelo GraphQL será do tipo POST.

EX:
const OBTER_LIVROS = gql`
query ObterLivros {
livros {
id
slug
titulo
imagemCapa
opcoesCompra {
id
preco
}
}
}
`

Então quando essa parte do projeto for fazer uma requisição vai buscar apenas esses
itens.
Isso torna o GraphQL ideal para aplicações que precisam de uma grande variedade de
dados em diferentes formatos ou que precisam atualizar regularmente suas consultas
de dados.
Também é do GraphQL/Apollo Client

mutation AdicionarItem($item: ItemCarrinhoInput!) {

adicionarItem(item: $item)
}

As mutações são operações que alteram os dados no backend, como criar, atualizar ou
deletar um registro. No Apollo Client, nós usamos a função mutate para disparar uma
mutação e atualizar os dados da aplicação.
Mas e se a mutação que você disparou afetar os dados de outras consultas que já
foram realizadas na aplicação? É aí que entra o refetchQueries, que é uma opção que
nos permite passar para a chamada da função mutate e dizer para o Apollo Client
refazer as consultas especificadas após a mutação ser concluída. Dessa forma, os
dados das outras consultas são atualizados automaticamente com os novos dados do
backend.

No Apollo Client, existem algumas opções podem ser usadas para melhorar a
performance da sua aplicação.

-suspend: A opção suspend permite que a consulta seja suspensa até que uma
determinada condição seja atendida. Isso é útil em casos em que a consulta só
precisa ser executada quando um determinado dado estiver disponível, como por
exemplo, quando o usuário estiver autenticado ou quando um filtro for aplicado.

Exemplo:
const { data, error, loading, refetch } = useQuery(OBTER_POSTS, {
variables: {
usuarioId: usuarioLogadoId,
},
suspend: !usuarioLogadoId
});

-skip: A opção skip permite que a consulta seja pulada completamente se uma
determinada condição for atendida. Isso é útil em casos em que a consulta só deve
ser executada em determinadas condições, como por exemplo, quando o usuário estiver
autenticado ou quando um filtro for aplicado.

Exemplo:
const { data, error, loading, refetch } = useQuery(OBTER_POSTS, {
variables: {
usuarioId: usuarioLogadoId
},
skip: !usuarioLogadoId
});

fetchPolicy: A opção fetchPolicy permite que você escolha como a consulta deve ser
executada e quando os dados devem ser atualizados. As opções disponíveis são cache-
first, cache-and-network, network-only e cache-only.

Exemplo:
const { data, error, loading, refetch } = useQuery(OBTER_POSTS, {
variables: {
usuarioId: usuarioLogadoId
},
fetchPolicy: 'cache-and-network'
});

GraphQL Lazy

O useLazyQuery é um hook que permite que você execute consultas de só quando são
realmente necessárias. Isso é útil em aplicações que possuem muitos dados ou
consultas que só são executadas em determinadas condições, pois evita o
carregamento desnecessário de dados e consultas.

Mas afinal, qual a diferença entre o useLazyQuery e o useQuery? Bem, a principal

diferença é que o useLazyQuery só executa a consulta quando é chamado
explicitamente, enquanto o useQuery executa a consulta assim que é definido.

UseEffect(() => {
fetch('[Link]
.then(...........)
}, [])

O use UseEffect realizar o codigo dentro dele sempre que o componente é

renderizado, no caso vai fazer uma requisição na api, onde a api vai ser do link
dentro do fetch, e então vai fazer o que está dentro do .then

,[] vai fazer que execute o código apenas na primeira vez que o conponente for
renderizado
mas também posso colocar algo nesse array de dependencia e sempre que esse algo
renderizar irá executar o código (Ex: , [busca])
Node

Para executar algo no node faz isso no terminal:

node [Link]

isso vai executar apenas no terminal

Coerção de Tipos em JavaScript

A coerção de tipos em JavaScript refere-se à conversão automática e implícita de um

tipo de dado para outro durante operações.

Conversão de Tipos em JavaScript

A conversão de tipos é a transformação explícita de um tipo de dado em outro.

Explícito, pois é no código que o programador difine essa conversão de tipos.

Symbol

O tipo Symbol é um tipo que representa um identificador único e imutável. Símbolos

são frequentemente utilizados para criar propriedades de objeto que são únicas e
não interferem com outras propriedades existentes.
Essa característica evita conflitos com outras chaves, prevenindo a sobrescrita
acidental de propriedades.
Spread Operator (os ... dentro do array)

Assim, o spread operator pega todos os valores e, literalmente, abre o array e

espalha seu conteúdo. O que ocorre é a criação de um array, onde os valores da
variável notas são espalhados dentro desse array, e em seguida, adicionamos mais um
valor.

const notas = [7,7,8,9];

const novaListaNotas = […notas];

i++
O operador i++ é conhecido como pós-incremento. Ele primeiro retorna o valor atual
de i e depois incrementa i em 1 unidade. Ou seja, o valor atual de i é usado na
expressão em que i++ está presente, e após isso, i é aumentado em 1.

Exemplo:
let i = 5;
[Link](i++); // Saída: 5 (retorna o valor atual de i)
[Link](i); // Saída: 6 (i foi incrementado após a execução)

++i
O operador ++i é conhecido como pré-incremento. Ele primeiro incrementa i em 1
unidade e depois retorna o novo valor de i. Ou seja, o valor de i é incrementado
imediatamente, e então o valor atualizado é usado na expressão em que ++i está
presente.

Exemplo:
let j = 8;
[Link](++j); // Saída: 9 (j foi incrementado antes de ser usado)
[Link](j); // Saída: 9 (j já foi incrementado)
Set

O objeto Set permite que você armazene valores únicos de qualquer tipo, desde
valores primitivos a referências a objetos.

Ou seja, irá pegar de um array ou outro lugar apenas os valores unicos, e se um

repetir não irá aparecer. E retorna um conjunto "array like", que parece um array
mas não tem acesso aos metodos de array

Exemplo:
const nomes = ["Ana", "Clara", "Maria", "Maria", "João", "João", "João"];

const listaNomesAtualizados = new Set(nomes)

[Link](listaNomesAtualizados);
// aparece no console: [ 'Ana', 'Clara', 'Maria', 'João' ]