Reactjs: avoird rerender component for every update state

Question

This is my code:

<SymbolOverview colorTheme="light"
    autosize
    symbols={[["COINBASE:" + symbol1 + "USD"]]}
    wickDownColor="#F45B7E" />

<SymbolOverview colorTheme="light"
    autosize
    symbols={[["COINBASE:" + symbol2 + "USD"]]}
    wickDownColor="#F45B7E" />

If I set setSymbole1("BTC") , my component for symbol2 changed too.

I want only re render component for symbol1 .

By googling I found useMemo and useCallback, but I cant understand these.

Answer 1

If you components in the same page, When all page will be rendering which mean both of them will be rendering.

What you do it's use debounce to change the state "on the fly" for one component.

ref: https://www.freecodecamp.org/news/javascript-debounce-example/