@react-enhanced/hooks NPM

@react-enhanced/hooks

🔥 Enhanced React Hooks

`useApi`

API request hook based on fetch + Observable, supports advanced features like interceptor, lazy request, etc.

Usage

const { data, loading, error, fetch } = useApi('path')

const { data, loading, error, fetch } = useApi('path', {
  method: ApiMethod.POST,
  type: 'text',
  query: {},
  body: {},
  // Other native `fetch` options
})

// It won't trigger `fetch` actively in `lazy` mode, and properties like `data`, `loading`, `error` are not available by default
const { fetch } = useApi('path', {
  lazy: true,
})

// Enable `lazyResult` to make properties like `data`, `loading`, `error` available
const { data, loading, error, fetch } = useApi('path', {
  lazy: true,
  lazyResult: true,
})

// Use `fetchApi` directly, no involvement in rendering
const callApi = useCallback(() => fetchApi('path'), [])

`useComputed`

Similar to useState + useMemo

Usage

const value = useComputed({ a: 1 }, []) // `value`'s reference will never change

const value = useComputed(() => ({ a: 1 }), []) // Basically equivalent to `useMemo`

`useConstant`

Constant based on useState, will never change

`useEnhancedEffect`

Enhanced useEffect, support subscribe and unsubscribe Observable automatically, support nested unsubscribe

Usage

useEnhancedEffect(() =>
  fetchApi('path1').pipe(switchMap(() => fetchApi('path2'))),
)

useEnhancedEffect(
  () => fetchApi('path1').subscribe(() => fetchApi('path2').subscribe()), // Just for demo, do not write like this
)

`useMounted`

Similar to componentDidMount

`useUnmounted`

Similar to componentWillUnmount

`useEnhancedCallback`

Enhanced useCallback, support subscribe and unsubscribe Observable automatically, support nested unsubscribe

Usage

const doSth = useEnhancedCallback(
  () => fetchApi('path1').pipe(switchMap(() => fetchApi('path2'))),
  [],
)

const doSth = useEnhancedCallback(
  () => fetchApi('path1').subscribe(() => fetchApi('path2').subscribe()), // Just for demo, do not write like this
  [],
)

`useRendered`

Used to judge whether the Modal content has been rendered

const [formRendered] = useRendered(visible)

useEffect(() => {
  if (
    formRendered.current &&
    // We only need to `resetFields` after modal open so that `initialValues` will have been updated correctly
    visible
  ) {
    resetError()
    form.resetFields()
  }
}, [form, formRendered, resetError, visible])

:::warning useRendered returns Ref, its reference will never change, so do not try to set formRendered.current as a variable outside useEffect :::