Flashcards
Perguntas comuns em entrevista Frontend React e Next
Cards in this deck (24)
- 1Quais Hooks do React você conhece?useState /
useEffect /
useContext /
useRef /
useCallback /
useMemo /
useReducer /
useLayoutEffect - 2O que é Virtual DOM?Virtual DOM é um conceito em React onde uma representação virtual leve do DOM (Document Object Model) real é criada e armazenada na memória. É uma técnica de programação usada para otimizar o desempenho de aplicações web.
Quando são feitas alterações nos dados ou no estado de um componente React, o DOM virtual é atualizado em vez de manipular diretamente o DOM real. O DOM virtual calcula então a diferença entre o estado anterior e o atualizado do componente, conhecido como processo de "diffing".
Uma vez identificadas as diferenças, o React atualiza com eficiência apenas as partes necessárias do DOM real para refletir as alterações. Essa abordagem minimiza o número de manipulações reais do DOM e melhora o desempenho geral do aplicativo.
Ao usar o DOM virtual, o React fornece uma maneira de criar interfaces de usuário dinâmicas e interativas, garantindo eficiência e velocidade de renderização ideais. - 3Como renderizar um array de elementos?Para renderizar um array de elementos, você pode usar o método map() para iterar sobre o array e retornar um novo array de elementos React.
- 4Qual é a diferença entre Controlled Component (componentes controlados) e uncontrolled components (não controlados)?A diferença entre componentes controlados e não controlados reside na forma como eles gerenciam e atualizam seu estado .
Componentes controlados são componentes onde o estado é controlado pelo React. O componente recebe seu valor atual e o atualiza por meio de props. Ele também aciona uma função de retorno de chamada quando o valor muda. Isto significa que o componente não armazena seu próprio estado interno. Em vez disso, o componente pai gerencia e passa o valor para o componente controlado.
Os componentes não controlados, por outro lado, gerenciam seu próprio estado internamente usando referências ou outros métodos. Eles armazenam e atualizam seu estado de forma independente, sem depender de adereços ou retornos de chamada. O componente pai tem menos controle sobre o estado dos componentes não controlados. - 5Qual é a diferença entre componentes React baseados em classe e funcionais? class-based and functional React componentsA principal diferença entre componentes funcionais e baseados em classe é como eles são definidos e a sintaxe que usam.
Componentes baseados em classe são definidos como classes ES6 e estendem a React.Componentclasse. Eles usam o rendermétodo para retornar o JSX (JavaScript XML) que define a saída do componente. Os componentes da classe têm acesso aos métodos do ciclo de vida dos componentes e ao gerenciamento de estado por meio this.statedo this.setState().
Os componentes funcionais, por outro lado, são definidos como funções JavaScript simples. Eles aceitam adereços como argumentos e retornam JSX diretamente. Os componentes funcionais não têm acesso aos métodos ou estados do ciclo de vida. No entanto, com a introdução dos React Hooks no React 16.8, os componentes funcionais agora podem gerenciar o estado e usar outros recursos, como contexto e efeitos. - 6Quais são os métodos de ciclo de vida de um componente?Os métodos de ciclo de vida são uma forma de conectar-se aos diferentes estágios do ciclo de vida de um componente, permitindo executar códigos específicos em momentos específicos.
constructor
render
componentDidMount
componentDidUpdate
componentWillUnmount
Alguns métodos de ciclo de vida, como componentWillMount, componentWillReceivePropse componentWillUpdate, foram descontinuados ou substituídos por métodos ou ganchos alternativos.
Quanto a “this”, refere-se à instância atual de um componente de classe. Ele permite acessar propriedades e métodos dentro do componente. Em componentes funcionais, "this" não é usado porque as funções não estão vinculadas a uma instância específica. - 7Quais são as peculiaridades do uso de useState?useStateretorna um valor de estado e uma função para atualizá-lo.
Durante a renderização inicial, o estado retornado corresponde ao valor passado como primeiro argumento. A setStatefunção é usada para atualizar o estado. Ele pega um novo valor de estado como parâmetro e enfileira uma nova renderização do componente . A setStatefunção também pode aceitar uma função de retorno de chamada como parâmetro, que assume o valor do estado anterior como parâmetro. - 8Quais são as peculiaridades do uso de useEffect?O useEffectgancho permite realizar efeitos colaterais em um componente funcional.
Mutações, assinaturas, temporizadores, registro e outros efeitos colaterais não são permitidos dentro do corpo principal de um componente funcional conhecido como fase de renderização React. Isso pode levar a erros confusos e inconsistências na interface do usuário.
Em vez disso, é recomendado usar useEffect. A função passada para useEffect será executada após a renderização ser enviada para a tela, ou se você passar um array de dependências como o segundo parâmetro, a função será chamada toda vez que uma das dependências for alterada. - 9Como acompanhar a desmontagem de um componente funcional?Freqüentemente, useEffectcrie recursos que precisam ser limpos ou redefinidos antes que o componente saia da tela, como uma assinatura ou um identificador de temporizador.
Para fazer isso, a função passada useEffectpode retornar uma função de limpeza . A função de limpeza é executada antes do componente ser removido da interface do usuário para evitar vazamentos de memória. Além disso, se o componente for renderizado várias vezes (como normalmente é o caso), o efeito anterior será limpo antes que o próximo efeito seja executado. - 10O que são PROPS no React?Props são dados passados para o componente pelo pai. Os adereços
são somente leitura e não podem ser alterados. - 11O que é state manager e com quais você já trabalhou ou conhece?State Manager ou Gerenciador de estado é uma ferramenta ou biblioteca que ajuda a gerenciar o estado de um aplicativo. Ele fornece um armazenamento ou contêiner centralizado para armazenar e gerenciar dados que podem ser acessados e atualizados por diferentes componentes do aplicativo.
Um gestor estadual resolve vários problemas. Em primeiro lugar, é uma boa prática separar os dados e a lógica relacionada a eles dos componentes. Em segundo lugar, ao usar o estado local e passá-lo entre componentes, o código pode tornar-se complicado devido ao potencial de aninhamento profundo de componentes. Por ter um armazenamento global, podemos acessar e modificar dados de qualquer componente.
Juntamente com o React Context, Redux ou MobX são comumente usados como bibliotecas de gerenciamento de estado. - 12Em quais casos você pode usar o local state e quando deve usar o estado global?O estado local é recomendado para ser usado nos casos em que é usado apenas em um componente e não há planos para passá-lo para outros componentes. O estado local também é usado em um componente que representa um item individual em uma lista. No entanto, se a decomposição de componentes envolver componentes aninhados com dados transmitidos pela hierarquia, é melhor usar o estado global.
- 13O que é um reducer no Redux e quais parâmetros ele utiliza?Um reducer é uma função pura que toma o estado e a ação como parâmetros. Dentro do redutor rastreamos o tipo de ação recebida e, dependendo dela, modificamos o estado e retornamos um novo objeto de estado.
- 14Para que serve useMemo e como funciona?useMemoé usado para armazenar em cache e memorizar o
resultado dos cálculos.
Passe a função de criação e uma série de dependências. useMemorecalculará o valor memorizado somente quando o valor de qualquer uma das dependências for alterado. Essa otimização ajuda a evitar
cálculos dispendiosos em cada renderização.
Com o primeiro parâmetro, a função aceita um retorno de chamada no qual os cálculos são realizados, e com o segundo um array de dependências, a função executará novamente os cálculos somente quando pelo menos uma das dependências for alterada. - 15Para que serve useCallback e como funciona?O useCallbackgancho retornará uma versão memorizada do retorno de chamada, que muda apenas se os valores de uma das dependências mudarem.
Isso é útil ao passar retornos de chamada para componentes filhos otimizados que dependem da igualdade de links para evitar renderizações desnecessárias. - 16Qual é a diferença entre useMemo e useCallback?useMemoé usado para memorizar o resultado de um cálculo, enquanto useCallbacké usado para memorizar a própria função.
useMemoarmazena em cache o valor calculado e o retorna nas renderizações subsequentes se as dependências não tiverem sido alteradas.
useCallbackarmazena em cache a própria função e retorna a mesma instância, a menos que as dependências tenham sido alteradas. - 17O que é React Context ?React Context é um recurso que fornece uma maneira de passar dados pela árvore de componentes sem passar manualmente adereços em todos os níveis. Ele permite criar um estado global que pode ser acessado por qualquer componente da árvore, independentemente de sua posição. O contexto é útil quando você precisa compartilhar dados entre vários componentes que não estão diretamente conectados por meio de props.
A API React Context consiste em três partes principais:
createContext: Esta função é usada para criar um novo objeto de contexto.
Context.Provider: este componente é usado para fornecer o valor ao contexto. Ele envolve os componentes que precisam de acesso ao valor.
Context.Consumerou useContextgancho: este componente ou gancho é usado para consumir o valor do contexto. Ele pode ser usado em qualquer componente do provedor do contexto.
Ao usar o React Context, você pode evitar o detalhamento de prop (passar props por vários níveis de componentes) e gerenciar facilmente o estado em um nível superior, tornando seu código mais organizado e eficiente. - 18Para que serve useContext e como funciona?Em um aplicativo React típico, os dados são passados de cima para baixo (do componente pai para o componente filho) usando adereços. No entanto, tal método de uso pode ser muito complicado para alguns tipos de adereços
(por exemplo, o idioma selecionado, tema da UI), que devem ser passados para muitos componentes no aplicativo. O contexto fornece uma maneira de compartilhar esses dados entre componentes sem ter que passar explicitamente os adereços por
cada nível da árvore.
O componente que chama useContext sempre será renderizado novamente quando
o valor do contexto for alterado. Se a nova renderização de um componente for cara, você poderá otimizá-lo usando memoização. - 19Para que é usado useRef e como funciona?useRefretorna um objeto ref modificável, uma propriedade. A corrente é inicializada pelo argumento passado. O objeto retornado persistirá durante toda a vida útil do componente e não mudará de renderização para renderização.
O caso de uso usual é acessar o descendente em
estilo imperativo. Ou seja, usando ref, podemos nos referir explicitamente ao elemento DOM. - 20O que é React.memo()?React.memo()é um componente de ordem superior. Se o seu componente sempre renderiza a mesma coisa com adereços inalterados, você pode envolvê-lo em uma React.memo()chamada para melhorar o desempenho em alguns casos, memorizando assim o resultado. Isso significa que o React usará o resultado da última renderização, evitando a nova renderização. React.memo()afeta apenas alterações nos adereços. Se um componente funcional estiver agrupado em React.memo e usar useState, useReducer ou useContext, ele será renderizado novamente quando o estado ou contexto mudar.
- 21O que é fragment React?Retornar vários elementos de um componente é uma prática comum no React. Os fragmentos permitem formar uma lista de elementos filhos sem criar nós desnecessários no DOM.
- 22O que é React Reconciliation?React Reconciliation é um algoritmo React usado para distinguir uma árvore de elementos de outra para determinar as peças que precisarão ser substituídas.
Reconciliação é o algoritmo por trás do que costumávamos chamar de Virtual DOM. A definição é mais ou menos assim: quando você renderiza um aplicativo React, a árvore de elementos que descreve o aplicativo é gerada na memória reservada. Essa árvore é então incluída no ambiente de renderização - por exemplo, um aplicativo de navegador, e é traduzida em um conjunto de operações DOM. Quando o estado da aplicação é atualizado, uma nova árvore é gerada. A nova árvore é comparada com a anterior para calcular e habilitar exatamente as operações necessárias para redesenhar a aplicação atualizada. - 23Por que precisamos de Keys nas listas ao usar map()?As Keys ajudam o React a determinar quais elementos foram alterados,
adicionados ou removidos. Eles devem ser especificados para que o React possa corresponder
aos elementos do array ao longo do tempo. A melhor maneira de escolher uma Keys é usar uma string que distinga claramente o item da lista de seus vizinhos. Na maioria das vezes, você usará os IDs dos seus dados como Keys . - 24—