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