graph performance #2336
graph performance #2336
Conversation
remove unused property
|
@seeden looking into. Please give me time. |
| const stringifiedData = useMemo(() => JSONbig.stringify(data), [data]); | ||
| const freezedData = useMemo<Point[]>(() => JSONbig.parse(stringifiedData), [stringifiedData]); |
There was a problem hiding this comment.
Out of curiosity, why stringified then parse?
Was it for debug?
Since it seems there are no array/object manipulation, I think you can directly use data to get yData and xData without any side effects
| const yData = useMemo(() => freezedData.map((item) => item.y), [freezedData]); | ||
| const xData = useMemo(() => freezedData.map((item) => item.x), [freezedData]); | ||
|
|
||
| const yDataNumber = useMemo( | ||
| () => yData.map((value) => (value instanceof BigNumber ? value.toNumber() : value)), | ||
| [yData], | ||
| ); |
There was a problem hiding this comment.
Not a big deal.
I think summarizing the use of React.useMemo can slightly reduce the CPU/RAM consumption because the number of [deps] to remember / check diff is reduced.
So I'd suggest to remove yData lines and integrate it to code for yDataNumber
const yDataNumber = useMemo(
() => data.map((item) => item.y instanceof BigNumber ? item.y.toNumber() : item.y),
[data],
);| const xAxis = useMemo( | ||
| () => ({ | ||
| data: xData, | ||
| valueFormatter: xValueFormatter, | ||
| }), | ||
| [xData, xValueFormatter], | ||
| ); |
There was a problem hiding this comment.
Similar to above.
Since It seems xData is only an intermediate variable and not be used after getting the xAxis, the code to get xData can be summarized into the code for xAxis.
| const max = Math.max(min, ...data.map((item) => item.y)); | ||
| const yValueFormatter = useCallback( | ||
| (value) => { | ||
| const formatedValue = isCAT ? mojoToCAT(value) : mojoToChia(value); |
There was a problem hiding this comment.
Typo: formatedValue -> formattedValue
| const min = data.length ? Math.min(...data.map((item) => item.y)) : 0; | ||
| const max = Math.max(min, ...data.map((item) => item.y)); | ||
| const yValueFormatter = useCallback( | ||
| (value) => { |
There was a problem hiding this comment.
My VSCode complains a missing type.
According to the yValueFormatter definition by LineChart, this should be (value: number | BigNumber | null) => {
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
|
fix line graph performance