charts re-rendered everytime when changing other input components

[yechanpark]

hi. i'm using this, thanks for your service.

but i have some issues.

i'm drawing multiple small charts in one page. (8 charts) and, there are some other input components for changing charts symbol. (for example, Selector or TextField or Pagination in React Material-ui)

when i changed the state of these (changing selector value or update textfield value), all of charts has re-rendered every time.

following is some example code and screenshot.

code example 1. when update text, all of charts has re-rendered

import React, {useState} from "react";
import {AdvancedRealTimeChart} from "react-ts-tradingview-widgets";
import {TextField} from "@material-ui/core";

const TestPage = () => {
    const [text, setText] = useState("");

    // symbols will be changed in future via pagination or selector
    const [symbols, setSymbols] = useState([
        "BINANCE:BTCUSDT",
        "BINANCE:XRPUSDT",
        "BINANCE:DOGEUSDT",
        "BINANCE:WAVESUSDT",
        "BINANCE:YFIUSDT",
        "BINANCE:ETHUSDT",
        "BINANCE:MKRUSDT",
        "BINANCE:ILVUSDT",
    ]);

    return (
        <div>
            <TextField
                id="SearchText"
                label="Text"
                variant="outlined"
                value={text}
                onInput={e => setText(e.target.value)}
            />
            {symbols.map((it, index) => (
                <AdvancedRealTimeChart
                    width={500} height={300}
                    symbol={it}
                    container_id={index.toString()}
                />
            ))}
        </div>
    );
}

export default TestPage;

textfield is not associated charts at all. but charts re-rendered everytime when changing textfield value.

how can i fix this?

[yechanpark]

i think this is not library issue, i will fix this myself

-- i solved this via React.memo()

[JorrinKievit]

Hey, was about to answer with the same solution ;). Glad you figured it out!