https://github.com/freckle/react-hooks

https://github.com/freckle/react-hooks

ghvm-managed

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/freckle/react-hooks
• Owner: freckle
• License: mit
• Created: 2022-04-08T12:14:39.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-07T00:25:49.000Z (about 1 year ago)
• Last Synced: 2025-05-07T01:28:41.114Z (about 1 year ago)
• Topics: ghvm-managed
• Language: TypeScript
• Homepage:
• Size: 658 KB
• Stars: 0
• Watchers: 11
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# @freckle/react-hooks

Provides a collection of React hooks.

The key to this collection of hooks is the `useExtraDeps` hook. This hook

avoids the pitfalls of using objects and arrays as dependencies for React's

built-in `useEffect` hook. The other hooks are implemented in terms of

`useExtraDeps`. Please see the documentation for `useExtraDeps` for further

details.

## Collection

This package provides (in no particular order) the following React hooks:

0. `useSafeEffect` / `useSafeEffectExtraDeps`

0. `useSafeCallback` / `useSafeCallbackExtraDeps`

0. `usePrevious`

0. `useExtraDeps`

## Usage

Example usage of an object as a dependency:

```js

import { useSafeEffectExtraDeps } from "@freckle/react-hooks";

import { useSelector, useDispatch } from "react-redux";

export function StoreContainer(props: { color: Color }): React.Node {

  const dispatch = useDispatch();

  const { isLoading, itemsData, error } = useSelector(

    (state) => state.storeReducer

  );

  useSafeEffectExtraDeps(

    ({ color }) => {

      dispatch(loadItems(color));

    },

    [dispatch],

    {

      color: {

        value: props.color,

        comparator: (color1, color2) => color1.id === color2.id,

      },

    }

  );

  return ;

}

```

For simpler use cases, we can avoid the `extraDeps` bit:

```js

import {useSafeEffect} from '@freckle/react-hooks'

import {useSelector, useDispatch} from 'react-redux'

export function StoreContainer(): React.Node {

  const dispatch = useDispatch()

  const {isLoading, itemsData, error} = useSelector(

    state => state.storeReducer

  )

  useSafeEffect(() => {

    dispatch(loadItems())

  }, [dispatch])

  return (

    

  )

}

```