use-media VS use-debounce

not react, but i did something similar in svelte: https://github.com/afreidz/t9r/blob/bca2a25c031204b107e5b7013b4306ac961b2420/frontend/src/lib/theme.ts#L3 the key being resolveConfig ... i used this lib on a react project to add those TW values into a hook for conditional rendering: https://github.com/streamich/use-media

Github

use-media - useMedia React hook to track CSS media query state

Have you ever faced the issue of managing CSS media query? useMedia hook simplified this problem in a line of code. It's a sensory hook which tracks the state of CSS media query and helps you to design & develop responsiveness apps.

Github

Debouncing is the best solution. Here is a simple lib which can help https://github.com/xnimorz/use-debounce

You should debounce your scroll-event (https://github.com/xnimorz/use-debounce) and add your state to the condition to avoid useless setState

What you're looking for is a debounce. It's not hard to implement, you can find an example here or install one from some generic hook library

use-debounce - A debounce hook for react

Tailwind Styles: https://github.com/vadimdemedes/tailwind-rn Storage: https://react-native-async-storage.github.io/async-storage/docs/api Navigation: https://reactnavigation.org/ Audio: https://docs.expo.io/versions/v41.0.0/sdk/audio/ Animations: https://github.com/oblador/react-native-animatable Modal: https://github.com/react-native-modal/react-native-modal Confetti: https://github.com/cdvntr/react-native-confetti Debounce: https://github.com/xnimorz/use-debounce Toast: https://github.com/calintamas/react-native-toast-message

useDebounce hooks - it’s name represents - used for debouncing. It is used to postpone execution to a later time like setTimeout in React Native.

I just use this for my projects: https://github.com/xnimorz/use-debounce