diff --git a/README.md b/README.md index cc1728fafd..c53ee4d926 100644 --- a/README.md +++ b/README.md @@ -118,11 +118,11 @@ - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks. - [`useMountedState`](./docs/useMountedState.md) and [`useUnmountPromise`](./docs/useUnmountPromise.md) — track if component is mounted. - [`usePromise`](./docs/usePromise.md) — resolves promise only while component is mounted. - - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through life-cycles. + - [`useLogger`](./docs/useLogger.md) — logs in console as component goes through lifecycles. - [`useMount`](./docs/useMount.md) — calls `mount` callbacks. - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks. - [`useUpdateEffect`](./docs/useUpdateEffect.md) — run an `effect` only on updates. - - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that that works on server. + - [`useIsomorphicLayoutEffect`](./docs/useIsomorphicLayoutEffect.md) — `useLayoutEffect` that works on server. - [`useDeepCompareEffect`](./docs/useDeepCompareEffect.md), [`useShallowCompareEffect`](./docs/useShallowCompareEffect.md), and [`useCustomCompareEffect`](./docs/useCustomCompareEffect.md)

@@ -142,13 +142,13 @@ - [`useStateList`](./docs/useStateList.md) — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd) - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d) - [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo) - - [`useList`](./docs/useList.md) ~and [`useUpsert`](./docs/useUpsert.md)~ — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w) + - [`useList`](./docs/useList.md) — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w) - [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161) - [`useSet`](./docs/useSet.md) — tracks state of a Set. [![][img-demo]](https://codesandbox.io/s/bold-shtern-6jlgw) - [`useQueue`](./docs/useQueue.md) — implements simple queue. - [`useStateValidator`](./docs/useStateValidator.md) — tracks state of an object. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatevalidator--demo) - [`useStateWithHistory`](./docs/useStateWithHistory.md) — stores previous state values and provides handles to travel through them. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usestatewithhistory--demo) - - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — alike the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo) + - [`useMultiStateValidator`](./docs/useMultiStateValidator.md) — like the `useStateValidator`, but tracks multiple states at a time. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemultistatevalidator--demo) - [`useMediatedState`](./docs/useMediatedState.md) — like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo) - [`useFirstMountState`](./docs/useFirstMountState.md) — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo) - [`useRendersCount`](./docs/useRendersCount.md) — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo) diff --git a/docs/useList.md b/docs/useList.md index caffe42f6b..fdcc23ace8 100644 --- a/docs/useList.md +++ b/docs/useList.md @@ -70,4 +70,4 @@ const [list, { ## Related hooks -- [useUpsert](./useUpsert.md) + diff --git a/docs/useUpsert.md b/docs/useUpsert.md index 25fe7d71fd..ab9403774c 100644 --- a/docs/useUpsert.md +++ b/docs/useUpsert.md @@ -1,9 +1,25 @@ # `useUpsert` -> DEPRECATED! -> Use `useList` hook's upsert action instead +> **⚠️ DEPRECATED** +> This hook is deprecated and will be removed in a future version. +> Use `useList` hook's `upsert` action instead. -Superset of [`useList`](./useList.md). Provides an additional method to upsert (update or insert) an element into the list. +This hook was a superset of [`useList`](./useList.md) that provided an additional method to upsert (update or insert) an element into the list. The same functionality is now available directly in `useList`. + +## Migration Guide + +Replace: +```jsx +import { useUpsert } from 'react-use'; +const [list, { set, upsert, remove }] = useUpsert(comparisonFunction, initialItems); +``` + +With: +```jsx +import { useList } from 'react-use'; +const [list, { set, upsert, removeAt }] = useList(initialItems); +// Use upsert(comparisonFunction, newItem) instead of upsert(newItem) +``` ## Usage diff --git a/src/useUpsert.ts b/src/useUpsert.ts index 2fdb3d8fc3..cb3a58f006 100644 --- a/src/useUpsert.ts +++ b/src/useUpsert.ts @@ -12,6 +12,13 @@ export default function useUpsert( predicate: (a: T, b: T) => boolean, initialList: IHookStateInitAction = [] ): [T[], UpsertListActions] { + if (process.env.NODE_ENV !== 'production') { + console.warn( + 'useUpsert is deprecated and will be removed in a future version. ' + + 'Use useList hook\'s upsert action instead. ' + + 'See: https://github.com/streamich/react-use/blob/master/docs/useUpsert.md' + ); + } const [list, listActions] = useList(initialList); return [ diff --git a/tests/useNetworkState.test.ts b/tests/useNetworkState.test.ts index 93c583aac0..eaf036e5db 100644 --- a/tests/useNetworkState.test.ts +++ b/tests/useNetworkState.test.ts @@ -1,7 +1,7 @@ import { renderHook } from '@testing-library/react-hooks'; import { useNetworkState } from '../src'; -//ToDo: improve tests +// TODO: Add comprehensive tests for network state changes, offline/online events, and network information properties describe(`useNetworkState`, () => { it('should be defined', () => { expect(useNetworkState).toBeDefined();