refactor

Author: hmalik88

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Container } from '@metamask/snaps-sdk/jsx';
@@ -81,66 +81,30 @@ const SnapUIRendererComponent = ({
 
   const isProgrammaticScrollRef = useRef(false);
 
-  const [scrollState, setScrollState] = useState({
-    buttonsEnabled: !requireScroll,
-    showArrow: false,
-  });
-
-  const handleScrollStateUpdate = useCallback(
-    (buttonsAreEnabled, showArrow) => {
-      if (
-        buttonsAreEnabled !== scrollState.buttonsEnabled ||
-        showArrow !== scrollState.showArrow
-      ) {
-        setScrollState({
-          buttonsEnabled: buttonsAreEnabled,
-          showArrow,
-        });
-      }
-    },
-    [scrollState],
-  );
-
-  const { scrollToBottom, ref } = useScrollRequired([], {
+  const {
+    scrollToBottom,
+    ref,
+    isScrolledToBottom,
+    hasScrolledToBottom,
+    isScrollable,
+    onScroll,
+  } = useScrollRequired([], {
     // Only enable the hook if we need to handle scroll events
     enabled: requireScroll,
-    // This lets us batch state updates and avoid an unnecessary render
-    onMeasure: ({ isScrollable: canScroll, hasMeasured }) => {
-      if (!requireScroll || !hasMeasured) {
-        return;
-      }
-
-      handleScrollStateUpdate(!canScroll, canScroll);
-    },
   });
 
-  const buttonsEnabled = useMemo(
-    () => (requireScroll ? scrollState.buttonsEnabled : true),
-    [requireScroll, scrollState.buttonsEnabled],
-  );
+  const shouldShowArrow = useMemo(() => {
+    if (!requireScroll || isScrolledToBottom || hasScrolledToBottom) {
+      return false;
+    } else if (!isScrolledToBottom && !hasScrolledToBottom && isScrollable) {
+      return true;
+    }
+    return false;
+  }, [requireScroll, isScrolledToBottom, hasScrolledToBottom, isScrollable]);
 
-  const handleScroll = useCallback(
-    (e) => {
-      if (!requireScroll) {
-        return;
-      }
-
-      const isAtBottom =
-        Math.abs(
-          e.target.scrollTop + e.target.clientHeight - e.target.scrollHeight,
-        ) < 2;
-
-      handleScrollStateUpdate(
-        scrollState.buttonsEnabled || isAtBottom,
-        !isAtBottom && scrollState.showArrow,
-      );
-    },
-    [
-      requireScroll,
-      scrollState.buttonsEnabled,
-      handleScrollStateUpdate,
-      scrollState.showArrow,
-    ],
+  const buttonsEnabled = useMemo(
+    () => (requireScroll ? !shouldShowArrow : true),
+    [requireScroll, shouldShowArrow],
   );
 
   const handleScrollToBottom = useCallback(() => {
@@ -200,15 +164,15 @@ const SnapUIRendererComponent = ({
       initialState={initialState}
       context={context}
       requireScroll={requireScroll}
-      showArrow={scrollState.showArrow}
+      showArrow={shouldShowArrow}
       buttonsEnabled={buttonsEnabled}
       scrollToBottom={handleScrollToBottom}
     >
       <Box
         className="snap-ui-renderer__content"
         data-testid="snap-ui-renderer__content"
         ref={ref}
-        onScroll={handleScroll}
+        onScroll={onScroll}
         height={BlockSize.Full}
         backgroundColor={backgroundColor}
         style={{

ui/hooks/useScrollRequired.js

@@ -12,20 +12,18 @@ import { usePrevious } from './usePrevious';
  * @param opt
  * @param {number} opt.offsetPxFromBottom
  * @param {boolean} opt.enabled
- * @param {Function} opt.onMeasure - A function to call when the scrollable content is measured. Useful for batching state updates.
  * @returns Flags for isScrollable and isScrollToBottom, a ref to use for the scrolling content, a scrollToBottom function and a onScroll handler.
  */
 export const useScrollRequired = (
   dependencies = [],
-  { offsetPxFromBottom = 16, enabled = true, onMeasure } = {},
+  { offsetPxFromBottom = 16, enabled = true } = {},
 ) => {
   const ref = useRef(null);
   const prevOffsetHeight = usePrevious(ref.current?.offsetHeight);
 
   const [hasScrolledToBottomState, setHasScrolledToBottom] = useState(!enabled);
   const [isScrollableState, setIsScrollable] = useState(false);
   const [isScrolledToBottomState, setIsScrolledToBottom] = useState(!enabled);
-  const [hasMeasured, setHasMeasured] = useState(!enabled);
 
   const update = () => {
     if (!ref.current || !enabled) {
@@ -49,16 +47,6 @@ export const useScrollRequired = (
       setIsScrollable(isScrollable);
     }
 
-    if (!hasMeasured) {
-      setHasMeasured(true);
-      // Let's us batch state updates and avoid an unnecessary render
-      // We can pass more variables to the onMeasure callback if needed
-      onMeasure?.({
-        isScrollable,
-        hasMeasured: true, // Explicitly pass as true since hasMeasured is false at this point
-      });
-    }
-
     setIsScrolledToBottom(!isScrollable || isScrolledToBottom);
 
     if (!isScrollable || isScrolledToBottom) {
@@ -87,8 +75,6 @@ export const useScrollRequired = (
   }, [ref.current?.offsetHeight]);
 
   const scrollToBottom = () => {
-    // These variables aren't reliable during programmatic scrolls, since the action is async and the state is updated syncronously
-    // we can get flickering states in the UI that depends on this hook.
     setIsScrolledToBottom(true);
     setHasScrolledToBottom(true);