Performance concern with useState and useContext
Answered
MooKorea posted this in #help-forum
MooKoreaOP
Hello,
I created this neat custom slider, but I'm concerned about performance since it rapidly updates state with a context provider that wraps the entire application (scrolling with the scroll wheel also updates the state). Some sources online say to use React.memo, while other sources say to use Redux, and others say to use useMemo, useCallback... there's a lot of ways to optimize, but I'm not sure which method is most suitable for my case.
I created this neat custom slider, but I'm concerned about performance since it rapidly updates state with a context provider that wraps the entire application (scrolling with the scroll wheel also updates the state). Some sources online say to use React.memo, while other sources say to use Redux, and others say to use useMemo, useCallback... there's a lot of ways to optimize, but I'm not sure which method is most suitable for my case.
20 Replies
MooKoreaOP
bump
MooKoreaOP
last bump
Toyger
what purpose of this slider?
Cinnamon
Maybe you can use throttle?
Use a debounce hook.
Answer
@Toyger what purpose of this slider?
MooKoreaOP
it's essentially a custom horizontal scrollbar with snapping.
throttle/debounce could work, but the animation may look choppy
Hmmmmm. Lemme think about it more. You never responded so I kinda just assuemd you figured it out 😄
MooKoreaOP
I read some articles that also say to simply debounce things like scrolling, so I can assume this is the best answer
You can use a debounce that knows if its a snap point
and ignore the debounce if so
Turkish Van
@MooKorea
What if You had no slider input value tracker at all? Let's say there was just an
Following that way, yes You would still have rapid input value checks but it would be independent of the rest of the app. The state that needs to be updated would be changed only when the scroll input value is out of the boundaries of the currently active snap (that is stored inside of the state). You would also keep the smoothness.
Also, You would need an object that would hold data about the boundaries of each snap, where the boundary represents the input value.
What if You had no slider input value tracker at all? Let's say there was just an
onChange listener in the form of a function that would change a state, that holds the current active snap, only when it needs to be changed.Following that way, yes You would still have rapid input value checks but it would be independent of the rest of the app. The state that needs to be updated would be changed only when the scroll input value is out of the boundaries of the currently active snap (that is stored inside of the state). You would also keep the smoothness.
Also, You would need an object that would hold data about the boundaries of each snap, where the boundary represents the input value.
MooKoreaOP
I'm lost on what this "snippet" is
@MooKorea I'm lost on what this "snippet" is
Turkish Van
Sorry, replace the word "snippet" with "snap".
MooKoreaOP
I see
essentially I'm trying to do this, but with a custom scrollbar https://css-tricks.com/practical-css-scroll-snapping/
essentially I'm trying to do this, but with a custom scrollbar https://css-tricks.com/practical-css-scroll-snapping/