Aways show PriceText and DatetimeText at the current most recent data point when cursor not selected

[colinfran]

Is there a way to always show PriceText and DatetimeText at the current most recent data point when CursorCrosshair is not being touched?

In the below gif screenshot of my project, I would like the PriceText and DatetimeText at the bottom to always show text. I am looking to make it so that I can drag the CursorCrosshair but once I let go, it defaults to going back to showing the most recent datapoint (the last datapoint in the array) resulting in PriceText and DatetimeText defaulting back to display the most recent datapoint's price and time.

[colinfran]

I currently have a hacky way but I feel like there should be a better way. This is what I do currently, but theres definitely a a delay.

I use onActivated and onEnd to change the showCurrentPrice state. When activated, showCurrentPrice is false, meaning it shows the animated text price, and when showCurrentPrice is true, it shows the default current value text price.

I just feel like theres a better way than this.

[JamesIde]

Hi @colinfran, how did you deal with your onCurrentIndexChange? I am struggling greatly trying to pass the index to update either in state or context to be used by other components, but it is triggering a re-render every time we update inside the callback. Tried memoizing the component and functions where possible. Edit - related to this issue...

[colinfran]

@JamesIde so i think you need to make sure that you are not setting your context as a dependency of the useCallback function

const onCurrentIndexChange = useCallback((index: number) => {
    setIndex(index)
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) # <---- no dependency here. Might need to add the above eslint comment if you are getting linting errors

for me, my linter was erroring telling me i needed to add setIndex as a dependency of the useCallback function. so i added the eslint comment to ignore the error.

[JamesIde]

@colinfran thanks - I understand. I actually solved my re-rendering problem by moving from Context to Zustand to avoid re-rendering for all context consumers...