diff --git a/__typetests__/common/useComposedEventHandlerTest.tsx b/__typetests__/common/useComposedEventHandlerTest.tsx
new file mode 100644
index 00000000000..20dc975bc89
--- /dev/null
+++ b/__typetests__/common/useComposedEventHandlerTest.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import Animated, {
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+  useEvent,
+} from '../..';
+import { Text } from 'react-native';
+import type { ReanimatedEvent } from '../..';
+
+function useComposedEventHandlerTest() {
+  function useComposedEventHandlerTestDifferentHandlers() {
+    function useCustomScrollHandler(
+      handler: (event: ReanimatedEvent<object>) => void
+    ) {
+      return useEvent(
+        (event) => {
+          'worklet';
+          handler(event);
+        },
+        ['onScroll']
+      );
+    }
+
+    const onScrollCustomHandler = useCustomScrollHandler((e) => {
+      'worklet';
+      console.log(`custom scroll handler invoked on ${e.eventName}`);
+    });
+
+    const onScrollHandler = useAnimatedScrollHandler((e) => {
+      console.log(`scroll handler invoked on ${e.eventName}`);
+    });
+
+    const composedHandler = useComposedEventHandler([
+      onScrollHandler,
+      onScrollCustomHandler,
+    ]);
+
+    return (
+      <>
+        <Animated.ScrollView onScroll={composedHandler}>
+          {[...new Array(20)].map((_each, index) => (
+            <Text>{index}</Text>
+          ))}
+        </Animated.ScrollView>
+      </>
+    );
+  }
+
+  function useComposedEventHandlerTestDifferentProps() {
+    const onDragBeginHandler = useAnimatedScrollHandler({
+      onBeginDrag(e) {
+        'worklet';
+        console.log('Drag begin');
+      },
+    });
+
+    const onDragEndHandler = useAnimatedScrollHandler({
+      onEndDrag(e) {
+        'worklet';
+        console.log('Drag end');
+      },
+    });
+
+    const composedHandler1 = useComposedEventHandler([
+      onDragBeginHandler,
+      onDragEndHandler,
+    ]);
+
+    const composedHandler2 = useComposedEventHandler([
+      onDragBeginHandler,
+      onDragEndHandler,
+    ]);
+
+    return (
+      <>
+        <Animated.ScrollView
+          // This will work well thanks to the way it is filtered in `PropsFilter`.
+          onMomentumScrollBegin={composedHandler1}
+          // same as above
+          onMomentumScrollEnd={composedHandler2}>
+          {[...new Array(20)].map((_each, index) => (
+            <Text>{index}</Text>
+          ))}
+        </Animated.ScrollView>
+      </>
+    );
+  }
+}
diff --git a/app/src/examples/ComposedHandlerConditionalExample.tsx b/app/src/examples/ComposedHandlerConditionalExample.tsx
new file mode 100644
index 00000000000..f8c8e030bd8
--- /dev/null
+++ b/app/src/examples/ComposedHandlerConditionalExample.tsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { Text, View, StyleSheet, Button } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+} from 'react-native-reanimated';
+
+export default function ComposedHandlerConditionalExample() {
+  const [toggleFirst, setToggleFirst] = React.useState(true);
+  const [toggleSecond, setToggleSecond] = React.useState(true);
+  const [toggleThird, setToggleThird] = React.useState(true);
+
+  const handlerFunc = React.useCallback(
+    (handlerName: string, eventName: string) => {
+      'worklet';
+      console.log(`${handlerName} handler: ${eventName}`);
+    },
+    []
+  );
+
+  const firstHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      handlerFunc('first', e.eventName);
+    },
+  });
+
+  const secondHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      handlerFunc('second', e.eventName);
+    },
+  });
+
+  const thirdHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      handlerFunc('third', e.eventName);
+    },
+  });
+
+  const composedHandler = useComposedEventHandler([
+    toggleFirst ? firstHandler : null,
+    toggleSecond ? secondHandler : null,
+    toggleThird ? thirdHandler : null,
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.infoText}>Check console logs!</Text>
+      <ToggleButton
+        name={'first'}
+        isToggled={toggleFirst}
+        onPressFunc={() => setToggleFirst(!toggleFirst)}
+      />
+      <ToggleButton
+        name={'second'}
+        isToggled={toggleSecond}
+        onPressFunc={() => setToggleSecond(!toggleSecond)}
+      />
+      <ToggleButton
+        name={'third'}
+        isToggled={toggleThird}
+        onPressFunc={() => setToggleThird(!toggleThird)}
+      />
+      <Animated.FlatList
+        onScroll={composedHandler}
+        style={styles.list}
+        data={items}
+        renderItem={({ item }) => <Item title={item.title} />}
+        keyExtractor={(item) => `A:${item.title}`}
+      />
+    </View>
+  );
+}
+
+type ToggleProps = {
+  name: string;
+  isToggled: boolean;
+  onPressFunc: () => void;
+};
+const ToggleButton = ({ name, isToggled, onPressFunc }: ToggleProps) => (
+  <View style={styles.toggleContainer}>
+    <View
+      style={[
+        styles.toggleIcon,
+        isToggled ? styles.toggleON : styles.toggleOFF,
+      ]}
+    />
+    <Button
+      title={`Toggle ${name} handler ${isToggled ? 'OFF' : 'ON'}`}
+      onPress={onPressFunc}
+    />
+  </View>
+);
+
+type ItemValue = { title: string };
+const items: ItemValue[] = [...new Array(101)].map((_each, index) => {
+  return { title: `${index}` };
+});
+
+type ItemProps = { title: string };
+const Item = ({ title }: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  infoText: {
+    fontSize: 19,
+    alignSelf: 'center',
+  },
+  list: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: '#883ef0',
+    alignItems: 'center',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 20,
+  },
+  title: {
+    fontSize: 32,
+  },
+  toggleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toggleIcon: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 3,
+    borderColor: 'black',
+  },
+  toggleON: {
+    backgroundColor: '#7CFC00',
+  },
+  toggleOFF: {
+    backgroundColor: 'red',
+  },
+});
diff --git a/app/src/examples/ComposedHandlerDifferentEventsExample.tsx b/app/src/examples/ComposedHandlerDifferentEventsExample.tsx
new file mode 100644
index 00000000000..5bb7a31e189
--- /dev/null
+++ b/app/src/examples/ComposedHandlerDifferentEventsExample.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+} from 'react-native-reanimated';
+
+export default function ComposedHandlerDifferentEventsExample() {
+  const handlerFunc = React.useCallback(
+    (handlerName: string, eventName: string) => {
+      'worklet';
+      console.log(`${handlerName} handler: ${eventName}`);
+    },
+    []
+  );
+
+  const onScrollHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      handlerFunc('scroll', e.eventName);
+    },
+  });
+
+  const onDragHandler = useAnimatedScrollHandler({
+    onBeginDrag(e) {
+      handlerFunc('drag', e.eventName);
+    },
+    onEndDrag(e) {
+      handlerFunc('drag', e.eventName);
+    },
+  });
+
+  const onMomentumHandler = useAnimatedScrollHandler({
+    onMomentumBegin(e) {
+      handlerFunc('momentum', e.eventName);
+    },
+    onMomentumEnd(e) {
+      handlerFunc('momentum', e.eventName);
+    },
+  });
+
+  const composedHandler = useComposedEventHandler([
+    onScrollHandler,
+    onDragHandler,
+    onMomentumHandler,
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.infoText}>Check console logs!</Text>
+      <Animated.FlatList
+        onScroll={composedHandler}
+        style={styles.list}
+        data={items}
+        renderItem={({ item }) => <Item title={item.title} />}
+        keyExtractor={(item) => `A:${item.title}`}
+      />
+    </View>
+  );
+}
+
+type ItemValue = { title: string };
+const items: ItemValue[] = [...new Array(101)].map((_each, index) => {
+  return { title: `${index}` };
+});
+
+type ItemProps = { title: string };
+const Item = ({ title }: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  infoText: {
+    fontSize: 19,
+    alignSelf: 'center',
+  },
+  list: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: '#66e3c0',
+    alignItems: 'center',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 20,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
diff --git a/app/src/examples/ComposedHandlerInternalMergingExample.tsx b/app/src/examples/ComposedHandlerInternalMergingExample.tsx
new file mode 100644
index 00000000000..abfaf0289b0
--- /dev/null
+++ b/app/src/examples/ComposedHandlerInternalMergingExample.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import Animated, {
+  EventHandlerProcessed,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useComposedEventHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+export default function ComposedHandlerInternalMergingExample() {
+  const sv = useSharedValue(0);
+
+  const onScrollHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      'worklet';
+      sv.value = sv.value + 1;
+      console.log(`scroll handler: ${e.eventName} ${sv.value}`);
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.infoText}>Check console logs!</Text>
+      <ColorChangingList additionalHandler={onScrollHandler} />
+    </View>
+  );
+}
+
+const ColorChangingList = ({
+  additionalHandler,
+}: {
+  additionalHandler: EventHandlerProcessed<
+    NativeSyntheticEvent<NativeScrollEvent>
+  >;
+}) => {
+  const offsetSv = useSharedValue(0);
+
+  const internalHandler = useAnimatedScrollHandler({
+    onScroll(e) {
+      const scaledValue = e.contentOffset.y % 600;
+      offsetSv.value =
+        scaledValue <= 300
+          ? (scaledValue / 600) * 255
+          : ((600 - scaledValue) / 600) * 255;
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: `rgb(${offsetSv.value},30,${255 - offsetSv.value})`,
+    };
+  });
+
+  const composedHandler = useComposedEventHandler([
+    internalHandler,
+    additionalHandler,
+  ]);
+
+  return (
+    <Animated.FlatList
+      onScroll={composedHandler}
+      style={[styles.list, animatedStyle]}
+      data={items}
+      renderItem={({ item }) => <Item title={item.title} />}
+      keyExtractor={(item) => `A:${item.title}`}
+    />
+  );
+};
+
+type ItemProps = { title: string };
+const Item = ({ title }: ItemProps) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+type ItemValue = { title: string };
+const items: ItemValue[] = [...new Array(101)].map((_each, index) => {
+  return { title: `${index}` };
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  infoText: {
+    fontSize: 19,
+    alignSelf: 'center',
+  },
+  list: {
+    flex: 1,
+  },
+  item: {
+    backgroundColor: 'white',
+    alignItems: 'center',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 20,
+  },
+  title: {
+    fontSize: 32,
+  },
+});
diff --git a/app/src/examples/index.ts b/app/src/examples/index.ts
index 9d080afe683..a2e29071c96 100644
--- a/app/src/examples/index.ts
+++ b/app/src/examples/index.ts
@@ -123,6 +123,9 @@ import HabitsExample from './LayoutAnimations/HabitsExample';
 import MemoExample from './MemoExample';
 import PerformanceMonitorExample from './PerfomanceMonitorExample';
 import ScreenTransitionExample from './ScreenTransitionExample';
+import ComposedHandlerConditionalExample from './ComposedHandlerConditionalExample';
+import ComposedHandlerDifferentEventsExample from './ComposedHandlerDifferentEventsExample';
+import ComposedHandlerInternalMergingExample from './ComposedHandlerInternalMergingExample';
 import BorderRadiiExample from './SharedElementTransitions/BorderRadii';
 import FreezingShareablesExample from './ShareableFreezingExample';
 
@@ -499,6 +502,21 @@ export const EXAMPLES: Record<string, Example> = {
     title: 'Performance monitor',
     screen: PerformanceMonitorExample,
   },
+  ComposedHandlerConditionalExample: {
+    icon: '🎛️',
+    title: 'Composed handler conditional compose',
+    screen: ComposedHandlerConditionalExample,
+  },
+  ComposedHandlerDifferentEventsExample: {
+    icon: '📣',
+    title: 'Composed handler different events',
+    screen: ComposedHandlerDifferentEventsExample,
+  },
+  ComposedHandlerInternalMergingExample: {
+    icon: '🪢',
+    title: 'Composed handler internal merging',
+    screen: ComposedHandlerInternalMergingExample,
+  },
 
   // Old examples
 
diff --git a/docs/docs/advanced/dispatchCommand.mdx b/docs/docs/advanced/dispatchCommand.mdx
index 13bc135e120..035b1ee9e9d 100644
--- a/docs/docs/advanced/dispatchCommand.mdx
+++ b/docs/docs/advanced/dispatchCommand.mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # dispatchCommand
diff --git a/docs/docs/advanced/setNativeProps.mdx b/docs/docs/advanced/setNativeProps.mdx
index f54b8cf1510..02a5a743b11 100644
--- a/docs/docs/advanced/setNativeProps.mdx
+++ b/docs/docs/advanced/setNativeProps.mdx
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # setNativeProps
diff --git a/docs/docs/advanced/useComposedEventHandler.mdx b/docs/docs/advanced/useComposedEventHandler.mdx
new file mode 100644
index 00000000000..117f5b650ab
--- /dev/null
+++ b/docs/docs/advanced/useComposedEventHandler.mdx
@@ -0,0 +1,74 @@
+---
+sidebar_position: 6
+---
+
+# useComposedEventHandler
+
+This is a hook that lets you compose [useEvent](/docs/advanced/useEvent)-based event handlers (such as [useAnimatedScrollHandler](/docs/scroll/useAnimatedScrollHandler) or your own custom ones) into a single, combined event handler.
+
+### Arguments
+
+#### `handlers`
+
+An array of event handlers created using [useEvent](/docs/advanced/useEvent) hook. `useComposedEventHandler` hook reacts to any changes in given handlers and rebuilds whenever it is needed.
+
+### Returns
+
+The hook returns a handler object that can be hooked into any [`Animated component`](/docs/fundamentals/glossary#animated-component).
+The handler should be passed to a corresponding `onEvent` prop (e.g. `onScroll` when working with scroll-related handlers). If your composed handler aggregates multiple events that have little in common, put it into a new property, e.g. "composedHandler". It will still work, but the best practice here would be to use several composed handlers for code clarity.
+
+## Example
+
+In the below example we define two different scroll handlers using `useAnimatedScrollHandler`. Then, they are combined by `useComposedEventHandler` hook and passed to `Animated.ScrollView` component.
+Now, each dispatched `onScroll` event gets handled by both merged handlers.
+
+```jsx {29-32,36}
+import Animated, {
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+} from 'react-native-reanimated';
+
+function ComposedEventHandlerExample() {
+  const onScrollHandler1 = useAnimatedScrollHandler({
+    onScroll(e) {
+      'worklet';
+      console.log('Scroll handler 1 onScroll event');
+    },
+  });
+
+  const onScrollHandler2 = useAnimatedScrollHandler({
+    onScroll(e) {
+      'worklet';
+      console.log('Scroll handler 2 onScroll event');
+    },
+  });
+
+  const composedHandler = useComposedEventHandler([
+    onScrollHandler1,
+    onScrollHandler2,
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.ScrollView style={styles.scroll} onScroll={composedHandler}>
+        <Content />
+      </Animated.ScrollView>
+    </View>
+  );
+}
+```
+
+## Remarks
+
+- The hook returns a handler that combines functionalities of all the handlers given as an argument. This way, you can have more than one handler responding to a given event, as well as handle many different type events using just one object.
+- It will still work well when passed to multiple [`Animated components`](/docs/fundamentals/glossary#animated-component), firing event callbacks for each connected component.
+
+## Platform compatibility
+
+<div className="platform-compatibility">
+
+| Android | iOS | Web |
+| ------- | --- | --- |
+| ✅      | ✅  | ✅  |
+
+</div>
diff --git a/docs/src/theme/DocSidebarItems/index.js b/docs/src/theme/DocSidebarItems/index.js
index e41d3986c92..9af18840d1e 100644
--- a/docs/src/theme/DocSidebarItems/index.js
+++ b/docs/src/theme/DocSidebarItems/index.js
@@ -5,7 +5,7 @@ import SidebarLabel from '@site/src/components/SidebarLabel';
 import styles from './styles.module.css';
 
 const EXPERIMENTAL_APIs = ['shared-element-transitions/overview'];
-const NEW_APIS = ['animations/withClamp'];
+const NEW_APIS = ['advanced/useComposedEventHandler'];
 
 // TODO this item should probably not receive the "activePath" props
 // TODO this triggers whole sidebar re-renders on navigation
diff --git a/src/reanimated2/hook/index.ts b/src/reanimated2/hook/index.ts
index 82d8086a6cf..bb6e02918aa 100644
--- a/src/reanimated2/hook/index.ts
+++ b/src/reanimated2/hook/index.ts
@@ -39,3 +39,4 @@ export type {
 export { useEvent } from './useEvent';
 export type { UseHandlerContext } from './useHandler';
 export { useHandler } from './useHandler';
+export { useComposedEventHandler } from './useComposedEventHandler';
diff --git a/src/reanimated2/hook/useComposedEventHandler.ts b/src/reanimated2/hook/useComposedEventHandler.ts
new file mode 100644
index 00000000000..a532ca9fe51
--- /dev/null
+++ b/src/reanimated2/hook/useComposedEventHandler.ts
@@ -0,0 +1,80 @@
+'use strict';
+import { useEvent } from './useEvent';
+import { useHandler } from './useHandler';
+import { WorkletEventHandler } from '../WorkletEventHandler';
+import type { ReanimatedEvent } from './commonTypes';
+import type { WorkletFunction } from '../commonTypes';
+import type { EventHandlerProcessed, EventHandlerInternal } from './useEvent';
+
+type ComposedHandlerProcessed<
+  Event extends object,
+  Context extends Record<string, unknown> = Record<string, unknown>
+> = EventHandlerProcessed<Event, Context>;
+
+type ComposedHandlerInternal<Event extends object> =
+  EventHandlerInternal<Event>;
+
+/**
+ * Lets you compose multiple event handlers based on [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
+ *
+ * @param handlers - An array of event handlers created using [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
+ * @returns An object you need to pass to a coresponding "onEvent" prop on an `Animated` component (for example handlers responsible for `onScroll` event go to `onScroll` prop).
+ * @see https://docs.swmansion.com/react-native-reanimated/docs/advanced/useComposedEventHandler
+ */
+// @ts-expect-error This overload is required by our API.
+export function useComposedEventHandler<
+  Event extends object,
+  Context extends Record<string, unknown>
+>(
+  handlers: (EventHandlerProcessed<Event, Context> | null)[]
+): ComposedHandlerProcessed<Event, Context>;
+
+export function useComposedEventHandler<
+  Event extends object,
+  Context extends Record<string, unknown>
+>(handlers: (EventHandlerProcessed<Event, Context> | null)[]) {
+  // Record of handlers' worklets to calculate deps diffs. We use the record type to match the useHandler API requirements
+  const workletsRecord: Record<string, WorkletFunction> = {};
+  // Summed event names for registration
+  const composedEventNames = new Set<string>();
+  // Map that holds worklets for specific handled events
+  const workletsMap: {
+    [key: string]: ((event: ReanimatedEvent<Event>) => void)[];
+  } = {};
+
+  handlers
+    .filter((h) => h !== null)
+    .forEach((handler) => {
+      // EventHandlerProcessed is the return type of useEvent and has to be force casted to EventHandlerInternal, because we need WorkletEventHandler object
+      const { workletEventHandler } =
+        handler as unknown as EventHandlerInternal<Context>;
+      if (workletEventHandler instanceof WorkletEventHandler) {
+        workletEventHandler.eventNames.forEach((eventName) => {
+          composedEventNames.add(eventName);
+
+          if (workletsMap[eventName]) {
+            workletsMap[eventName].push(workletEventHandler.worklet);
+          } else {
+            workletsMap[eventName] = [workletEventHandler.worklet];
+          }
+
+          const handlerName = eventName + `${workletsMap[eventName].length}`;
+          workletsRecord[handlerName] =
+            workletEventHandler.worklet as WorkletFunction;
+        });
+      }
+    });
+
+  const { doDependenciesDiffer } = useHandler(workletsRecord);
+
+  return useEvent<Event, Context>(
+    (event) => {
+      'worklet';
+      if (workletsMap[event.eventName]) {
+        workletsMap[event.eventName].forEach((worklet) => worklet(event));
+      }
+    },
+    Array.from(composedEventNames),
+    doDependenciesDiffer
+  ) as unknown as ComposedHandlerInternal<Event>;
+}
diff --git a/src/reanimated2/index.ts b/src/reanimated2/index.ts
index 5885fa1a4e4..7b2d715e103 100644
--- a/src/reanimated2/index.ts
+++ b/src/reanimated2/index.ts
@@ -47,6 +47,7 @@ export {
   useFrameCallback,
   useAnimatedKeyboard,
   useScrollViewOffset,
+  useComposedEventHandler,
 } from './hook';
 export type {
   DelayAnimation,