{"id":18468825,"url":"https://github.com/felipebrenner/ignite-reactjs-perfreact","last_synced_at":"2025-05-07T06:07:35.725Z","repository":{"id":112666515,"uuid":"392503348","full_name":"FelipeBrenner/ignite-reactjs-perfreact","owner":"FelipeBrenner","description":"Projeto de estudo sobre performance e fluxo de renderização no ReactJS desenvolvido nas aulas do Chapter V da trilha de ReactJS do Bootcamp Ignite da Rocketseat","archived":false,"fork":false,"pushed_at":"2021-08-08T20:58:21.000Z","size":123,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T06:07:32.599Z","etag":null,"topics":["developer-tools","ignite","react-virtualized","reactjs","usecallback","usememo"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FelipeBrenner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-04T01:08:22.000Z","updated_at":"2022-06-07T16:19:30.000Z","dependencies_parsed_at":"2023-06-10T17:45:13.145Z","dependency_job_id":null,"html_url":"https://github.com/FelipeBrenner/ignite-reactjs-perfreact","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelipeBrenner%2Fignite-reactjs-perfreact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelipeBrenner%2Fignite-reactjs-perfreact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelipeBrenner%2Fignite-reactjs-perfreact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelipeBrenner%2Fignite-reactjs-perfreact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FelipeBrenner","download_url":"https://codeload.github.com/FelipeBrenner/ignite-reactjs-perfreact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252823919,"owners_count":21809713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","ignite","react-virtualized","reactjs","usecallback","usememo"],"created_at":"2024-11-06T10:08:15.996Z","updated_at":"2025-05-07T06:07:35.705Z","avatar_url":"https://github.com/FelipeBrenner.png","language":"TypeScript","readme":"\u003cimg alt=\"ignite-reactjs\" title=\"ignite-reactjs\" src=\".github/cover-reactjs.png\"\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Perfomando apps com ReactJS\n\u003c/h1\u003e\n\n## 💻 Repositório\n\nProjeto desenvolvido estudando como performar aplicações com React entendendo como funcionam os algoritmos internos da biblioteca e todo o fluxo de renderização de componentes.\n\n## 📖 Bibliotecas, funções, hooks e recursos\n\n- Extensão Developer Tools\n  - Aba Components: exibe a árvore dos componentes React e informações de cada um, como props, hooks e por quem foi renderizado; há um check box \"Highlight updates when components render\", que quando marcado realça quais componentes estão sendo renderizados em cada ação do usuário.\n  - Aba Profiler: mostra quais componentes renderizaram a partir de alguma ação do usuário, porque renderizou, quanto demorou, etc.\n- memo\n  - Função React que ao ser utilizada em um componente ele só renderiza quando houver alteração em relação a sua versão anterior, ou seja, não renderiza quando um componente pai renderizar.\n  - Deve ser usado em 3 situações:\n    - em componentes puros, funções que dados os mesmos parâmetros sempre retornam o mesmo resultado, são apenas para abstrair uma parte visual;\n    - em componentes que renderizam demais;\n    - em componentes que renderizam novamente com os mesmo parâmetros.\n- useMemo\n  - Hook utilizado para memorizar um valor.\n  - Deve ser usado em 2 situações:\n    - em cálculos pesados realizados em um componente React, para que a performance não seja afetada com o cálculo sendo realizado toda vez que o componente é renderizado mas suas variáveis estão iguais;\n    - para igualdade referencial, quando é repassado uma informação a um componente filho, para que essa informação não seja recriada do zero, não ocupe um novo espaço na memória.\n- useCallback\n  - Hook utilizado para memorizar uma função.\n  - Deve ser usado somente em 1 situação:\n    - para igualdade referencial, quando é repassada uma função a um componente filho, para que essa função não seja recriada do zero, não ocupe um novo espaço na memória.\n- Code Splitting\n  - Lazy no React, ou Dynamic no Next, servem para uma importação ser realizada somente quando ela for utilizada.\n- react-virtualized\n  - Biblioteca para quando houver uma lista grande para exibir em tela, renderizar o html somente do que estiver visível conforme a barra de rolagem.\n- Bundle Analyzer\n  - Biblioteca para analisar o tamanho de tudo que compõe a build.\n\n---\n\nPor Felipe Brenner\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipebrenner%2Fignite-reactjs-perfreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipebrenner%2Fignite-reactjs-perfreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipebrenner%2Fignite-reactjs-perfreact/lists"}