Perguntas de entrevista React, typescript e NextJs Flashcards
(30 cards)
O que é o Virtual DOM?
É uma representação leve da árvore de elementos da UI. React compara o Virtual DOM com o DOM real (diffing) e atualiza somente o necessário, melhorando a performance.
Qual a diferença entre um componente de classe e um funcional?
Componentes de classe usam class, this, state e métodos de ciclo de vida como componentDidMount.
Componentes funcionais são funções que retornam JSX. Com os Hooks, eles também podem ter estado e efeitos colaterais.
➡️ Hoje, os funcionais são preferidos por serem mais simples e modernos.
O que são Hooks? Cite 3 exemplos.
São funções que permitem usar estado e ciclos de vida em componentes funcionais. Ex: useState, useEffect, useContext.
Como funciona o useEffect?
O useEffect serve para lidar com efeitos colaterais no React, como buscar dados, atualizar o DOM ou configurar timers.
Ele roda:
Ao montar o componente, Ao atualizar alguma dependência, E pode limpar recursos ao desmontar (com return).
📌 O que controla isso é o array de dependências no final do useEffect.
Qual a diferença entre useState e useReducer?
useState é para estados simples. useReducer é mais indicado para estados complexos ou com múltiplas transições.
Como prevenir re-renderizações desnecessárias?
Usando useMemo, useCallback, e garantindo keys estáveis em listas.
Como você passa props entre componentes e o que é lifting state up?
Props são passadas de pai para filho. “Lifting state up” é mover o estado para o componente pai para compartilhá-lo entre filhos.
Como funciona o controle de formulários em React?
Pode ser controlado (com useState) ou não controlado (com refs). Libs como React Hook Form ajudam no controle e validação.
O que é o JSX?
É uma extensão de sintaxe que permite escrever HTML dentro do JavaScript.
Como tratar eventos em React?
Usando camelCase: onClick={() => alert(‘ok’)}. Funciona de forma semelhante ao JS nativo.
Qual a diferença entre getStaticProps e getServerSideProps?
getStaticProps: dados gerados em build time.
getServerSideProps: dados renderizados a cada requisição.
Como funciona o roteamento dinâmico no Next.js?
Criando arquivos com colchetes: [id].tsx. Acessa via useRouter ou como parâmetro da função de dados.
Como navegar programaticamente entre páginas?
Usando useRouter().push(‘/rota’).
O que é ISR (Incremental Static Regeneration)?
Permite regenerar páginas estáticas após o deploy com revalidação via revalidate no getStaticProps.
Como funciona a pasta public/ no Next.js?
Arquivos estáticos acessíveis diretamente pela URL (/logo.png).
Como configurar SEO básico no Next.js?
Usando next/head para definir título, descrição, favicon, etc.
Como implementar middleware no Next.js 13+?
Criando middleware.ts na raiz de /app ou /pages. Útil para autenticação e redirecionamento.
Como tipar props de um componente funcional?
Criando uma interface:
interface Props { title: string }
const MyComponent: FC<Props> = ({ title }) => <h1>{title}</h1>;</Props>
Como definir um estado com useState tipado?
const [count, setCount] = useState<number>(0);</number>
O que é o as const em TypeScript?
Define uma constante com tipos literais imutáveis. Útil para enums e valores fixos.
Qual a diferença entre interface e type?
São semelhantes. interface é mais usada para objetos e permite extensão. type é mais flexível (pode unir tipos, primitivos, etc).
Como tipar um array de objetos?
type User = { id: number; name: string };
const users: User[] = […]
Como tornar uma prop opcional?
interface Props { name?: string }
Como você lida com bibliotecas JS sem tipagem?
Usando @types/nome-da-lib ou criando uma tipagem com declare module.
