diff --git a/docs/api/react-wire.md b/docs/api/react-wire.md index cc3cdc7..ba3121b 100644 --- a/docs/api/react-wire.md +++ b/docs/api/react-wire.md @@ -11,7 +11,7 @@ connect react components with wire | Function | Description | | ------------------------------------------------------------------ | ---------------------------------------------------------- | | [useWire(upLink, initialValue)](./react-wire.usewire.md) | creates and returns a new wire. | -| [useWireState(wire)](./react-wire.usewirestate.md) | same as react useState but synced with wire. | +| [useWireState(wire, initialValue)](./react-wire.usewirestate.md) | same as react useState but synced with wire. | | [useWireState(wire, initialValue)](./react-wire.usewirestate_1.md) | same as react useState but synced with wire. | | [useWireValue(wire)](./react-wire.usewirevalue.md) | returns wire value and subscribe to wire for value updates | | [useWireValue(wire, defaultValue)](./react-wire.usewirevalue_1.md) | returns wire value and subscribe to wire for value updates | diff --git a/docs/api/react-wire.usewirestate.md b/docs/api/react-wire.usewirestate.md index 913272d..44bb053 100644 --- a/docs/api/react-wire.usewirestate.md +++ b/docs/api/react-wire.usewirestate.md @@ -11,23 +11,29 @@ same as react useState but synced with wire. ```typescript export declare function useWireState( wire: Subscribable | null | undefined, -): [Value | undefined, Dispatch>]; + initialValue: Value | (() => Value), +): [Value, Dispatch>>]; ``` ## Parameters -| Parameter | Type | Description | -| --------- | ------------------------------------------------------------------- | ----------------------------------------------- | -| wire | Subscribable<Value> | null | undefined | the wire to be connected to and sync value with | +| Parameter | Type | Description | +| ------------ | ------------------------------------------------------------------- | ----------------------------------------------- | +| wire | Subscribable<Value> | null | undefined | the wire to be connected to and sync value with | +| initialValue | Value | (() => Value) | initial value or initializer function | Returns: -`[Value | undefined, Dispatch>]` +`[Value, Dispatch>>]` state and setState. ## Remarks -if wire is null, it should behave like useState +if wire is null, it should behave like `useState` + +if `wire` param provided and wire has a value, the state respect wire value and ignore its own initial value. + +if `wire` param provided and wire hasn't a value (has `undefined` value), wire value will be updated please always pass same wire and avoid changing wire, it can cause strange behavior and bad intermediate values diff --git a/docs/api/react-wire.usewirestate_1.md b/docs/api/react-wire.usewirestate_1.md index a7f0c1a..35e959d 100644 --- a/docs/api/react-wire.usewirestate_1.md +++ b/docs/api/react-wire.usewirestate_1.md @@ -11,20 +11,20 @@ same as react useState but synced with wire. ```typescript export declare function useWireState( wire: Subscribable | null | undefined, - initialValue: Value | (() => Value), -): [Value, Dispatch>]; + initialValue?: undefined | Value | (() => Value | undefined), +): [Value | undefined, Dispatch>]; ``` ## Parameters -| Parameter | Type | Description | -| ------------ | ------------------------------------------------------------------- | ----------------------------------------------- | -| wire | Subscribable<Value> | null | undefined | the wire to be connected to and sync value with | -| initialValue | Value | (() => Value) | initial value or initializer function | +| Parameter | Type | Description | +| ------------ | ---------------------------------------------------------------------------- | ----------------------------------------------- | +| wire | Subscribable<Value> | null | undefined | the wire to be connected to and sync value with | +| initialValue | undefined | Value | (() => Value | undefined) | initial value or initializer function | Returns: -`[Value, Dispatch>]` +`[Value | undefined, Dispatch>]` state and setState. diff --git a/src/type-utils.ts b/src/type-utils.ts new file mode 100644 index 0000000..611fd4e --- /dev/null +++ b/src/type-utils.ts @@ -0,0 +1 @@ +export type Defined = T extends undefined ? never : T; diff --git a/src/use-wire-state.ts b/src/use-wire-state.ts index 7e9e2fa..0c2b272 100644 --- a/src/use-wire-state.ts +++ b/src/use-wire-state.ts @@ -8,30 +8,37 @@ import { } from 'react'; import { isSetStateAction } from './is-set-state-action'; import { Subscribable } from './subscribable'; +import { Defined } from './type-utils'; import { useWire } from './use-wire'; /** * same as react useState but synced with wire. * * @param wire - the wire to be connected to and sync value with + * @param initialValue - initial value or initializer function * * @returns state and setState. * * @remarks - * if wire is null, it should behave like useState + * if wire is null, it should behave like `useState` + * + * if `wire` param provided and wire has a value, the state respect wire value and ignore its own initial value. + * + * if `wire` param provided and wire hasn't a value (has `undefined` value), wire value will be updated * * please always pass same wire and avoid changing wire, it can cause strange behavior and bad intermediate values * */ export function useWireState( wire: Subscribable | null | undefined, -): [Value | undefined, Dispatch>]; + initialValue: Value | (() => Value), +): [Value, Dispatch>>]; + /** * same as react useState but synced with wire. * * @param wire - the wire to be connected to and sync value with * @param initialValue - initial value or initializer function - * * @returns state and setState. * * @remarks @@ -46,11 +53,11 @@ export function useWireState( */ export function useWireState( wire: Subscribable | null | undefined, - initialValue: Value | (() => Value), -): [Value, Dispatch>]; + initialValue?: undefined | Value | (() => Value | undefined), +): [Value | undefined, Dispatch>]; export function useWireState( wire: Subscribable | null | undefined, - initialValue?: undefined | Value | (() => Value), + initialValue?: undefined | Value | (() => Value | undefined), ): [Value | undefined, Dispatch>] { const innerWire = useWire(wire, initialValue); const [stateValue, setStateValue] = useState(() =>