feat(useToggle): ignore react events passed to state setter (#867)

* feat(useToggle): ignore react events passed to state setter

fix #861

BREAKING CHANGE: `useToggle` now ignores react events passed to its
state setter, so it can be used as event handler directly.

src/useToggle/__docs__/example.stories.tsx

@@ -7,12 +7,7 @@ export const Example: React.FC = () => {
   return (
     <div>
       <div>{isToggled ? 'The toggle is on' : 'The toggle is off'}</div>
-      <button
-        onClick={() => {
-          toggle();
-        }}>
-        Toggle
-      </button>
+      <button onClick={toggle}>Toggle</button>
     </div>
   );
 };

src/useToggle/__docs__/story.mdx

@@ -8,6 +8,10 @@ import { ImportPath } from '../../storybookUtil/ImportPath';
 
 Like `useState`, but can only become `true` or `false`.
 
+State setter, in case called without arguments, will change the state to opposite. React synthetic
+events are ignored by default so state setter can be used as event handler directly, such behaviour
+can be changed by setting 2nd parameter to `false`.
+
 > **_This hook provides stable API, meaning returned functions do not change between renders_**
 
 #### Example
@@ -19,9 +23,15 @@ Like `useState`, but can only become `true` or `false`.
 ## Reference
 
 ```ts
-function useToggle(
-  initialState: IInitialState<boolean> = false
-): [boolean, (nextState?: INewState<boolean>) => void];
+export function useToggle(
+  initialState: IInitialState<boolean>,
+  ignoreReactEvents?: true
+): [boolean, (nextState?: INextState<boolean> | BaseSyntheticEvent) => void];
+
+export function useToggle(
+  initialState: IInitialState<boolean>,
+  ignoreReactEvents: false
+): [boolean, (nextState?: INextState<boolean>) => void];
 ```
 
 #### Importing
@@ -32,6 +42,7 @@ function useToggle(
 
 - _**initialState**_ _`IInitialState<boolean>`_ - initial state or initial state setter as for
   `useState`
+- _**ignoreReactEvents**_ _`boolean`_ _(default: true)_ - ignore received react synthetic events, so state setter can be used as event handler.
 
 #### Return
 

src/useToggle/__tests__/dom.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks/dom';
-import { useRef } from 'react';
+import { BaseSyntheticEvent, useRef } from 'react';
 import { useToggle } from '../..';
 
 describe('useToggle', () => {
@@ -58,7 +58,7 @@ describe('useToggle', () => {
   });
 
   it('should change state to one that passed to toggler', () => {
-    const { result } = renderHook(() => useToggle());
+    const { result } = renderHook(() => useToggle(false, false));
     act(() => {
       result.current[1](false);
     });
@@ -79,4 +79,19 @@ describe('useToggle', () => {
     });
     expect(result.current[0]).toBe(true);
   });
+
+  it('should not account react events', () => {
+    const { result } = renderHook(() => useToggle());
+
+    act(() => {
+      result.current[1]({ _reactName: 'abcdef' } as unknown as BaseSyntheticEvent);
+      result.current[1]({ _reactName: 'abcdef' } as unknown as BaseSyntheticEvent);
+    });
+    expect(result.current[0]).toBe(false);
+
+    act(() => {
+      result.current[1](new (class SyntheticBaseEvent {})() as unknown as BaseSyntheticEvent);
+    });
+    expect(result.current[0]).toBe(true);
+  });
 });

src/useToggle/useToggle.ts

@@ -1,28 +1,46 @@
-import { useCallback } from 'react';
+import { BaseSyntheticEvent, useCallback } from 'react';
+import { useSafeState, useSyncedRef } from '..';
 import { IInitialState, INextState, resolveHookState } from '../util/resolveHookState';
-import { useSafeState } from '..';
+
+export function useToggle(
+  initialState: IInitialState<boolean>,
+  ignoreReactEvents: false
+): [boolean, (nextState?: INextState<boolean>) => void];
+export function useToggle(
+  initialState?: IInitialState<boolean>,
+  ignoreReactEvents?: true
+): [boolean, (nextState?: INextState<boolean> | BaseSyntheticEvent) => void];
 
 /**
  * Like `useSafeState`, but can only become `true` or `false`.
  *
- * State setter, in case called without arguments, will change the state to opposite.
- *
- * @param initialState Initial toggle state, defaults to false.
+ * State setter, in case called without arguments, will change the state to opposite. React
+ * synthetic events are ignored by default so state setter can be used as event handler directly,
+ * such behaviour can be changed by setting 2nd parameter to `false`.
  */
 export function useToggle(
-  initialState: IInitialState<boolean> = false
-): [boolean, (nextState?: INextState<boolean>) => void] {
-  // We dont use useReducer (which would end up with less code), because exposed
+  initialState: IInitialState<boolean> = false,
+  ignoreReactEvents = true
+): [boolean, (nextState?: INextState<boolean> | BaseSyntheticEvent) => void] {
+  // We don't use useReducer (which would end up with less code), because exposed
   // action does not provide functional updates feature.
-  // Therefore we have to create and expose our own state setter with
+  // Therefore, we have to create and expose our own state setter with
   // toggle logic.
   const [state, setState] = useSafeState(initialState);
+  const ignoreReactEventsRef = useSyncedRef(ignoreReactEvents);
 
   return [
     state,
     useCallback((nextState) => {
       setState((prevState) => {
-        if (typeof nextState === 'undefined') {
+        if (
+          typeof nextState === 'undefined' ||
+          (ignoreReactEventsRef.current &&
+            typeof nextState === 'object' &&
+            (nextState.constructor.name === 'SyntheticBaseEvent' ||
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,no-underscore-dangle,@typescript-eslint/no-explicit-any
+              typeof (nextState as any)._reactName === 'string'))
+        ) {
           return !prevState;
         }