https://github.com/ecrozatti/react-memoization-hooks

Controlando performance de um projeto ReactJS, utilizando os hooks React Memo, useCallback e useMemo.
https://github.com/ecrozatti/react-memoization-hooks

front-end hooks memoization performance react reactdevtools reactmemo tailwindcss usecallback usememo

Last synced: about 1 month ago
JSON representation

Controlando performance de um projeto ReactJS, utilizando os hooks React Memo, useCallback e useMemo.

• Host: GitHub
• URL: https://github.com/ecrozatti/react-memoization-hooks
• Owner: ecrozatti
• License: mit
• Created: 2021-07-27T02:25:45.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-07-28T04:01:35.000Z (almost 4 years ago)
• Last Synced: 2025-02-06T22:42:18.760Z (3 months ago)
• Topics: front-end, hooks, memoization, performance, react, reactdevtools, reactmemo, tailwindcss, usecallback, usememo
• Language: JavaScript
• Homepage:
• Size: 521 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    





  Sobre   |   

  Tecnologias   |   

  Requisitos   |   

  Começando



Light Mode

:-------------------------:

![](https://github.com/ecrozatti/react-memoization-hooks/blob/main/.github/interface-light-mode.png)

Dark Mode

:-------------------------:

![](https://github.com/ecrozatti/react-memoization-hooks/blob/main/.github/interface-dark-mode.png)

## :page_with_curl: Sobre

![GitHub language count](https://img.shields.io/github/languages/count/ecrozatti/react-memoization-hooks)

![GitHub top language](https://img.shields.io/github/languages/top/ecrozatti/react-memoization-hooks)

![GitHub repo size](https://img.shields.io/github/repo-size/ecrozatti/react-memoization-hooks)

![GitHub](https://img.shields.io/github/license/ecrozatti/react-memoization-hooks)

![GitHub last commit](https://img.shields.io/github/last-commit/ecrozatti/react-memoization-hooks)

O aplicativo consome dados da API GitHub e navega por vários conceitos de melhoria e análise de desempenho, usando hooks como useMemo e useCallback para controlar o desempenho da aplicação, fazendo memoização de cálculos e funções pesadas.

Durante essa aula também vimos como analisar nossa renderização com React Developer Tools e usar a API Memo do React para evitar renderizações desnecessárias de nossos componentes.

## :computer: Tecnologias

Projeto criado na aula do instrutor Vitor Alencar no grupo Experts Club da Rocketseat com as seguintes tecnologias:

- [ReactJS](https://reactjs.org/)

- [CRACO](https://github.com/gsoft-inc/craco)

- [Tailwind CSS](https://tailwindcss.com/)

- [Autoprefixer CSS](https://github.com/postcss/autoprefixer)

## :books: Requisitos

- Ter [**Git**](https://git-scm.com/) para clonar o projeto.

## :rocket: Começando

``` bash

  # Clonar o projeto:

  $ git clone https://github.com/ecrozatti/react-memoization-hooks.git

  # Entrar no diretório:

  $ cd react-memoization-hooks

  # Instalar as dependências:

  $ yarn install

  # Rodar a aplicação:

  $ yarn start

```

Made with 💚 by [Eric Crozatti Ferreira](https://www.linkedin.com/in/eric-crozatti-1447688a/)