diff --git a/src/hooks/use-did-update-effect.tsx b/src/hooks/use-did-update-effect.tsx
new file mode 100644
index 0000000..286ad19
--- /dev/null
+++ b/src/hooks/use-did-update-effect.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * similar to `useEffect` but gets triggered only when value changes
+ * @param fn executable function on dependency updates
+ * @param inputs dependency array
+ */
+export function useDidUpdateEffect(fn, inputs) {
+  const didMountRef = useRef(false);
+
+  useEffect(() => {
+    if (didMountRef.current) fn();
+    else didMountRef.current = true;
+  }, inputs);
+}
diff --git a/src/multi-select/dropdown.tsx b/src/multi-select/dropdown.tsx
index 86dd9a0..50d1e6a 100644
--- a/src/multi-select/dropdown.tsx
+++ b/src/multi-select/dropdown.tsx
@@ -6,6 +6,7 @@
 import { css } from "goober";
 import React, { useEffect, useRef, useState } from "react";
 
+import { useDidUpdateEffect } from "../hooks/use-did-update-effect";
 import { useMultiSelect } from "../hooks/use-multi-select";
 import { cn } from "../lib/classnames";
 import SelectPanel from "../select-panel";
@@ -89,8 +90,7 @@ const Dropdown = () => {
 
   const wrapper: any = useRef();
 
-  /* eslint-disable react-hooks/exhaustive-deps */
-  useEffect(() => {
+  useDidUpdateEffect(() => {
     onMenuToggle && onMenuToggle(expanded);
   }, [expanded]);
 
diff --git a/stories/custom-arrow.stories.tsx b/stories/custom-arrow.stories.tsx
index 45ab09a..15c1928 100644
--- a/stories/custom-arrow.stories.tsx
+++ b/stories/custom-arrow.stories.tsx
@@ -23,6 +23,7 @@ export const ExampleCustomArrow = () => {
         onChange={setSelected}
         labelledBy={text("labelledBy", "Select Fruits")}
         ArrowRenderer={ArrowRenderer}
+        onMenuToggle={(isOpen) => console.log("onMenuToggle", isOpen)}
       />
     </div>
   );