https://github.com/natanaeldeveloper/react-hooks-guide
Introdução as Hooks memo, useMemo e useCallback utilizadas para performance no React
https://github.com/natanaeldeveloper/react-hooks-guide
hooks hooks-api-react javascript performace react react-ts reactjs
Last synced: 8 months ago
JSON representation
Introdução as Hooks memo, useMemo e useCallback utilizadas para performance no React
- Host: GitHub
- URL: https://github.com/natanaeldeveloper/react-hooks-guide
- Owner: natanaeldeveloper
- Created: 2022-04-03T01:49:41.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-04T16:52:02.000Z (almost 3 years ago)
- Last Synced: 2025-02-25T07:32:38.866Z (about 1 year ago)
- Topics: hooks, hooks-api-react, javascript, performace, react, react-ts, reactjs
- Language: TypeScript
- Homepage:
- Size: 176 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HookCallback
## Objetivo do projeto
Exemplificar o uso de algumas hooks como: `memo`, `useMemo` e `useCallback` disponibilizadas apartir do `React@1.16`
## Funcionalidades
### `memo`
* Retorna um component *memorizado* (re-renderizado apenas quando necessário)
* Evita que o component entre no fluxo de renderização do React. É utilizado quando:
* É um componente funcional puro
* É um componente renderizado com muita frequência
* Suas propriedades não mudam a cada renderização
### `useMemo`
* Retorna um valor *memorizado* (re-renderizado apenas quando necessário)
* Executado durante a renderização
* Mantem *integridade referencial*
* Utilizado para evitar recálculos complexos desnecessários (não necessariamente cálculos matemáticos)
* Retorna um valor no retorno de uma função. Exemplo:
```ts
const valorMemoizado = useMemo(
() => {
return /* valor de retorno */
},
[/* array de dependências */],
);
```
### `useCallback`
* Retorna um callback *memorizado* (re-renderizado apenas quando necessário)
* Executado apenas quando a função do callback é invocada
* Mantem *integridade referencial*
* Retorna um callback no retorno da função. Exemplo:
```ts
const callbackMemoizado = useCallback(
() => {
// callback
},
[/* array de dependências */],
);
```