useManualReset

Observable with a manual reset() function that restores the value to its default. Unlike useAutoReset, the value is only reset when you explicitly call reset().

Demo

Current: hello

Usage

import { 
import useManualReset
useManualReset } from "@usels/web";

const { 
const value$: any
value$, 
const reset: any
reset } = 
import useManualReset
useManualReset("hello");
const value$: any
value$.
any
set("changed");
// value$.get() returns "changed"

const reset: any
reset();
// value$.get() returns "hello" — restored to default

Observable default value

import { 
function useObservable<T>(): Observable<T | undefined> (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable } from "@legendapp/state/react";
import { 
import useManualReset
useManualReset } from "@usels/web";

// When defaultValue is an Observable, reset() reads its current value
const 
const default$: any
default$ = 
useObservable<unknown>(value: Promise<unknown> | (() => unknown) | unknown, deps?: React.DependencyList): any (+3 overloads)
A React hook that creates a new observable
@param ― initialValue The initial value of the observable or a function that returns the initial value
@see ― https://www.legendapp.com/dev/state/react/#useObservable
useObservable("initial");
const { 
const value$: any
value$, 
const reset: any
reset } = 
import useManualReset
useManualReset(
const default$: any
default$);

const value$: any
value$.
any
set("changed");
const default$: any
default$.
any
set("updated-default");
const reset: any
reset();
// value$.get() returns "updated-default" — not the stale "initial"

Form reset pattern

import { 
import useManualReset
useManualReset } from "@usels/web";

function 
function MyForm(): void
MyForm() {
  const { 
any
value$: 
const name$: any
name$, 
any
reset: 
const resetName: any
resetName } = 
import useManualReset
useManualReset("");
  const { 
any
value$: 
const email$: any
email$, 
any
reset: 
const resetEmail: any
resetEmail } = 
import useManualReset
useManualReset("");

  const 
const handleSubmit: () => void
handleSubmit = () => {
    // submit form...
    
const resetName: any
resetName();
    
const resetEmail: any
resetEmail();
  };
}

Type Declarations

export declare function useManualReset<T>(defaultValue: MaybeObservable<T>): {
    value$: Observable<WidenPrimitive<T>>;
    reset: Fn;
};

Source

View on GitHub

Contributors

tigerwest

Changelog

a7392ab 2026-03-06 - feat(core,browser): add sync strategy hooks (tigerwest)