O componente Profiler mede a frequência de renderização de uma aplicação React e o “custo” dessa renderização.\nSeu objetivo é ajudar a identificar partes de aplicação que são lentas e podem se beneficiar de otimizações como a memorização
\n\nNota:
\nO uso do
\nProfileradiciona uma sobrecarga de processamento, sendo portanto desabilitada no build de produção.Ao optar pelo uso do
\nProfilerem produção, o React provisiona um build especial de produção com oProfilerhabilitado.\nLeia mais sobre como utilizar esse build em fb.me/react-profiling
O Profiler pode ser adicionado em qualquer lugar dentro da árvore de React para mensurar o custo de renderização dessa parte da árvore.\nEle exige duas props: um id (formato string) e uma função de callback onRender, o qual o react executa no momento em que a árvore “envia” uma atualização.
Por exemplo, para executar um profile em um componente de Navigation e seus descendentes:
render(\n <App>\n <Profiler id=\"Navigation\" onRender={callback}> <Navigation {...props} />\n </Profiler>\n <Main {...props} />\n </App>\n);Múltiplos componentes Profiler podem ser utilizados para mensurar diferentes partes de uma aplicação:
render(\n <App>\n <Profiler id=\"Navigation\" onRender={callback}> <Navigation {...props} />\n </Profiler>\n <Profiler id=\"Main\" onRender={callback}> <Main {...props} />\n </Profiler>\n </App>\n);Componentes Profiler também podem estar aninhados para mensurar diferentes componentes em uma mesma subárvore:
render(\n <App>\n <Profiler id=\"Panel\" onRender={callback}> <Panel {...props}>\n <Profiler id=\"Content\" onRender={callback}> <Content {...props} />\n </Profiler>\n <Profiler id=\"PreviewPane\" onRender={callback}> <PreviewPane {...props} />\n </Profiler>\n </Panel>\n </Profiler>\n </App>\n);\n\nNota
\nApesar do
\nProfilerser um componente leve, deve ser usado apenas quando necessário; cada uso traz uma carga adicional de CPU e memória para uma aplicação.
onRender O Profiler requer uma função onRender como prop.\nO React chama essa função em todo momento que o a árvore dentro dele “envia” uma atualização.\nEla recebe parâmetros descrevendo o que foi renderizado e quanto tempo levou.
function onRenderCallback(\n id, // o prop \"id\" da árvore Profiler que acabou de atualizar \n phase, // \"mount\" (se a árvore acabou de ser montada) ou \"update\" (se foi renderizada novamente)\n actualDuration, // tempo gasto renderizando a atualização enviada\n baseDuration, // tempo estimado para renderizar totalmente a subárvore sem memorização\n startTime, // quando o React começou renderizar essa atualização\n commitTime, // quando o React enviou essa atualização\n interactions // um Set de interações pertencentes â essa atualização\n) {\n // Agregue ou registre os tempos de renderização..\n}Vamos ver no detalhe cada uma dessas props:
\nid: string -\nO id da árvore Profiler que acabou de atualizar.\nIsso pode ser utilizado para identificar qual parte da árvore foi atualizada se você está utilizando múltiplos componentes Profiler.phase: "mount" | "update" -\nIdentifica se a árvore que foi montada pela primeira vez ou renderizada novamente por uma mudança na props, no estado ou por hooks.actualDuration: number -\nTempo desprendido renderizańdo o Profiler e seus descententes para a atualização corrente.\nIsso indica o quão bem essa subárvore faz o uso da memorização (e.g. React.memo, useMemo, shouldComponentUpdate).\nIdealmente esse valor deve diminuir significativamente depois da montagem inicial visto que os descendentes só precisarão renderizar novamente se as suas props específicas forem alteradas.baseDuration: number -\nA duração da renderização mais recente para cada componente individual dentro da árvore Profiler.\nEsse valor estima um pior cenário de renderização (por exemplo, a montagem inicial de uma árvore sem memorização).startTime: number -\nTimestamp de quando o React começou a renderizar a atualização corrente.commitTime: number -\nTimestamp de quando o React enviou a atualização corrente.\nEsse valor é compartilhado entre todos os componentes Profiler em um envio, permitindo o agrupamento deles se desejável.interactions: Set -\nSet de “interações” que estavam sendo rastreadas quando a atualização foi agendada (por exemplo, quando um render ou setState foi invocado).\n","frontmatter":{"title":"Profiler API","next":null,"prev":null},"fields":{"path":"content/docs/reference-profiler.md","slug":"docs/profiler.html"}}},"pageContext":{"slug":"docs/profiler.html"}},"staticQueryHashes":[]}Nota
\nInterações podem ser usadas para identificar a causa de uma atualização, apesar da API para rastreá-las ainda ser experimental.
\nAprenda mais sobre em fb.me/react-interaction-tracing
\n