Aprende React, 2ª Edição

Capítulo 7. Aprimorando componentes com Hooks

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Renderização é o coração de uma aplicação React. Quando algo muda (props, estado), a árvore de componentes é renderizada novamente, refletindo os dados mais recentes como uma interface de usuário. Até agora, useState tem sido o nosso cavalo de batalha para descrever como nossos componentes devem ser renderizados. Mas podemos fazer mais. Existem mais Hooks que definem regras sobre por que e quando a renderização deve acontecer. Existem mais Hooks que melhoram a performance de renderização. Há sempre mais Hooks para nos ajudar.

No último capítulo, apresentamos useState, useRef, e useContext, e vimos que podíamos compor esses Hooks em nossos próprios Hooks personalizados: useInput e useColors. Mas há mais de onde isso veio. O React vem com mais Hooks prontos para uso. Neste capítulo, nós vamos dar uma olhada mais de perto em useEffect, useLayoutEffect, e useReducer. Todos eles são vitais na construção de aplicações. Nós também veremos useCallback e useMemo, que podem ajudar a otimizar nossos componentes para performance.

Introduzir o useEffect

Nós agora temos uma boa noção do que acontece quando renderizamos um componente. Um componente é simplesmente uma função que renderiza uma interface de utilizador. As renderizações ocorrem quando o aplicativo é carregado pela primeira vez e quando os valores de props e state são ...