feat: implement useFunctionalState

close #530

README.md

@@ -111,6 +111,8 @@ Coming from `react-use`? Check out our
     — Tracks a numeric value and offers functions for manipulating it.
   - [**`useDebouncedState`**](https://react-hookz.github.io/web/?path=/docs/state-usedebouncedstate--example)
     — Like `useSafeState` but its state setter is debounced.
+  - [**`useFunctionalState`**](https://react-hookz.github.io/web/?path=/docs/state-usefunctionalstate--page)
+    — Like `useState` but instead of raw state, state getter returned.
   - [**`useList`**](https://react-hookz.github.io/web/?path=/docs/state-uselist--example)
     — Tracks a list and offers functions for manipulating it.
   - [**`useMap`**](https://react-hookz.github.io/web/?path=/docs/state-usemap--example) — Tracks the

src/index.ts

@@ -27,6 +27,7 @@ export { useIntervalEffect } from './useIntervalEffect/useIntervalEffect';
 
 // State
 export { useDebouncedState } from './useDebouncedState/useDebouncedState';
+export { useFunctionalState } from './useFunctionalState/useFunctionalState';
 export { useList } from './useList/useList';
 export { useMap } from './useMap/useMap';
 export { useMediatedState } from './useMediatedState/useMediatedState';
@@ -58,6 +59,7 @@ export { useVibrate } from './useVibrate/useVibrate';
 
 // Miscellaneous
 export { useSyncedRef } from './useSyncedRef/useSyncedRef';
+export { useHookableRef, HookableRefHandler } from './useHookableRef/useHookableRef';
 
 // SideEffect
 export { useLocalStorageValue } from './useLocalStorageValue/useLocalStorageValue';
@@ -109,5 +111,3 @@ export { useWindowSize, WindowSize } from './useWindowSize/useWindowSize';
 export { truthyAndArrayPredicate, truthyOrArrayPredicate } from './util/const';
 
 export { IEffectCallback, IEffectHook } from './util/misc';
-
-export { useHookableRef } from './useHookableRef/useHookableRef';

src/useFunctionalState/__docs__/story.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="State/useFunctionalState" />
+
+# useFunctionalState
+
+Like `useState` but instead of raw state, state getter returned. `useSafeState` is used underneath.
+
+## Reference
+
+```ts
+export function useFunctionalState<S>(
+  initialState: S | (() => S)
+): [() => S, React.Dispatch<React.SetStateAction<S>>];
+export function useFunctionalState<S = undefined>(): [
+  () => S | undefined,
+  React.Dispatch<React.SetStateAction<S | undefined>>
+];
+```

src/useFunctionalState/__tests__/dom.ts

@@ -0,0 +1,31 @@
+import { act, renderHook } from '@testing-library/react-hooks/dom';
+import { useFunctionalState } from '../..';
+
+describe('useFunctionalState', () => {
+  it('should be defined', () => {
+    expect(useFunctionalState).toBeDefined();
+  });
+
+  it('should render', () => {
+    const { result } = renderHook(() => useFunctionalState());
+    expect(result.error).toBeUndefined();
+  });
+
+  it('should return proper values', () => {
+    const { result } = renderHook(() => useFunctionalState(1));
+    expect(result.current[1]).toBeInstanceOf(Function);
+    expect(result.current[0]).toBeInstanceOf(Function);
+  });
+
+  it('should return state getter', () => {
+    const { result } = renderHook(() => useFunctionalState(1));
+
+    expect(result.current[0]()).toBe(1);
+
+    act(() => {
+      result.current[1](2);
+    });
+
+    expect(result.current[0]()).toBe(2);
+  });
+});

src/useFunctionalState/__tests__/ssr.ts

@@ -0,0 +1,19 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useFunctionalState } from '../..';
+
+describe('useFunctionalState', () => {
+  it('should be defined', () => {
+    expect(useFunctionalState).toBeDefined();
+  });
+
+  it('should render', () => {
+    const { result } = renderHook(() => useFunctionalState());
+    expect(result.error).toBeUndefined();
+  });
+
+  it('should return proper values', () => {
+    const { result } = renderHook(() => useFunctionalState(1));
+    expect(result.current[1]).toBeInstanceOf(Function);
+    expect(result.current[0]).toBeInstanceOf(Function);
+  });
+});

src/useFunctionalState/useFunctionalState.ts

@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useSafeState } from '../useSafeState/useSafeState';
+import { useSyncedRef } from '../useSyncedRef/useSyncedRef';
+
+export function useFunctionalState<S>(
+  initialState: S | (() => S)
+): [() => S, Dispatch<SetStateAction<S>>];
+export function useFunctionalState<S = undefined>(): [
+  () => S | undefined,
+  Dispatch<SetStateAction<S | undefined>>
+];
+
+/**
+ * Like `useState` but instead of raw state, state getter returned. `useSafeState` is
+ * used underneath.
+ */
+export function useFunctionalState<S>(
+  initialState?: S | (() => S)
+): [() => S | undefined, Dispatch<SetStateAction<S | undefined>>] {
+  const [state, setState] = useSafeState(initialState);
+  const stateRef = useSyncedRef(state);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return [useCallback(() => stateRef.current, []), setState];
+}

src/useSafeState/__docs__/story.mdx

@@ -16,8 +16,8 @@ action if component is unmounted, otherwise it is the same hook as common `useSt
 
 #### Example
 
-Sadly we can't provide an example since this documentation built in `production` mode and warning
-are only shown in `development` mode.
+Sadly we can't provide an example since this documentation built in `production` mode and
+warnings are only shown in `development` mode.
 
 ## Reference
 

src/useSafeState/__tests__/dom.ts

@@ -11,7 +11,7 @@ describe('useSafeState', () => {
     expect(result.error).toBeUndefined();
   });
 
-  it('should not call', () => {
+  it('should not cause state change after component unmount', () => {
     const consoleSpy = jest.spyOn(console, 'error');
     consoleSpy.mockImplementationOnce(() => {});