RCE-17: fixed invalid state in hook

Author: HarshRohila

README.md

@@ -49,6 +49,18 @@ useCustomEventListener('my-event', (data) => {
 })
 ```
 
+If using state in listener handler, it's recommended to provide dependency list (same as second parameter of `useEffect`)
+
+```javascript
+useCustomEventListener(
+	'my-event',
+	(data) => {
+		doSomethingWithDataAndStates(data, state1, state2)
+	},
+	[state1, state2]
+)
+```
+
 No need to remove event listener, it uses react's useEffect hook to remove listener on component unmount
 
 And no need to worry about where component is present in dom, these events can be sent and listened to anywhere

__tests__/Test.test.tsx

@@ -79,3 +79,56 @@ describe('Test Component', () => {
 		expect(data.textContent).toBe('data from hello')
 	})
 })
+
+describe('useCustomEventListener', () => {
+	interface TestComponentProps {
+		evenFired: (text: string) => void
+	}
+
+	const TestComponent = ({ evenFired }: TestComponentProps) => {
+		const [text, setText] = useState('initial')
+
+		useCustomEventListener(
+			'eventFired',
+			() => {
+				evenFired(text)
+			},
+			[text]
+		)
+
+		const handleStateChange = () => setText('changed')
+
+		const handleEventFire = () => emitCustomEvent('eventFired')
+
+		return (
+			<>
+				<button data-testid="state-changer" onClick={handleStateChange}>
+					Change State
+				</button>
+				<button data-testid="fire-event-btn" onClick={handleEventFire}>
+					Fire Event with data
+				</button>
+			</>
+		)
+	}
+	test('its callback having latest state', (done) => {
+		render(
+			<TestComponent
+				evenFired={(text: string) => {
+					try {
+						expect(text).toBe('changed')
+						done()
+					} catch (cause) {
+						done(cause)
+					}
+				}}
+			/>
+		)
+
+		const stateChangerBtn = screen.getByTestId('state-changer')
+		userEvent.click(stateChangerBtn)
+
+		const fireBtn = screen.getByTestId('fire-event-btn')
+		userEvent.click(fireBtn)
+	})
+})

src/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { DependencyList, useEffect } from 'react'
 
 let targetElement: undefined | HTMLDivElement
 
@@ -12,9 +12,11 @@ function getElement() {
 
 export function useCustomEventListener<T>(
 	eventName: string,
-	eventHandler: (data: T) => void
+	eventHandler: (data: T) => void,
+	deps?: DependencyList
 ): (el: HTMLElement | null) => void {
 	let element: HTMLElement | null
+
 	useEffect(() => {
 		element = element || getElement()
 		const handleEvent = (event: CustomEvent | Event) => {
@@ -27,7 +29,7 @@ export function useCustomEventListener<T>(
 		return () => {
 			element?.removeEventListener(eventName, handleEvent, false)
 		}
-	}, [])
+	}, deps)
 
 	return (el: HTMLElement | null) => {
 		element = el