fix: 🐛 onMenuToggle skip callback on initial render (#326)

Author: harshzalavadiya

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);
+}

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]);
 

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>
   );