t-react-hooks v1.0.19

t-hooks

This is a tiny hooks for working with react.js application.

API

Default useRequest

By default, the first parameter of useRequest is an asynchronous function, which is automatically executed when the component is initialized. At the same time, it automatically manages the status of loading, data, error of the asynchronous function.

const { data, error, loading } = useRequest(service);

const {
  loading: boolean,
  data?: TData,
  error?: Error,
  params: TParams || [],
  run: (...params: TParams) => void,
  runAsync: (...params: TParams) => Promise<TData>,
  refresh: () => void,
  refreshAsync: () => Promise<TData>,
  mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
  cancel: () => void,
} = useRequest<TData, TParams>(
  service: (...args: TParams) => Promise<TData>,
  {
    manual?: boolean,
    defaultParams?: TParams,
    onBefore?: (params: TParams) => void,
    onSuccess?: (data: TData, params: TParams) => void,
    onError?: (e: Error, params: TParams) => void,
    onFinally?: (params: TParams, data?: TData, e?: Error) => void,
  }
);

Result

Options

useBreakpoints

this hook is returning screen size in boolean

import {useBreakpoint} from './useBreakpoint'

const { xs, sm, md, lg, xl, xxl } = useBreakpoint();

useCreation

useCreation is the replacement for useMemo or useRef.

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

And similar to useRef, you can use useCreation to create some constants. But useCreation can avoid performance hazards.

const a = useRef(new Subject()); // A new Subject instance is created in every render.
const b = useCreation(() => new Subject(), []); // By using factory function, Subject is only instantiated once.

useLatest

A Hook that returns the latest value, effectively avoiding the closure problem.

Examples

Basic usage

API

const latestValueRef = useLatest<T>(value: T): MutableRefObject<T>;

useMemoizedFn

Hooks for persistent functions. In general, useMemoizedFn can be used instead of useCallback. See FAQ for special cases.

In some scenarios, we need to use useCallback to cache a function, but when the second parameter deps changes, the function will be regenerated, causing the function reference to change.

const [state, setState] = useState('');

// When the state changes, the func reference will change
const func = useCallback(() => {
  console.log(state);
}, [state]);

const memoizedFn = useMemoizedFn<T>(fn: T): T;

Result

Params

useMount

A hook that executes a function after the component is mounted.

Examples

Default Usage

API

useMount(fn: () => void);

Params

useUnmount

A hook that executes the function right before the component is unmounted.

Examples

Default Usage

API

useUnmount(fn: () => void);

Params

useUpdate

A hook that returns a function which can be used to force the component to re-render.

Examples

Default Usage

API

const update = useUpdate();

useUpdateEffect

A hook alike useEffect but skips running the effect for the first time.

Examples

Basic usage

API

The API is exactly the same as React.useEffect.

useUpdateEffect(
  effect: React.EffectCallback,
  deps?: React.DependencyList,
)