venus
venus3y ago

venus – 14-11 Aug 22

Hello. I want to set state on true when is user scrolled on top/bottom, but I want to avoid re-rendering whole component on each scroll. What would you recommend me to do?
const [isReached, setIsReached] = useState({ top: false, bottom: false });

<div
onScroll={(e: any) => {
const top = e.target.scrollTop === 0;
const bottom =
e.target.scrollHeight - e.target.scrollTop ===
e.target.clientHeight;

setIsReached({ bottom: bottom, top: top });
}}
/>
const [isReached, setIsReached] = useState({ top: false, bottom: false });

<div
onScroll={(e: any) => {
const top = e.target.scrollTop === 0;
const bottom =
e.target.scrollHeight - e.target.scrollTop ===
e.target.clientHeight;

setIsReached({ bottom: bottom, top: top });
}}
/>
2 Replies
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
reactibot
reactibot3y ago
This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1011276348326686832