React JS essentials

Question 1

Explique este conceito essencial do React JS:

O que é o React e por que ele foi criado?

Answer 1

React é uma biblioteca JavaScript criada pelo Facebook em 2013 para construir interfaces de usuário (UI). Ele foi projetado para resolver problemas de performance e manutenção em aplicações com grande volume de atualizações dinâmicas.

Question 2

Explique este conceito essencial do React JS:

O que é o Virtual DOM e qual sua importância no React?

Answer 2

O Virtual DOM é uma representação leve do DOM real. Quando o estado de um componente muda, o React cria um novo Virtual DOM e o compara com o anterior (diffing). Apenas as mudanças são aplicadas ao DOM real, otimizando a atualização da interface.

Question 3

Explique este conceito essencial do React JS:

O que é JSX e qual seu papel no React?

Answer 3

JSX significa Javascript XML e é uma extensão da sintaxe javascript que permite escrever HTML dentro de um arquivo javascript.

Question 4

Explique este conceito essencial do React JS:

Qual a diferença entre componentes de classe e componentes funcionais no React?

Answer 4

Componentes de classe utilizam classes ES6 e podem ter métodos de ciclo de vida e estado. Componentes funcionais são funções simples e, desde o React 16.8 com hooks, também podem gerenciar estado e ciclo de vida.

Question 5

Explique este conceito essencial do React JS:

O que são hooks no React e por que eles são importantes?

Answer 5

Hooks são funções que permitem utilizar estado e outras funcionalidades de React (como ciclo de vida) em componentes funcionais, promovendo um código mais simples e reutilizável.

Question 6

Explique este conceito essencial do React JS:

O que é o Context API no React?

Answer 6

O Context API é uma solução para o problema de prop drilling, fornecendo um estado global para a aplicação. É utilizado para compartilhar dados de cima para baixo na árvore de componentes sem necessidade de passar por cada nível de componentes intermediários até chegar no componente que finalmente consumirá o dado.

Question 7

Explique este conceito essencial do React JS:

O que é o “React Component Lifecycle” e por que ele é importante?

Answer 7

O ciclo de vida de um componente React consiste em fases pelas quais um componente passa (montagem, atualização e desmontagem). Ele permite que desenvolvedores controlem o comportamento do componente em diferentes estágios de sua existência.

Question 8

Explique este conceito essencial do React JS:

O que é “prop drilling” no React e como pode ser evitado?

Answer 8

“Prop drilling” ocorre quando propriedades são passadas por vários níveis de componentes, mesmo que só sejam usadas por um componente mais profundo. Pode ser evitado com Context API ou soluções de gerenciamento de estado global, como Redux.

Question 9

Explique este conceito essencial do React JS:

Qual a diferença entre props e state no React?

Answer 9

props são imutáveis e passadas de um componente pai para um componente filho para configuração, enquanto state é gerenciado dentro de um componente e pode mudar ao longo do tempo, acionando re-renderizações.

Question 10

Explique este conceito essencial do React JS:

Como funciona a renderização condicional no React?

Answer 10

A renderização condicional no React permite renderizar componentes ou elementos com base em condições booleanas, usando operadores como ternário (? :) ou &&.

Question 11

Explique este conceito essencial do React JS:

O que são “controlled” e “uncontrolled components” no React? Como criar um “controlled component”?

Answer 11

“Controlled components” têm seu estado gerenciado pelo React através de props e state, enquanto “uncontrolled components” gerenciam seu próprio estado internamente, usando refs para acessar o valor diretamente da DOM.

Para criar um controlled component é necessário realizar uma state delegation ao combinar a prop value com o estado local.

const Form = () => { 
 const [value, setValue] = useState(""); 

 const handleChange = (e) => { 
   setValue(e.target.value) 
 } 

 return ( 
   <form> 
     <input 
       value={value} 
       onChange={handleChange} 
       type="text" 
     /> 
   </form> 
 ); 
}; 

Question 12

Explique este conceito essencial do React JS:

O que é “lifting state up” no React?

Answer 12

“Lifting state up” refere-se a mover o estado para o componente pai comum quando dois ou mais componentes filhos precisam compartilhar e sincronizar informações de estado.

Question 13

Explique este conceito essencial do React JS:

O que é “React Reconciliation”?

Answer 13

React Reconciliation é o processo pelo qual o React compara o Virtual DOM com o DOM real e aplica as menores mudanças necessárias para garantir que a interface reflita o estado atual dos dados, aumentando a eficiência das atualizações.

Question 14

Explique este conceito essencial do React JS:

O que é “memoization” no React e quando deve ser usada?

Answer 14

“Memoization” no React pode ser implementada com React.memo para evitar re-renderizações desnecessárias de componentes quando suas props não mudaram, melhorando a performance.

Question 15

Explique este conceito essencial do React JS:

O que são Fragments no React?

Answer 15

Fragments permitem agrupar múltiplos elementos sem adicionar um elemento extra à DOM, resolvendo o problema de retornar vários nós adjacentes em um componente sem criar nós desnecessários.

Question 16

Explique este conceito essencial do React JS:

O que é o useEffect no React e para que ele é utilizado?

Answer 16

O useEffect é um hook que permite realizar efeitos colaterais (como chamadas de APIs, assinaturas e manipulação de DOM) em componentes funcionais. Ele é executado após a renderização do componente e pode ser configurado para ser chamado em determinados momentos, como quando valores específicos mudam.

Question 17

Explique este conceito essencial do React JS:

Como funciona a dependência do useEffect?

Answer 17

A dependência do useEffect é passada como um array no segundo argumento. Quando qualquer valor desse array é alterado, o efeito é executado novamente. Se o array estiver vazio, o efeito será executado apenas uma vez, durante a montagem.

Question 18

Explique este conceito essencial do React JS:

O que é o hook useState no React?

Answer 18

O useState é um hook que permite adicionar e gerenciar o estado dentro de componentes funcionais. Ele retorna um valor de estado e uma função para atualizá-lo.

Question 19

Explique este conceito essencial do React JS:

Quando você deve usar useMemo no React?

Answer 19

O useMemo é usado para memoizar valores computados caros, evitando recalculá-los desnecessariamente em renderizações subsequentes, a menos que suas dependências mudem.

Question 20

Explique este conceito essencial do React JS:

O que é o hook useRef e como ele pode ser utilizado?

Answer 20

O useRef retorna um objeto mutável que persiste entre renderizações. Pode ser usado para acessar elementos da DOM ou armazenar valores simples (tipos primitivos) que não causam re-renderização quando modificados.

Question 21

Explique este conceito essencial do React JS:

Qual a diferença entre useCallback e useMemo?

Answer 21

useCallback memoiza funções, retornando uma versão estável da função entre renderizações, enquanto useMemo memoiza o resultado de uma função, ou seja, valores calculados.

Question 22

Explique este conceito essencial do React JS:

Como o React trata eventos em comparação com o HTML?

Answer 22

O React usa um sistema de eventos sintéticos (synthetic events), que é uma camada de abstração em torno dos eventos nativos do navegador, proporcionando compatibilidade entre diferentes navegadores e um modelo de delegação de eventos mais eficiente.

Question 23

Explique este conceito essencial do React JS:

O que são “higher-order components” (HOCs) no React?

Answer 23

HOCs são funções que recebem um componente como argumento e retornam um novo componente, permitindo a reutilização de lógica entre componentes.

Question 24

Explique este conceito essencial do React JS:

O que são “render props” no React e em quais cenários é util?

Answer 24

“Render props” é uma técnica que permite a reusabilidade de funcionalidades. Um “function component” é passado como prop para outro componente. O resultado da renderização será controlado pela função passada como argumento, deixando ao componente que recebe a função a implementação da lógica re-aproveitável.

Este pattern pode ser implementado em cenarios onde os mesmos dados precisam ser apresentados de formas diferentes. Neste caso o componente principal teria a função repetitiva de obter os dados e o componente passado como prop definiria o formato de visualização desses dados.

import "./App.css";
import { useEffect, useState } from "react";

const MousePosition = ({ render }) => {
  const [mousePosition, setMousePosition] = useState({
    x: 0,
    y: 0,
  });

  useEffect(() => {
    const handleMousePositionChange = (e) => {
      setMousePosition({
        x: e.clientX,
        y: e.clientY,
      });
    };

    window.addEventListener("mousemove", handleMousePositionChange);

    return () => {
      window.removeEventListener("mousemove", handleMousePositionChange);
    };
  }, []);

  return render({ mousePosition });
};

const PanelMouseLogger = () => {
  return (
    <div className="BasicTracker">
      <p>Mouse position:</p>
      <MousePosition
        render={({ mousePosition }) => (
          <div className="Row">
            <span>x: {mousePosition.x}</span>
            <span>y: {mousePosition.y}</span>
          </div>
        )}
      />
    </div>
  );
};

const PointMouseLogger = () => {
  return (
    <MousePosition
      render={({ mousePosition }) => (
        <p>
          ({mousePosition.x}, {mousePosition.y})
        </p>
      )}
    />
  );
};

function App() {
  return (
    <div className="App">
      <header className="Header">Little Lemon Restaurant 🍕</header>
      <PanelMouseLogger />
      <PointMouseLogger />
    </div>
  );
}

export default App;

Question 25

Explique este conceito essencial do React JS:

O que é lazy loading no React?

Answer 25

Lazy loading é uma técnica usada para carregar componentes ou recursos somente quando eles são necessários (usando “code splitting”), melhorando o desempenho e reduzindo o tempo de carregamento inicial da aplicação. No React, pode ser implementado com React.lazy e Suspense.

Question 26

Explique este conceito essencial do React JS:

O que é o “portals” no React?

Answer 26

“Portals” permitem que um componente seja renderizado fora da hierarquia DOM de seu pai direto, útil para renderizar elementos como modais, mantendo o controle de eventos e o comportamento do React.

Question 27

Explique este conceito essencial do React JS:

Qual é a diferença entre um Elemento e um Componente?

Answer 27

Elemento: Refere-se a uma unidade básica no DOM, definida por tags HTML, que representa conteúdo ou estrutura com comportamento mínimo. Exemplo: <div>, <button>, <p>.</button>

Componente: É uma unidade mais complexa e reutilizável que encapsula HTML, CSS e JavaScript, incluindo lógica e estado. Componentes são usados para criar elementos de interface do usuário com comportamento e estilo próprios. Exemplo: um componente de botão em React que gerencia seu próprio estado e manipula eventos.

Question 28

Explique este conceito essencial do React JS:

Qual é a forma correta de atualizar um estado criado por useState quando é do tipo objeto?

const [greeting, setGreeting] = useState({ greet: “Hello” })

Answer 28

A prática recomendada é copiar o estado-objeto, geralmente usando o operador spread, e nessa copia alterar o valor da propriedade desejada. Por ultimo, salvar o estado usando o setter do estado.

import { useState } from "react"; 
 
export default function App() { 
  const [greeting, setGreeting] = useState({ greet: "Hello, World" }); 
  console.log(greeting, setGreeting); 
 
  function updateGreeting() { 
    const newGreeting = {...greeting}; 
    newGreeting.greet = "Hello, World-Wide Web"; 
    setGreeting(newGreeting); 
  } 
 
  return ( 
    <div> 
      <h1>{greeting.greet}</h1> 
      <button onClick={updateGreeting}>Update greeting</button> 
    </div> 
  ); 
} 

Question 29

Explique este conceito essencial do React JS:

Qual é a forma recomendada de atualizar uma única prop num estado-objeto com duas ou mais props?

const [greeting, setGreeting] = useState({greet:”Hello”,place:”World”})

Answer 29

A forma recomendada é criar uma arrow function para o setter do estado, e usar o argumento prevState, retornando um novo objeto contendo uma copia desse argumento-objeto (usando o spread operator) e substituindo apenas a prop cujo valor deve ser modificado.

import { useState } from "react"; 
 
export default function App() { 
  const [greeting, setGreeting] = useState( 
    { 
        greet: "Hello", 
        place: "World" 
    } 
  ); 
  console.log(greeting, setGreeting); 
 
  function updateGreeting() { 
    setGreeting(prevState => { 
        return {...prevState, place: "World-Wide Web"} 
    }); 
  } 
 
  return ( 
    <div> 
      <h1>{greeting.greet}, {greeting.place}</h1> 
      <button onClick={updateGreeting}>Update greeting</button> 
    </div> 
  ); 
} 

Question 30

Explique este conceito essencial do React JS:

Quando usar useReduce ou useState?

Answer 30

O hook useState é mais adequado para dados menos complexos, como tipos primitivos (strings, números, booleanos), enquanto o useReducer é ideal para dados mais complexos, como arrays e objetos. Embora haja situações em que usar useState com objetos simples seja mais prático, conforme os dados se tornam mais complexos, a manutenção do estado com useState pode ser difícil. Por outro lado, o useReducer exige mais preparação inicial, mas facilita a extensão do código conforme novos requisitos surgem. O importante é manter o código simples, fácil de entender e colaborar.

Question 31

Explique este conceito essencial do React JS:

Que tipos de dados passados como CHILDREN são ignorados na renderização do JSX?

Answer 31

false, null, undefined, e true são dados validos para como children prop, mas naõ são renderizados.

As expressões abaixo renderizam o mesmo resultado:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

Question 32

Explique este conceito essencial do React JS:

Qual a convenção de nome recomendada para HOCs?

Answer 32

O nome da HOC deveria começar com a palavra “with”, ex. “withMousePosition”, indicando que o componente original receberá alguma funcionalidade a mais (mouse position tracking) como melhoria.

Question 33

Explique este conceito essencial do React JS:

O que é “component specialization” e “component containment”?

Answer 33

São tecnicas de composição de componentes com a prop children. Com component containment criamos um componente que aje como uma caixa generica (ex. Dialog, Alert, TopBar). Ele aceita qualquer componente como children sem “conhece-lo” e o renderiza. Por outro lado, component specialization é uma especialização de um desses componentes genericos, para um uso especifico.

function ConfirmationDialog() {
  return (
    <Dialog color="blue">
      <h1 className="Dialog-title">
        Thanks!
      </h1>
      <p className="Dialog-message">
        We’ll process your order in less than 24 hours.
      </p>
    </Dialog>
  );
}

Question 34

Explique este conceito essencial do React JS:

What is a React Element?

Answer 34

É uma representação intermediária no formato de objeto plano em Javascript (plain object) que descreve uma instancia de um componente. JSX transforma o componente para este formato antes de compará-lo com o Virtual DOM e atualizar o DOM.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

Question 35

Explique este conceito essencial do React JS:

Quais são as soluções recomendadas para tratar aspectos ou funcionalidades comuns no app?

Funcionalidades que podem ser re-utilizadas

Answer 35

As soluções recomendadas para encapsular funcionalidades re-utilizaveis (cross-cutting concerns) são:

• Higher order components
• Custom hooks
• Render props pattern