React: Top 28 Perguntas e Respostas para Entrevistas em 2020

React é uma biblioteca JavaScript que se tornou muito popular nos últimos anos, e com isso a demanda por profissionais que sabem lidar com essa biblioteca tem sido cada vez maior. Confira abaixo algumas das perguntas essenciais que você precisa saber responder na hora da entrevista.

A realidade é que no mercado, não basta você saber desenvolver. Você precisa conhecer todos os conceitos e saber comunicar isso de uma forma que passe confiança para a empresa que quer preencher a vaga. Para isso, é importante que você tenha esse preparo, e foi pensando nisso que eu escrevi essa lista de perguntas e respostas comuns em uma entrevista.

Eu comecei a desenvolver em React em 2014, e de lá pra cá, o cenário mudou várias vezes. Por isso, se você é novo em React, saiba que é importante sempre se atualizar com os novos pacotes e novas práticas que surgem praticamente a todo momento.

React: Perguntas e respostas para entrevistas

1. O que é React?

React é uma biblioteca JavaScript open-source desenvolvida pelo Facebook, usada para construir interfaces front-end, voltada principalmente para aplicativos single page. React tem o foco na construção de componentes, o que ajuda a tornar o código reutilizável.

2. Cite algumas funcionalidades do React.

• React utiliza o Virtual DOM e um sistema de diffing, tornando os processos de atualização da árvore do DOM mais leves.
• Segue um fluxo de dados unidirecional, que é de cima para baixo na aplicação.
• Utiliza componentes reutilizáveis para o desenvolvimento da UI da aplicação.
• Pode ser renderizado no servidor.

3. Quais são as vantagens do React?

• Aumenta a performance das aplicações, por usar o Virtual DOM.
• Facilita a criação de componentes reutilizáveis para a interface da aplicação.
• É de fácil integração com outros frameworks, por ser uma biblioteca de UI (sendo apenas o "V" - view - da arquitetura MVC).
• Pode ser renderizado tanto do lado do cliente, quanto do lado do servidor (SSR - server side rendering).
• Possui o padrão de sintaxe JSX, que facilita a criação de componentes de UI.

4. Quais as limitações do React?

• React não é um framework completo, é apenas uma biblioteca front-end, portanto geralmente não funciona sozinho.
• Requer um boilerplate considerável, ou seja, um código mínimo inicial, geralmente com ferramentas de build, além da própria biblioteca do React, o que gera um certo peso e trabalho, mesmo para fazer uma aplicação bastante simples.
• Curva de aprendizado pode ser difícil para iniciantes, pois dependendo da referência, o React introduz um novo paradigma para construção de aplicações web.
• O código pode ficar bastante complexo quando aliado à estilização inline.

5. Qual a diferença entre React e React Native?

React é uma biblioteca JavaScript usada para criar interfaces de usuário (UI) para aplicações web. Ela suporta tanto a renderização do lado do cliente como também do lado do servidor.

Já React Native é um framework mobile que compila para código nativo, gerando componentes mobile nativos. React Native permite você desenvolver em JavaScript e compilar para iOS e Android usando a mesma base de código.

6. Qual a diferença entre Component e Element?

Um Element é um objeto bastante simples que descreve um node DOM ou outros componentes React. Um Element não é mutável, por isso é bastante simples e leve, ele passa apenas props, como no exemplo abaixo:

React.createElement('div', null, 'Hello world');

Sendo equivalente ao código JSX abaixo:

<div>Hello world</div>

Já os componentes podem ser instanciados com classes, contendo um método render(), ou com uma função. Components retornam uma árvore de Elements depois de transpilada do JSX. Exemplos de declaração de Component:

// Componente de classe
class Link extends React.Component {
	render() {
		return <a href={ this.props.href }>{ this.props.value }</a>
	}
}

// Componente funcional sem estado
const Link = () => {
	return <a href={ this.props.href }>{ this.props.value }</a>
}

7. O que é JSX?

JSX é uma abreviação de JavaScript XML. Em termos simples, é código JavaScript que utiliza o estilo de sintaxe do HTML para tornar o código mais fácil de entender. Por debaixo dos panos, o código JSX se transforma no React.createElement(), que gera os elementos DOM que estamos acostumados. Abaixo um exemplo de código JSX:

<button className="btn" onClick={ this.login }>Login</button>

8. Os navegadores conseguem interpretar o JSX?

Navegadores não conseguem interpretar JSX, porque JSX não é código JavaScript comum.

Para que os navegadores entendam o JSX, primeiro é preciso transformá-lo em código JavaScript através de alguma ferramenta como Babel e então passar esse código para o navegador.

9. Como você descreveria o funcionamento do Virtual DOM, e porque ele é usado?

O Virtual DOM é uma das principais funcionalidades do React. Ele é um objeto JavaScript que é basicamente uma abstração do DOM real e é uma das principais peças para a alta performance da aplicação.

O Virtual DOM fica armazenado na memória e é usado como referência para sincronizar os elementos do DOM real apenas quando for necessário.

O processo de renderização de componentes do DOM virtual para o real se chama reconciliation (reconciliação), é usado para ampliar a performance da aplicação e funciona mais ou menos assim:

Quando uma propriedade ou estado é alterado em um componente, chama-se a função render(), que por sua vez, constrói uma nova UI no Virtual DOM.

Em seguida, é utilizado um algoritmo de diferenciação (diffing), que calcula as diferenças entre o DOM real do DOM virtual, e por sua vez aplica essas diferenças na aplicação para o usuário.

10. Por que React utiliza o atributo className e não class?

class é uma palavra-chave reservada em JavaScript, portanto não pode ser usada como um atributo para objetos JSX. Para isso, é usado className ao invés de class para passar a classe de um elemento DOM.

render() {
	return <img className="logo" src="logo.png" />
}

11. O que são Fragments em React?

Em JSX, não é possível retornar múltiplos nós sem um container, como abaixo:

render() {
	return (<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>);
}

É necessário sempre encapsular o retorno de múltiplos nós, e é para isso que o Fragment é utilizado:

render() {
	return (<React.Fragment>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</React.Fragment>);
}

Existe também a sintaxe <> ... </>, mais simples de se utilizar.

É recomendado usar Fragments ao invés de uma tag como container (ex: div ou span), pois desta forma não é criado um elemento DOM desnecessário e também porque algumas tags têm uma estilização padrão o que consequentemente afeta o estilo dos elementos filho.

12. Qual a diferença entre componentes controlados e não controlados?

Controlled Components e Uncontrolled Components são um conceito válido para elementos de formulário, como input, select ou textarea. Elementos que possuem um estado interno, como o valor (value), se estão marcados (checked), etc.

Componentes controlados são quando controlamos o estado destes elementos através de uma função handler e exibimos o estado de acordo, na função render(). Exemplo:

class Input extends React.Component {
	_onChange(event) {
		this.setState({ value: event.target.value })
	}
	
	render() {
		<input type="text" onChange={ (event) => { this._onChange(event) } } value={ this.state.value } />
	}
}

Já um componente não controlado, mantém seu estado no próprio DOM, não tendo um mecanismo de alteração do estado, nem um handler para alterara este estado. Para consultar o estado, você deve fazer o uso de refs. Essa segunda abordagem é menos desejada em aplicações React.

class Input extends React.Component {
	_onSubmit(event) {
		console.log(this.refs.input.value);
		event.preventDefault();
	}
	render() {
		<form onSubmit={ () => { this._onSubmit(event) } }>
			<input type="text" ref="input" />
		</form>
	}
}

13. Como se cria Higher Order Components (HOCs) em React?

Higher Order Components em React são criados através de uma função que recebe como parâmetro um componente, e retorna um novo componente.

É basicamente uma forma de reutilizar a lógica de um componente, encapsulando-o com uma função e gerando dinamicamente um novo componente.

Você pode usar HOCs para o seguinte:

• Injetar ou manipular props e state.
• Alterar a renderização do componente.
• Reutilizar ou abstrair a lógica de um componente existente.

14. O que é state em React?

State é um objeto JavaScript que mantém o estado de um componente em React, ou seja, ele mantém todas as informações que aquele componente precisa durante seu ciclo de vida.

O objeto state é imutável, individual, e não é compartilhado entre outros componentes.

Um exemplo de componente utilizando state:

class Collapsible extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			collapsed: true
		}

		this._toggleCollapsed = this._toggleCollapsed.bind(this);
	}

	_toggleCollapsed() {
		this.setState({ collapsed: !this.state.collapsed });
	}

	render() {
		return <div className={ (this.state.collapsed ? 'collapsed' : '') + ' accordion' } onClick={ this._toggleCollapsed }>{ this.props.children }</div>
	}
}

15. Por que não podemos alterar o objeto state diretamente?

Alterar o objeto state diretamente não vai disparar render().

O correto é usar o método setState(), que agenda uma nova atualização de state e em seguida renderiza novamente o componente.

16. Pra que serve o segundo argumento de setState?

O segundo argumento de setState é uma função callback, que é chamada quando o método setState() finaliza e o componente é re-renderizado, já que setState() é um método assíncrono.

É importante usar este callback quando você precisar garantir que aquele trecho de código deve ser executado sempre depois que o state foi devidamente atualizado.

17. O que faz o método render?

O método render() do React.Component é responsável por gerar o novo DOM daquele componente.

Basicamente, este método renderiza o componente de acordo com o estado e propriedades atuais. Por padrão, ele é chamado sempre que o objeto props ou state é alterado.

Existe também o método render() do react-dom, que não deve ser confundido com o render() do React.Component. Neste caso, esse método serve para renderizar um componente dentro de um container DOM diretamente no DOM real. Geralmente utiliza-se este método para injetar o componente raíz do app em React no HTML da aplicação. Exemplo:

ReactDOM.render(<App />, document.getElementById('react-app'));

18. O que são props em React?

Props são as propriedades dos componentes. A nomenclatura e a forma de atribuição é similar aos atributos HTML. O papel das props é passar informações do componente "pai" para os componentes "filho" e chamar a mudança de estado de componentes.

Exemplo de props:

<Link href="https://metring.com.br" className="btn" />

E utiliza-se props.href e props.className dentro do componente Link para acessar as propriedades definidas acima.

19. O que são keys em React?

Uma key é um tipo especial de prop. Ela é definida por uma string e é usada pelo React no algoritmo de diferenciação para identificar mudanças no DOM Virtual.

É comum utilizar a propriedade key em arrays de componentes, para que o React tenha um comportamento estável quanto à cada item de uma lista, por exemplo.

const list = items.map((item) => {
	return <li key={ item.id }>{ item.value }</li>;
});

20. O que são refs em React?

Em React, ref é um outro tipo de propriedade especial, usado para fazer referência à algum elemento diretamente no DOM.

<input ref="custom_input" />

Para obter o elemento input acima, usa-se ref.custom_input.

No geral não é necessário usar refs, pois na maioria das vezes não referenciamos os elementos DOM diretamente usando React, mas essa abordagem é válida para alguns casos específicos, como em componentes não controlados.

21. O que é Flux?

Flux é um paradigma que difere do MVC tradicional. Apesar de existirem bibliotecas que implementam o Flux, o Flux em si não é uma biblioteca.

Flux usa o padrão unidirecional de fluxo de dados do React em uma arquitetura que se baseia em store, dispatcher e action.

22. O que é Redux?

Redux é uma biblioteca usada para manter todo o estado da aplicação em um mesmo container, que então é passado para todos os componentes da aplicação, de forma unidirecional. Redux usa o conceito de store, action e reducer:

• Store: É onde o estado da aplicação é salvo. É imutável e garante que todos os componentes tenham um estado consistente, em uma estrutura previsível.
• Actions: É um objeto que descreve que tipo de ações podem acontecer para alterar o estado do store.
• Reducers: São funções que pegam o estado atual + a ação despachada e retornam um novo estado para a aplicação.

23. Para que serve o pacote react-dom?

O pacote react-dom oferece uma API com métodos específicos para manipulação do DOM, exemplos:

• render()
• hydrate()
• findDOMNode()
• unmountComponentAtNode()
• createPortal()

ReactDOM é o intermediador entre o React e o DOM, e nas primeiras versões do React, os dois faziam parte do mesmo pacote.

O motivo para a divisão destes pacotes foi que o React sozinho foi abstraído para uma biblioteca mais independente de navegador, utilizado para a criação de uma árvore de elementos, que é o que ocorre hoje também no React Native. Já o ReactDOM foi separado para usar somente as funções necessárias para manipulação do DOM.

24. O que são arrow functions? Qual a vantagem no React?

Arrow functions foram introduzidas no ES6 e são uma forma de abreviar a sintaxe da função padrão com function() {}.

Diferente da sintaxe padrão, as arrow functions não tem seu próprio contexto (this, arguments, super). Elas são úteis também como "higher order functions", ou seja, funções que englobam outras funções, o que no React é legal, pois dispensa o uso de binding.

Sintaxe de uma arrow function:

const soma = (a, b) => {
	return a + b;
}

Arrow como higher order function:

render() {
	<Input onChange={ (event) => { this._onChange(event) } } />
}

Arrow retornando componente (functional component):

const App = () => {
	return <div>Hello world</div>;
}

25. Quais são algumas das formas de se estilizar um app em React?

Existem várias formas de se especificar estilos CSS em um app React:

• Classes CSS: Você pode usar classes CSS padrão, referenciando-as através da prop className e incluindo o CSS através de um arquivo CSS ou com a tag <style>.
• Pré-processadores CSS: Alinhado ao uso de classNames ou CSS-in-JS, é possível usar SASS, LESS e outros pré-processadores CSS para facilitar na manutenção das folhas de estilos.
• CSS inline: É possível também usar estilos inline através da prop style e passando um objeto com os estilos CSS. Porém esta abordagem tem algumas limitações, como por exemplo, não é possível estilizar pseudo-classes como :hover, :before, :after, etc.
• CSS-in-JS: É possível usar alguns módulos como Styled Components e Styled-jsx para implementar uma abordagem onde se inclui CSS dentro do JavaScript e implementar os estilos direto dentro de cada componente. Uma vantagem deste método é que o escopo dos estilos é pertinente ao componente em questão.

26. Como se define um inline style em React?

Estilos inline em React são definidos usando o atributo/prop style e passando um objeto contendo os estilos válidos.

Estilos válidos são propriedades CSS escritas em camel case, que são diferentes das strings usadas no CSS.

27. Qual a diferença entre Component e PureComponent?

PureComponent é um tipo de componente idêntico ao React.Component, exceto pelo fato que a atualização é feita de forma padrão, sem chamar o método shouldComponentUpdate().

O PureComponent faz uma shallow comparison (comparação rasa) entre os props e states atuais e antigos, e assim faz a renderização do objeto sempre que houver mudança.

28. Quais as diferenças entre class Component e functional Component?

Class Components são instanciados por uma classe JavaScript e permitem funcionalidades adicionais, como ter métodos específicos e principalmente, manter um state interno. Class Components são instanciados da seguinte forma:

/* Exemplo de um stateless class component */
class App extends React.Component {
	render() {
		return <div>Hello world!</div>
	}
}

/* Exemplo de um stateful class component */
class App extends React.Component {
	constructor(props) {
		super(props);
		
		this.state = {
			message: 'Hello World'
		}
	}
	render() {
		return <div>{ this.state.message }</div>
	}
}

Class Components podem ou não ter state, como no exemplo acima.

Já functional Components são instanciados por uma função, que é basicamente um render, portanto por padrão eles não possuem state, mas podem possuir props.

const App = (props) => (
	<div>Hello World</div>
)

A partir do React 16.8, você pode ter state em functional Components através de Hooks:

import React, { useState } from 'react';

const App = (props) => {
	const [ message, setMessage ] = useState('Hello World');
	
	return <div>
		{ message }
		<input type="text" value={ message } onChange={ e => setMessage(e.target.value) } />
	</div>
}