🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶

State:

Sempre use updatingFunction dentro de um setState, não a própria variável. Sem ele,
a execução de um setNumber(number + 1) com number = 2 dentro de um setinterval vai
sempre resultar em 3, porque ele salva o estado de number como 2 e reusa esse valor
sempre. setNumber(prev=>prev + 1) funciona como deve.

Usar reducer para lidar com múltiplas funções que manuseiam um state, ou um state
que precisa manusear vários tipos de inputs diferentes de um form.

Usar state de objeto com keys sendo cada input de um form. Atualizar quer dizer uma
função handleChange, que dentro, usa um spread operator junto de "[e.target.name]:
e.target.value"

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
Effect:

Você pode usar primitivos de objetos na dependencyList [todo.name, todo.completed]

UseMemo é simples de usar, você coloca seu retorno na dependencyList, e o conteúdo

do useMemo que vai ditar o que vai ser atualizado, com valores memoizados
(pesquisar). Use quando tiver useEffects envolvendo tipos não primitivos

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
MAPS: duas perguntas

Quando usar?
Use sempre que quiser seu objeto iterable.
Keys as strings ou Keys as objects?
Se seu mapa é derivado de outros dados e eles podem ser úteis, Keys as Objects,
senão Keys as Strings

Keys as objects: use num mapa que usa dados de outra base de dados (objeto, outro
mapa, etc)

Exemplo:
let john = {name: john doe}: Pessoa,
jane = {name: jane doe}: Pessoa,
phill = {name: phill dunphy}: Pessoa,

const funcionarios = new Map([

john: "editor",
jane: "admin",
phill: "salesman"
])

Dessa forma, podemos usar funcionarios.keys() para iterar pelos nomes completos de
todos os funcionários, pois as keys são objetos do tipo Pessoa

Vantagens de Maps:
Suas funções para get, set e outros já fazem error handling retornando undefined,
null, etc, evitando erros como "tentei acessar prop que não existe"

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
Component Creation:
Usar forwardRef function no componente para permitir refs
Usar const invés de function para permitir forwardRef
Usar export default no fim do documento sempre
 Usar ...rest nos seus componentes sempre
...rest e ref={ref} são sempre os dois primeiros argumentos do wrapper
Ex:
const Componente = forwardRef((props, ref) => {<div {...rest}
ref={ref}>A</div>})

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
Styled Components:
Sempre importar * as S from "./styles", assim componentes estilizados tem nomes
padrão
Sempre chamar componente pai do componente de Wrapper

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
Typescript:
Sempre que criar uma interface de Props, estenda tag HTML que o componente
deveria ser
Ex: Componente Button.
interface ButtonProps extends ButtonHTMLProps<HTMLButtonElement> {}
Ex: Componente com div Wrapper (divs são um pouco diferentes)
interface DivProps extends HTMLAttributes<HTMLDivElement> {}

🔶🔷🔶🔶🔷🔶🔶🔷🔶🔶🔷🔶
Lista de coisas pra aprender:

- Typescript
- Jest
- Immer
- MUI (fora do trabalho)
- React Reducer, Memo, Callback
- Service Workers e MultiThread JS
- Gang of Four Design Patterns
- Ler o livro e pensar em exemplos próprios pra React
- Clean Code uncle bob

---
Afazeres:
- instalar todas as libs ✅
- arrumar i18n (arrumar configs, criar arquivos json de tradução para br e english
na i18n folder) ✅
- configurar testes ✅
- configurar themes para ficar mais organizado ✅
- mudar variáveis dos themes (fazer seu próprio guia de estilo). ✅
- Pesquisar sobre se dá pra pegar o do MUI e colocar no Styled Components ✅
- buscar css resets ✅
- colocar certos default values, como fonte padrão (ver se conflita com MUI) ✅
- configurar mui e mui themes (tomar to-do list como base) ✅
- mudar o que for necessário da implementação com Styled Components ✅
- escrever generic custom hook ✅
- escrever generic context (tomar creaturesContext da todolist, diminuir e aplicar
padrões do sundaes)
- pensar em como organizar jsons do i18n (generic identity communications, and
specific per page/component)

- fazer playlist de músicas HYPE pra ficar pilhadão. pegar de vários lugares
- Guilty Gear
- Megaman
- preferivelmente com letra