UNPKG

5.57 kBTypeScriptView Raw
1import { PreactContext, Ref as PreactRef } from '../..';
2
3type Inputs = ReadonlyArray<unknown>;
4
5export type StateUpdater<S> = (value: S | ((prevState: S) => S)) => void;
6/**
7 * Returns a stateful value, and a function to update it.
8 * @param initialState The initial value (or a function that returns the initial value)
9 */
10export function useState<S>(initialState: S | (() => S)): [S, StateUpdater<S>];
11
12export type Reducer<S, A> = (prevState: S, action: A) => S;
13/**
14 * An alternative to `useState`.
15 *
16 * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
17 * multiple sub-values. It also lets you optimize performance for components that trigger deep
18 * updates because you can pass `dispatch` down instead of callbacks.
19 * @param reducer Given the current state and an action, returns the new state
20 * @param initialState The initial value to store as state
21 */
22export function useReducer<S, A>(
23 reducer: Reducer<S, A>,
24 initialState: S
25): [S, (action: A) => void];
26
27/**
28 * An alternative to `useState`.
29 *
30 * `useReducer` is usually preferable to `useState` when you have complex state logic that involves
31 * multiple sub-values. It also lets you optimize performance for components that trigger deep
32 * updates because you can pass `dispatch` down instead of callbacks.
33 * @param reducer Given the current state and an action, returns the new state
34 * @param initialArg The initial argument to pass to the `init` function
35 * @param init A function that, given the `initialArg`, returns the initial value to store as state
36 */
37export function useReducer<S, A, I>(
38 reducer: Reducer<S, A>,
39 initialArg: I,
40 init: (arg: I) => S
41): [S, (action: A) => void];
42
43type PropRef<T> = { current?: T };
44type Ref<T> = { current: T };
45
46/**
47 * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
48 * (`initialValue`). The returned object will persist for the full lifetime of the component.
49 *
50 * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
51 * value around similar to how you’d use instance fields in classes.
52 */
53export function useRef<T>(initialValue: T | null): Ref<T>;
54
55/**
56 * `useRef` without an initial value is the special case handling `ref` props.
57 * If you want a non prop-based, mutable ref, you can explicitly give it an initial value of undefined/null/etc.
58 * You should explicitly set the type parameter for the expected ref value to either a DOM Element like `HTMLInputElement` or a `Component`
59 */
60export function useRef<T = unknown>(): PropRef<T>;
61
62type EffectCallback = () => void | (() => void);
63/**
64 * Accepts a function that contains imperative, possibly effectful code.
65 * The effects run after browser paint, without blocking it.
66 *
67 * @param effect Imperative function that can return a cleanup function
68 * @param inputs If present, effect will only activate if the values in the list change (using ===).
69 */
70export function useEffect(effect: EffectCallback, inputs?: Inputs): void;
71
72type CreateHandle = () => object;
73
74/**
75 * @param ref The ref that will be mutated
76 * @param create The function that will be executed to get the value that will be attached to
77 * ref.current
78 * @param inputs If present, effect will only activate if the values in the list change (using ===).
79 */
80export function useImperativeHandle<T, R extends T>(
81 ref: PreactRef<T>,
82 create: () => R,
83 inputs?: Inputs
84): void;
85
86/**
87 * Accepts a function that contains imperative, possibly effectful code.
88 * Use this to read layout from the DOM and synchronously re-render.
89 * Updates scheduled inside `useLayoutEffect` will be flushed synchronously, after all DOM mutations but before the browser has a chance to paint.
90 * Prefer the standard `useEffect` hook when possible to avoid blocking visual updates.
91 *
92 * @param effect Imperative function that can return a cleanup function
93 * @param inputs If present, effect will only activate if the values in the list change (using ===).
94 */
95export function useLayoutEffect(effect: EffectCallback, inputs?: Inputs): void;
96
97/**
98 * Returns a memoized version of the callback that only changes if one of the `inputs`
99 * has changed (using ===).
100 */
101export function useCallback<T extends Function>(callback: T, inputs: Inputs): T;
102
103/**
104 * Pass a factory function and an array of inputs.
105 * useMemo will only recompute the memoized value when one of the inputs has changed.
106 * This optimization helps to avoid expensive calculations on every render.
107 * If no array is provided, a new value will be computed whenever a new function instance is passed as the first argument.
108 */
109// for `inputs`, allow undefined, but don't make it optional as that is very likely a mistake
110export function useMemo<T>(factory: () => T, inputs: Inputs | undefined): T;
111
112/**
113 * Returns the current context value, as given by the nearest context provider for the given context.
114 * When the provider updates, this Hook will trigger a rerender with the latest context value.
115 *
116 * @param context The context you want to use
117 */
118export function useContext<T>(context: PreactContext<T>): T;
119
120/**
121 * Customize the displayed value in the devtools panel.
122 *
123 * @param value Custom hook name or object that is passed to formatter
124 * @param formatter Formatter to modify value before sending it to the devtools
125 */
126export function useDebugValue<T>(
127 value: T,
128 formatter?: (value: T) => string | number
129): void;
130
131export function useErrorBoundary(
132 callback?: (error: any) => Promise<void> | void
133): [any, () => void];