Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
To many re renders TradingView Chart in react

Good day. I have added a Chart to the SPA react app. The Chart is rendered on the page using a user effect. A orderLine also is placed on the chart. There is also an input on the page, and depending on this input, the orderLine should change. However, when the orderLine is drawn, the entire chart will be rendered as a target. Also, when I change the position of the line, I transfer the data to the same input and everything is re-rendered in the same way.

How can I fix this problem and not redraw the chart, but only the orderLine?

export const TVChartContainer = ({
                   symbol= 'Binance:BTC/USDT',
                   interval= '1D',
                   containerId = 'tv_chart_container',
                   libraryPath = '/charting_library/',
                   chartsStorageUrl = 'https://saveload.tradingview.com',
                   chartsStorageApiVersion = '1.1',
                   clientId = 'tradingview.com',
                   userId = 'public_user_id',
                   fullscreen = false,
                   autosize = true,
                   studiesOverrides = {},
                   buyLine,
                   setBuyLine,
                 }) => {
  useEffect(() => {
    const widgetOptions = {
      debug: false,
      symbol: symbol,
      datafeed: Datafeed,
      interval: interval,
      container_id: containerId,
      library_path: libraryPath,
      locale: getLanguageFromURL() || 'en',
      disabled_features: ['use_localstorage_for_settings'],
      enabled_features: ['study_templates'],
      charts_storage_url: chartsStorageUrl,
      charts_storage_api_version: chartsStorageApiVersion,
      client_id: clientId,
      user_id: userId,
      fullscreen: fullscreen,
      autosize: autosize,
      studies_overrides: studiesOverrides,
    };
    const tvWidget = new widget(widgetOptions);

    tvWidget.onChartReady(() => {
      const order = tvWidget.chart().createOrderLine()
        .setText("Buy Line")
        .onMove(function () {
          setBuyLine(order.getPrice().toFixed(2));
        })
        .setLineLength(30)
        .setLineStyle(2)
        .setPrice(buyLine)
        .setLineColor('blue')
        .setQuantity(buyLine);
    })
  }, [symbol, buyLine]);
  return (
    <div
      id={containerId}
      className={'TVChartContainer'}
    />
  );
};
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You are setting buyLine in the useEffect, and have it as a dependency, this it will be stuck in an infinite loop. Remove that dependency.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda