Skip to content

Commit

Permalink
[native] Memoize PanGestureHandler props in SwipeableMessage
Browse files Browse the repository at this point in the history
Summary:
Based on flamegraph from profiler, it looks like A. creating `SwipeSnake`s and `PanGestureHandler` in `SwipeableMessage` is expensive B. because we're not memoizing things as carefully as we could be we're eating this cost multiple times.

In this diff I just memoize the `PanGestureHandler` props. In the subsequent diff I'll add some more memoization to this component specifically wrt the `SwipeSnake`s

---

Depends on D9052

Test Plan:
"Before":

{F736395}

Will do another round of profiling after the subsequent diff to show improvement.

Reviewers: ginsu, tomek, rohan

Reviewed By: tomek

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D9053
  • Loading branch information
atulsmadhugiri committed Sep 5, 2023
1 parent 7d901c2 commit 46ac62e
Showing 1 changed file with 11 additions and 5 deletions.
16 changes: 11 additions & 5 deletions native/chat/swipeable-message.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ import type { ViewStyle } from '../types/styles.js';
const primaryThreshold = 40;
const secondaryThreshold = 120;

const panGestureHandlerActiveOffsetX = [-4, 4];
const panGestureHandlerFailOffsetY = [-5, 5];

function dividePastDistance(value, distance, factor) {
'worklet';
const absValue = Math.abs(value);
Expand Down Expand Up @@ -239,6 +242,11 @@ function SwipeableMessage(props: Props): React.Node {

const { contentStyle, children } = props;

const panGestureHandlerStyle = React.useMemo(
() => [contentStyle, transformContentStyle],
[contentStyle, transformContentStyle],
);

if (!triggerReply && !triggerSidebar) {
return (
<PanGestureHandler enabled={false}>
Expand Down Expand Up @@ -305,15 +313,13 @@ function SwipeableMessage(props: Props): React.Node {
snakes.push(
<PanGestureHandler
maxPointers={1}
activeOffsetX={[-4, 4]}
activeOffsetX={panGestureHandlerActiveOffsetX}
onGestureEvent={swipeEvent}
failOffsetX={isViewer ? 5 : -5}
failOffsetY={[-5, 5]}
failOffsetY={panGestureHandlerFailOffsetY}
key="gesture"
>
<Animated.View style={[contentStyle, transformContentStyle]}>
{children}
</Animated.View>
<Animated.View style={panGestureHandlerStyle}>{children}</Animated.View>
</PanGestureHandler>,
);

Expand Down

0 comments on commit 46ac62e

Please sign in to comment.