DEV Community: EliasGabriel1

Utilize o conceito de elevação de estado (lifting state up) para compartilhar dados entre componentes irmãos no React.

EliasGabriel1 — Sat, 22 Apr 2023 00:37:08 +0000

O React é uma das bibliotecas JavaScript mais populares para construção de interfaces de usuário. Com o React, é possível criar componentes reutilizáveis, que são como peças de lego que podem ser combinadas para formar interfaces complexas. No entanto, uma das maiores dificuldades no desenvolvimento com React é compartilhar dados entre componentes irmãos.

O conceito de elevação de estado (lifting state up) é uma das soluções mais comuns para compartilhar dados entre componentes irmãos no React. Neste artigo, vamos explicar o que é elevação de estado e como ela funciona.

O que é elevação de estado?

Elevação de estado é um padrão de design que consiste em mover o estado compartilhado entre componentes irmãos para um ancestral comum. Em outras palavras, ao invés de cada componente irmão ter seu próprio estado, o estado é mantido em um componente pai e passado para os componentes filhos como propriedades.

O objetivo da elevação de estado é simplificar a comunicação entre componentes irmãos e tornar o código mais fácil de entender e manter.

Como funciona a elevação de estado?

Para entender como a elevação de estado funciona, vamos considerar o exemplo de uma aplicação de carrinho de compras. Suponha que temos três componentes irmãos: um componente Carrinho que mostra os itens do carrinho, um componente ListaDeProdutos que lista os produtos disponíveis para compra e um componente ItemDeProduto que representa um item de produto na lista.

Inicialmente, cada componente tem seu próprio estado. O componente ListaDeProdutos mantém uma lista de produtos disponíveis, o componente ItemDeProduto mantém o estado do produto selecionado e o componente Carrinho mantém a lista de itens no carrinho.

No entanto, para que os componentes ListaDeProdutos e Carrinho possam interagir entre si, precisamos passar informações entre eles. Isso pode ser feito usando elevação de estado. Em vez de manter o estado do carrinho no componente Carrinho, podemos movê-lo para um componente pai comum, como o componente App.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      produtos: [
        {id: 1, nome: "Camiseta", preco: 29.90},
        {id: 2, nome: "Calça", preco: 59.90},
        {id: 3, nome: "Tênis", preco: 99.90}
      ],
      itensCarrinho: []
    };
  }

  adicionarItemAoCarrinho = (produto) => {
    this.setState(prevState => ({
      itensCarrinho: [...prevState.itensCarrinho, produto]
    }));
  }

  render() {
    return (
      <div>
        <ListaDeProdutos
          produtos={this.state.produtos}
          adicionarItemAoCarrinho={this.adicionarItemAoCarrinho}
        />
        <Carrinho itens={this.state.itensCarrinho} />
      </div>
    );
  }
}

No exemplo acima, movemos o estado itensCarrinho do componente Carrinho para o componente

Utilize o hook useDebugValue para adicionar rótulos personalizados a valores no React DevTools

EliasGabriel1 — Wed, 19 Apr 2023 18:49:59 +0000

O React é uma biblioteca JavaScript popularmente utilizada para a criação de interfaces de usuário. Uma de suas principais características é a capacidade de rastrear e atualizar a árvore de elementos do DOM de forma eficiente.

Para auxiliar na depuração (debug) de uma aplicação React, é possível utilizar a ferramenta React DevTools, que permite visualizar a hierarquia de componentes e seus estados em tempo real.

O hook useDebugValue é uma ferramenta importante que pode ser utilizada em conjunto com o React DevTools para fornecer rótulos personalizados aos valores que são exibidos na ferramenta de depuração.

O que é o hook useDebugValue?

O hook useDebugValue é uma ferramenta que permite adicionar rótulos personalizados aos valores que são exibidos na ferramenta React DevTools. O hook é usado em conjunto com outros hooks do React, como useState e useEffect, e permite que um rótulo personalizado seja atribuído a um valor.

O useDebugValue é especialmente útil para valores que podem ser difíceis de entender ou que exigem um contexto adicional para serem compreendidos.

Como utilizar o hook useDebugValue?

Para utilizar o hook useDebugValue, é necessário importá-lo da biblioteca react e passar o valor a ser rotulado como parâmetro. Em seguida, é possível passar uma função como segundo parâmetro, que será responsável por fornecer o rótulo personalizado para o valor.

Por exemplo, suponha que você tenha um componente que utilize o hook useState para gerenciar o estado de um contador:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Para adicionar um rótulo personalizado para o valor count, é possível utilizar o useDebugValue da seguinte forma:

import React, { useState, useDebugValue } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  useDebugValue(count, () => `Count: ${count}`);

  return [count, setCount];
}

function Counter() {
  const [count, setCount] = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Neste exemplo, o hook useDebugValue é utilizado para adicionar o rótulo "Count: " ao valor count. Agora, quando você inspecionar o componente Counter no React DevTools, o valor count será exibido como "Count: 0" (ou "Count: 1", "Count: 2", etc., dependendo do valor atual de count).

Conclusão

O hook useDebugValue é uma ferramenta útil para adicionar rótulos personalizados aos valores que são exibidos no React DevTools. Com o uso do useDebugValue, é possível tornar mais fácil a compreensão e depuração

Utilize o hook useMemo para otimizar o desempenho de cálculos caros em componentes funcionais no React.

EliasGabriel1 — Mon, 17 Apr 2023 21:36:27 +0000

Utilize o hook useMemo para otimizar o desempenho de cálculos caros em componentes funcionais no React

O React é uma biblioteca JavaScript popular para a construção de interfaces de usuário. Uma das suas principais características é a sua capacidade de atualizar somente as partes da interface que precisam ser atualizadas, o que ajuda a melhorar o desempenho da aplicação. No entanto, se não for usado corretamente, pode haver problemas de desempenho quando a aplicação cresce. O hook useMemo é uma ferramenta útil para otimizar o desempenho de cálculos caros em componentes funcionais no React.

O que é o hook useMemo?

O hook useMemo é um hook do React que permite que você memorize o resultado de uma função. Ele é útil quando você tem uma função que leva muito tempo para ser executada e essa função é chamada repetidamente, resultando em um desempenho ruim da aplicação.

O hook useMemo aceita dois argumentos. O primeiro é uma função que realiza os cálculos que você deseja memorizar. O segundo é um array de dependências. Se as dependências não mudarem entre as renderizações do componente, o useMemo retornará o resultado memorizado. Se as dependências mudarem, o useMemo executará a função novamente e atualizará o resultado memorizado.

Como usar o hook useMemo para otimizar o desempenho?

Vamos dar um exemplo para ilustrar como usar o hook useMemo para otimizar o desempenho. Suponha que você tenha um componente que calcula a soma de todos os números de 1 a N, onde N é um valor passado como prop para o componente.

jsxCopy codeimport React, { useMemo } from 'react';

function Sum({ n }) {

  const sum = useMemo(() => {

    let result = 0;

    for (let i = 1; i <= n; i++) {

      result += i;

    }

    return result;

  }, [n]);

return <div>{sum}</div>;

}

Neste exemplo, a função sum é passada como argumento para o hook useMemo. O array de dependências contém apenas a variável N, indicando que o useMemo deve atualizar o resultado memorizado apenas se N mudar. O resultado memorizado é armazenado na variável sum, que é usada no retorno do componente. Dessa forma, a função sum é chamada apenas uma vez quando o componente é renderizado pela primeira vez ou quando o valor de N mudar.

Conclusão

O hook useMemo é uma ferramenta poderosa para otimizar o desempenho de cálculos caros em componentes funcionais no React. Ele permite que você memorize o resultado de uma função e atualize apenas quando as dependências mudarem. Isso pode melhorar significativamente o desempenho da sua aplicação, especialmente quando você está lidando com cálculos complexos ou grandes conjuntos de dados. Lembre-se sempre de analisar e otimizar o desempenho da sua aplicação para garantir uma boa experiência do usuário.

Quais os principais hooks do react?

EliasGabriel1 — Fri, 14 Apr 2023 20:41:31 +0000

Os Hooks são uma feature introduzida no React a partir da versão 16.8, que permite que os desenvolvedores usem state e outras características do React em componentes de função, sem a necessidade de usar classes. Existem vários Hooks disponíveis no React, e os principais são:

useState: Hook para gerenciar estado interno em componentes de função
useEffect: Hook para lidar com efeitos colaterais em componentes de função
useContext: Hook para acessar o contexto (Context) do React
useReducer: Hook para gerenciar estado complexo usando um reducer
useCallback: Hook para criar funções memorizadas em componentes de função
useMemo: Hook para memoizar cálculos em componentes de função

Em detalhes seria:
`useState: Este Hook permite que os componentes de função tenham estado interno, permitindo que eles gerenciem e atualizem valores de estado. É a alternativa ao uso de this.state` em componentes de classe. A sintaxe básica é:

const [state, setState] = useState(initialState);

useEffect: Este Hook permite que os componentes de função tenham efeitos colaterais, como buscar dados de APIs externas, atualizar o DOM ou gerenciar subscrições. É a alternativa ao uso de componentDidMount, componentDidUpdate e componentWillUnmount em componentes de classe. A sintaxe básica é:

useEffect(() => {
  // Lógica do efeito colateral
  return () => {
    // Limpeza do efeito colateral (opcional)
  }
}, [dependencies]);

useContext: Este Hook permite que os componentes de função acessem o contexto (Context) do React, que é uma forma de compartilhar dados entre componentes sem a necessidade de passar props manualmente. A sintaxe básica é:

const contextValue = useContext(MyContext);

useReducer: Este Hook permite que os componentes de função gerenciem estados complexos usando um reducer, seguindo o padrão de design de estado do Redux. É uma alternativa ao uso de setState em componentes de função. A sintaxe básica é:

const [state, dispatch] = useReducer(reducer, initialState);

useCallback: Este Hook permite que os componentes de função criem funções memorizadas que não são recriadas em cada renderização, o que pode ser útil em casos onde é importante otimizar a performance. A sintaxe básica é:

const memoizedCallback = useCallback(() => {
  // Lógica da função
}, [dependencies]);

useMemo: Este Hook permite que os componentes de função realizem memoização de cálculos, evitando recálculos desnecessários em cada renderização. É útil para otimizar a performance em casos onde o cálculo é computacionalmente custoso. A sintaxe básica é:

const memoizedValue = useMemo(() => {
  // Lógica do cálculo
}, [dependencies]);

Esses são os principais Hooks do React, mas existem outros Hooks disponíveis, como useRef, useImperativeHandle, useLayoutEffect, entre outros. É importante consultar a documentação oficial do React para entender melhor cada um deles e saber quando utilizá-los em suas aplicações. Os Hooks são uma poderosa ferramenta que torna a escrita de componentes de função mais simples e eficiente, permitindo que os desenvolvedores aproveitem ao máximo o poder do React.

Obrigado! se tu chegou até o final desse artigo, compartilhe esse artigo com algum amigo que você acha que gostaria de entender os conceitos básicos do react <3

Qual a diferença entre .map, .for e .forEach?

EliasGabriel1 — Thu, 13 Apr 2023 19:44:21 +0000

A diferença entre os métodos .map(), .for e .forEach está relacionada à forma como eles são usados para percorrer e manipular elementos de uma lista (ou matriz) em JavaScript.

.map(): É um método de array que cria um novo array com os resultados de uma função de callback aplicada a cada elemento do array original. Ele retorna um novo array com o mesmo tamanho do array original, onde cada elemento é transformado de acordo com a lógica definida na função de callback. O array original não é modificado durante o processo. Veja um exemplo:

.for: É uma estrutura de loop tradicional em JavaScript, que permite percorrer um array usando um contador e uma condição de parada. É uma forma mais antiga e manual de percorrer um array, onde é necessário gerenciar manualmente o índice e acessar cada elemento usando a sintaxe array[indice]. É útil quando se precisa de um controle mais detalhado sobre o loop, como percorrer o array em ordem inversa, saltar elementos ou interromper o loop antecipadamente. Veja um exemplo:

.forEach: É um método de array que também percorre cada elemento de um array, aplicando uma função de callback a cada elemento. No entanto, diferentemente do .map(), o método .forEach não cria um novo array com os resultados da função de callback, ele simplesmente executa a função em cada elemento do array original. Ele não retorna um novo array e não permite a transformação direta dos elementos do array original. Veja um exemplo:

Em resumo, a principal diferença entre .map(), .for e .forEach está na forma como eles manipulam os elementos do array e retornam ou não um novo array com os resultados da operação. O .map() é ideal quando se deseja transformar os elementos de um array em um novo array, o .for é útil quando se precisa de um controle mais detalhado sobre o loop, e o .forEach é adequado quando se deseja apenas executar uma função em cada elemento do array original.

Em suma, o método .map() é projetado para criar um novo array com os resultados da aplicação de uma função de callback a cada elemento de um array original. Ele retorna um novo array com o mesmo número de elementos do array original, onde cada elemento é transformado de acordo com a lógica definida na função de callback. Portanto, se você estiver apenas interessado em percorrer os elementos de um array sem criar um novo array com os resultados da transformação, usar o .map() pode ser desnecessário e até mesmo ineficiente.

Além disso, o .map() tem uma expectativa implícita de que você retornará um valor para cada elemento do array original em sua função de callback. Se você não retornar um valor específico, o resultado do .map() será um novo array com elementos undefined. Por outro lado, os loops tradicionais como o .for e o .forEach não têm essa expectativa, permitindo maior flexibilidade em como você manipula os elementos do array durante o loop.

Outra consideração é que o .map() cria um novo array a cada vez que é chamado, o que pode causar impacto na performance em casos onde se trabalha com arrays muito grandes, pois a criação de um novo array consome recursos de memória e processamento. Em contraste, um loop tradicional como o .for ou o .forEach não cria um novo array, o que pode ser mais eficiente em termos de performance.

Portanto, não é que seja "errado" usar o .map() para fazer um loop, mas é importante entender suas características e considerar se é a melhor opção em cada situação específica. Em algumas situações, um loop tradicional como o .for ou o .forEach pode ser mais adequado, especialmente quando você não precisa criar um novo array com os resultados da transformação dos elementos do array original, ou quando precisa de maior flexibilidade na manipulação dos elementos durante o loop.

Utilize o spread operator para copiar objetos e arrays de forma imutável.

EliasGabriel1 — Wed, 12 Apr 2023 18:30:26 +0000

O spread operator é uma funcionalidade introduzida no JavaScript ES6 (ECMAScript 2015) que permite copiar objetos e arrays de forma imutável. O spread operator é representado pelo operador de reticências (...) e pode ser usado para criar novos objetos ou arrays com cópias independentes de elementos existentes. Vamos dar uma olhada em como usar o spread operator para copiar objetos e arrays de forma imutável.

Copiando Objetos com o Spread Operator:

Para copiar um objeto de forma imutável, podemos usar o spread operator da seguinte forma:

javascriptconst obj1 = { foo: 'bar', baz: 'qux' };

// Copiando obj1 para obj2 usando spread operator

const obj2 = { ...obj1 };

// Alterando o valor de uma propriedade em obj2

obj2.foo = 'baz';

console.log(obj1); // { foo: 'bar', baz: 'qux' }

console.log(obj2); // { foo: 'baz', baz: 'qux' }

No exemplo acima, usamos o spread operator {...obj1} para criar um novo objeto obj2 com as mesmas propriedades e valores de obj1. Em seguida, modificamos o valor da propriedade foo em obj2, mas isso não afetou o valor da mesma propriedade em obj1, uma vez que obj2 é uma cópia independente de obj1.

Copiando Arrays com o Spread Operator:

Podemos usar o spread operator para copiar arrays de forma imutável também. Veja o exemplo abaixo:

javascriptconst arr1 = [1, 2, 3, 4, 5];

// Copiando arr1 para arr2 usando spread operator

const arr2 = [...arr1];

// Modificando arr2

arr2.push(6);


console.log(arr1); // [1, 2, 3, 4, 5]


console.log(arr2); // [1, 2, 3, 4, 5, 6]

No exemplo acima, usamos o spread operator [...arr1] para criar um novo array arr2 com os mesmos elementos de arr1. Em seguida, adicionamos um novo elemento ao final de arr2, mas isso não afetou o valor de arr1, uma vez que arr2 é uma cópia independente de arr1.

Vantagens da Cópia Imutável com o Spread Operator:

A cópia imutável com o spread operator tem várias vantagens, incluindo:

Prevenção de efeitos colaterais: Quando objetos ou arrays são copiados de forma imutável, quaisquer alterações feitas nas cópias não afetam os originais. Isso ajuda a prevenir efeitos colaterais indesejados em seu código.
Independência das referências: As cópias feitas com o spread operator são independentes das referências originais. Isso significa que as alterações feitas nas cópias não afetam as referências originais, tornando mais fácil gerenciar o estado de objetos e arrays em seu código.
Facilidade de uso: O spread operator é uma sintaxe concisa e fácil de usar para criar cópias de objetos e arrays. É amplamente suportado em navegadores modernos e também é amplamente utilizado em frameworks e bibliotecas populares do JavaScript.

Flexibilidade: O spread operator pode ser combinado com outras funcionalidades do JavaScript, como destructuring e rest parameters, para criar cópias mais complexas de objetos e arrays, ou para realizar transformações em elementos copiados.
Performance: Embora a cópia imutável com o spread operator possa parecer criar novos objetos ou arrays, na verdade, muitas implementações modernas de JavaScript otimizam o uso do spread operator para melhorar a performance. Isso ocorre porque o spread operator permite a propagação de elementos diretamente, em vez de criar cópias profundas de objetos ou arrays, o que pode ser mais eficiente em termos de desempenho.

Em resumo, o spread operator é uma poderosa ferramenta que permite copiar objetos e arrays de forma imutável no JavaScript. Ele ajuda a evitar efeitos colaterais, fornece independência das referências, é fácil de usar e oferece flexibilidade e bom desempenho. Se você precisa trabalhar com objetos ou arrays em seu código JavaScript e deseja garantir a imutabilidade, o spread operator é uma opção eficaz para copiar esses elementos de forma segura.

Utilize a desestruturação (destructuring) para extrair valores de objetos e arrays de forma mais concisa e legível.

EliasGabriel1 — Tue, 11 Apr 2023 19:20:17 +0000

A desestruturação (destructuring) é uma funcionalidade poderosa do JavaScript que permite extrair valores de objetos e arrays de forma mais concisa e legível. Ela foi introduzida no ECMAScript 6 (ES6) e é amplamente utilizada em código moderno para simplificar a manipulação de dados.

Vamos explorar como utilizar a desestruturação para extrair valores de objetos e arrays de forma eficiente:

1.Desestruturação de objetos:
Podemos extrair valores de objetos utilizando a sintaxe de desestruturação. Por exemplo, suponha que temos o seguinte objeto:

Podemos extrair os valores das propriedades nome, idade e cidade do objeto pessoa da seguinte forma:

Isso nos permite criar variáveis com os mesmos nomes das propriedades do objeto e atribuir automaticamente os valores correspondentes.

Também podemos definir valores padrão caso a propriedade não exista no objeto:

2.Desestruturação de arrays:
Podemos extrair valores de arrays utilizando a sintaxe de desestruturação. Por exemplo, suponha que temos o seguinte array:

Podemos extrair os valores dos elementos do array numeros da seguinte forma:

Também podemos utilizar a sintaxe de desestruturação com o operador rest (...) para extrair uma parte do array e atribuí-la a uma nova variável:

3.Desestruturação em parâmetros de função:
Podemos utilizar a desestruturação em parâmetros de função para extrair os valores de objetos ou arrays passados como argumentos de forma mais concisa. Por exemplo:

Isso nos permite extrair os valores diretamente dos parâmetros da função, sem precisar acessar as propriedades do objeto dentro do corpo da função.

Além disso, também podemos utilizar a desestruturação em parâmetros de função com valores padrão, assim como fizemos com a desestruturação de objetos. Por exemplo:

Isso nos permite definir valores padrão para as propriedades do objeto caso elas não sejam passadas como argumentos.

Em resumo, a desestruturação (destructuring) é uma ferramenta poderosa do JavaScript que nos permite extrair valores de objetos e arrays de forma concisa e legível. É uma técnica muito utilizada em código moderno para simplificar a manipulação de dados e tornar o código mais eficiente e fácil de entender. É importante estar familiarizado com essa funcionalidade e utilizá-la em seu código JavaScript e React para escrever um código mais limpo e eficiente.