Resolvendo uma questão prática de React

Começar a programar em React pode ser um desafio, especialmente quando nos deparamos com problemas práticos. Um exemplo recente compartilhado na comunidade de desenvolvedores envolve a criação de um componente ProgressBar que se adiciona dinamicamente ao clicar em um botão. Vamos explorar esse problema e entender como ele pode ser resolvido, mergulhando no código e nas nuances do React.

## Desafio do Componente React ProgressBar

O problema central é adicionar um componente ProgressBar ao clicar em um botão. A ideia é que, cada vez que o botão “Adicionar” é clicado, uma nova barra de progresso seja exibida na tela. Para solucionar isso, o código utiliza o useState do React para controlar o número de barras de progresso e renderizá-las dinamicamente.

### Código do Componente App.jsx

O componente App.jsx é responsável por gerenciar o estado e a renderização das barras de progresso. Aqui está o código:

“`jsx
import { useState } from ‘react’;
import ‘./App.css’;
import ProgressBar from ‘./components/ProgressBar’;

const App = () => {
const [progressBarCount, setProgressBarCount] = useState(0);
let arr = [];

const handleButtonClick = () => {
setProgressBarCount((prevValue) => prevValue + 1);
};

for (let i = 0; i < progressBarCount; i++) { arr.push();
}

return (
<>

{arr}

);
};

export default App;
“`

Neste código, o useState é usado para criar uma variável de estado chamada progressBarCount, que armazena o número de barras de progresso a serem exibidas. A função handleButtonClick incrementa esse contador cada vez que o botão é clicado. Um loop for cria um array de componentes ProgressBar, que são então renderizados na tela.

### Código do Componente ProgressBar.jsx

O componente ProgressBar.jsx é responsável por exibir e animar a barra de progresso. Veja o código:

“`jsx
import { useState, useEffect } from ‘react’;

const ProgressBar = () => {
const [width, setWidth] = useState(0);

useEffect(() => {
const timeoutId = setTimeout(() => {
setWidth((prevValue) => {
const newValue = prevValue + 1;
return newValue > 100 ? 100 : newValue;
});
}, 50);

return () => clearTimeout(timeoutId);
}, []);

return (

);
};

export default ProgressBar;
“`

Aqui, o useState é usado para controlar a largura da barra de progresso. O useEffect é utilizado para criar um efeito que incrementa a largura da barra a cada 50 milissegundos. Quando a largura atinge 100%, o setTimeout é limpo para evitar que a barra continue a crescer indefinidamente.

## Refatorando o Código para Melhor Performance

Embora o código funcione, ele pode ser otimizado para melhor performance e clareza. Aqui estão algumas sugestões:

* **Utilizar useEffect no componente ProgressBar:** O efeito de incremento da largura da barra deve ser encapsulado dentro de um useEffect para evitar múltiplas chamadas e melhorar a performance.
* **Adicionar uma chave única para cada ProgressBar:** Isso ajuda o React a identificar e atualizar os componentes de forma eficiente.
* **Garantir que o valor não ultrapasse 100%:** Adicionar uma condição para que a barra pare de crescer quando atingir o limite máximo.

### Código Refatorado do Componente ProgressBar.jsx

“`jsx
import { useState, useEffect } from ‘react’;

const ProgressBar = () => {
const [width, setWidth] = useState(0);

useEffect(() => {
const timeoutId = setTimeout(() => {
setWidth((prevValue) => {
const newValue = prevValue + 1;
return newValue > 100 ? 100 : newValue;
});
}, 50);

return () => clearTimeout(timeoutId);
}, []);

return (

);
};

export default ProgressBar;
“`

## Considerações Finais sobre o React ProgressBar component

Resolver problemas práticos como este é uma ótima maneira de aprimorar suas habilidades em React. Ao entender os conceitos por trás do useState, useEffect e da renderização condicional, você estará mais preparado para enfrentar desafios maiores e criar aplicativos mais complexos e performáticos. Além disso, não deixe de conferir outras novidades como o lançamento de SDK de Agentes pela OpenAI.

Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.

Via DEV Community

Leave a Comment