web icon indicating copy to clipboard operation
web copied to clipboard

Published 20 hours ago • verified publisher icon react-hookz

Port remaining hooks from `react-use`

Open JoeDuncko opened this issue 4 years ago • 61 comments

Our goal with @react-hookz/web is to give the react community a general-purpose React hooks library built with care.

We'd like to port the remaining hooks from react-use (the project @react-hookz/web grew out of) while keeping in mind our tenants:

  • General-purposeness (hooks should fulfill a wide array of use cases)
  • Composability (a preference for hooks that are useful for building other hooks)
  • No or very few dependencies
  • SSR compatibility
  • 100% test coverage (ideally)
  • Concrete example use cases

Hooks to port

Sensors

UI

  • [ ] useAudio — plays audio and exposes its controls.
  • [x] useClickAway — triggers callback when user clicks outside target area. (Implmented as useClickOutside)
  • [ ] useCss — dynamically adjusts CSS.
  • [ ] useDrop — tracks file, link and copy-paste drops.
  • [ ] useDropArea — tracks file, link and copy-paste drops.
  • [ ] useFullscreen — display an element or video full-screen.
  • [ ] useSlider — provides slide behavior over any HTML element.
  • [ ] useSpeech — synthesizes speech from a text string.
  • [ ] useVibrate — provide physical feedback using the Vibration API.
  • [ ] useVideo — plays video, tracks its state, and exposes playback controls.

Animations

  • [ ] useRaf — re-renders component on each requestAnimationFrame.
  • [x] ~~useInterval and useHarmonicIntervalFn — re-renders component on a set interval using setInterval.~~ (Implemented as useIntervalEffect).
  • [ ] useSpring — interpolates number over time according to spring dynamics.
  • [x] ~~useTimeout — re-renders component after a timeout.~~ (Can be composed from other hooks, see migration guide).
  • [x] ~~useTimeoutFn — calls given function after a timeout.~~ (Implemented as useTimeoutEffect).
  • [ ] useTween — re-renders component, while tweening a number from 0 to 1.
  • [x] useUpdate — returns a callback, which re-renders component when called. (Implemented as useRerender)

Side-effects

Lifecycles

State

  • [x] ~~createMemo — factory of memoized hooks.~~ (Not planning to implement)
  • [x] ~~createReducer — factory of reducer hooks with custom middleware.~~ (Not planning to implement)
  • [x] ~~createReducerContext — factory of hooks for a sharing state between components.~~ (Not planning to implement)
  • [x] ~~createStateContext — factory of hooks for a sharing state between components.~~ (Not planning to implement)
  • [x] ~~useDefault — returns the default value when state is null or undefined.~~ (No plans to implement. Use useMediatedState instead).
  • [x] ~~useGetSet — returns state getter get() instead of raw state.~~ (No plans to implement)
  • [x] ~~useGetSetState — as if useGetSet and useSetState had a baby.~~ (No plans to implement)
  • [x] useLatest — returns the latest state or props (Implemented as useSynchedRef)
  • [x] usePrevious — returns the previous state or props. (Implemented as usePrevious)
  • [x] usePreviousDistinct — like usePrevious but with a predicate to determine if previous should update. (Implemented as usePreviousDistinct)
  • [ ] useObservable — tracks latest value of an Observable.
  • [ ] useRafState — creates setState method which only updates after requestAnimationFrame.
  • [x] ~~useSetState — creates setState method which works like this.setState.~~ (No plans to implement)
  • [ ] useStateList — circularly iterates over an array.
  • [x] useToggle — tracks state of a boolean. (Implemented as useToggle)
  • [x] useBoolean — tracks state of a boolean. (Implemented as useToggle)
  • [x] useCounter — tracks state of a number.
  • [x] ~~useNumber — tracks state of a number.~~ (Implemented as useCounter)
  • [x] useList — tracks state of an array.
  • [x] ~~useUpsert — tracks state of an array.~~ (Use useList instead.)
  • [x] useMap — tracks state of an object. (Implemented as useMap)
  • [x] useSet — tracks state of a Set. (Implemented as useSet)
  • [x] useQueue — implements simple queue. (Implemented as useQueue)
  • [x] useStateValidator — tracks state of an object.
  • [ ] useStateWithHistory — stores previous state values and provides handles to travel through them.
  • [ ] useMultiStateValidator — alike the useStateValidator, but tracks multiple states at a time.
  • [x] useMediatedState — like the regular useState but with mediation by custom function. (Implemented as useMediatedState)
  • [x] useFirstMountState — check if current render is first. (Implemented as useFirstMountState)
  • [x] ~~useRendersCount — count component renders.~~ (Implemented as useRenderCount).
  • [x] ~~createGlobalState — cross component shared state.~~ (Not planning to implement)
  • [x] ~~useMethods — neat alternative to useReducer.~~ (No plans to implement)

Miscellaneous

Join our community!

Have a question? Create a discussion on GitHub or join our Discord community.

Interested in contributing code? Check out our contribution guide. We are excited to see your pull request!

JoeDuncko avatar May 02 '21 14:05 JoeDuncko

To be clear - not all hooks will be ported, as for me - i'm against of transfering all create* hooks. And its not the only example.

xobotyi avatar May 02 '21 18:05 xobotyi

To be clear - not all hooks will be ported, as for me - i'm against of transfering all create* hooks. And its not the only example.

Definitely! Should we make a list of all the hooks that we don't want ported? Then I can cross them out above. @xobotyi

JoeDuncko avatar May 02 '21 18:05 JoeDuncko

@JoeDuncko its hard to say rn, im reviewing the hooks on the go and currently refactoring (the full cycle refactoring, meaning reimplementing them from the scratch) hooks im currently using at my job, as this is easiest way for me, as i have little expertise in other areas.

xobotyi avatar May 02 '21 18:05 xobotyi

useMountedState and useUnmountPromise — track if component is mounted. (Implemented as useIsMounted)

we dont have useUnmountPromise yet

xobotyi avatar May 02 '21 18:05 xobotyi

Crossed out the "create" hooks, split up all the lines with "and"s.

JoeDuncko avatar May 03 '21 13:05 JoeDuncko

Added links to the new useIsomorphicLayoutEffect and useDebounceCallback hooks

JoeDuncko avatar May 06 '21 13:05 JoeDuncko

Thank you so much for starting this repo and leading this huge migration work! 🍻

Just wondering what the reasoning is for not migrating the create* utilities, and particularly createMemo. In my project, I have a good number of utility functions that loop over very large arrays, so it's important that they are memoised with useMemo. With createMemo I don't have to create hooks with the same signature as the utility functions, so it's really convenient and avoids a lot of duplication (especially since I use TypeScript).

I should add that I can't just turn all of my utility functions into hooks with useMemo inside them, as I use some of them inside loops. I need both the hook and non-hook versions.

axelboc avatar May 19 '21 15:05 axelboc

This issue should now be up to date FYI.

JoeDuncko avatar Jun 14 '21 16:06 JoeDuncko

It'd be nice to know what needs to be done to port a hook over. I'd like to port useCopyToClipboard, but I'm not sure if it needs refactoring.

Should it keep using useSetState? Can useSetState be ported over as-is? It also needs to use useIsMounted instead of useMountedState. What else?

I wouldn't mind helping out with stories/docs so someone with more context could focus on writing/porting the hooks.

hedgerh avatar Jun 26 '21 14:06 hedgerh

@hedgerh it can't be ported as-is since it's dependency (clipboardjs) should be listed as optional depency now (look at useCookie to see how package check implemented). Tbh I don't remember all internals and away from pc, I'll reply to you once I'll reach the laptop.

xobotyi avatar Jun 26 '21 15:06 xobotyi

No rush. Why are these being listed as peerdeps and as optional now?

hedgerh avatar Jun 26 '21 16:06 hedgerh

@hedgerh since very few people need these hooks - there is no need to make everyone to download them.

xobotyi avatar Jun 26 '21 16:06 xobotyi

@xobotyi @JoeDuncko I'm wondering are going to implement the useCustomCompareEffect |useDeepCompareEffect hook?

Rey-Wang avatar Sep 25 '21 09:09 Rey-Wang

@Rey-Wang working on it right now, will be published Monday I guess

xobotyi avatar Sep 25 '21 10:09 xobotyi

This issue is now up to date.

@Rey-Wang we now have useCustomCompareEffect and useDeepCompareEffect!

JoeDuncko avatar Jan 14 '22 02:01 JoeDuncko

usePreviousDistinct done ✅

kylemh avatar Jan 17 '22 11:01 kylemh

usePreviousDistinct done ✅

I think we are missing this one in the README

EDIT: Made a PR

JoeDuncko avatar Jan 17 '22 23:01 JoeDuncko

Can you please re-visit removing createMemo? It's an extremely useful pattern that allows you to share a memoized function across components. https://github.com/streamich/react-use/blob/master/docs/createMemo.md

matthew-dean avatar May 11 '22 18:05 matthew-dean

Hello, I'm first time working on open source projects. I want to start with useError :)

Bailig avatar Jun 05 '22 10:06 Bailig

Hello, I finished the useError hook, but I couldn't start the storybook. I'm just wondering if it's a known issue?

yarn run v1.22.18
$ start-storybook -p 6006 --docs --no-manager-cache
info @storybook/react v6.4.22
info 
info => Loading presets
info => Serving static files from ././.storybook/public at /
ERR! TypeError: (intermediate value) is not iterable
ERR!     at _default (/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async Object.start (/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR!  TypeError: (intermediate value) is not iterable
ERR!     at _default (/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async Object.start (/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)

Bailig avatar Jun 05 '22 11:06 Bailig

@Bailig Yes, Storybook being broken in main is a known issue. Dependabot broke something last week. Will try to fix it today. Sorry about that!

JoeDuncko avatar Jun 05 '22 14:06 JoeDuncko

Hey guys, I'd like to do migration from old react-use, the only remaining bit for me is useBeforeUnload. Do you have some estimation when will be migrated ?

thanks!

jquintozamora avatar Oct 27 '22 15:10 jquintozamora

This is a relatively easy project to get involved with contributions! Maybe you'd be interested in opening a PR yourself for it?

kylemh avatar Oct 27 '22 15:10 kylemh

useBeforeUnload is easily achievable with useEventListener hook

useEventListener(window, 'beforeunload', ()=>{ /* do your stuff here */ })

xobotyi avatar Oct 27 '22 16:10 xobotyi

If we don't plan to implement useBeforeUnload, maybe we should strike it from OP?

kylemh avatar Oct 27 '22 16:10 kylemh

surely do, just realized just now (list been made up before useEventListener implementation)

xobotyi avatar Oct 27 '22 16:10 xobotyi

Overall you can make a PR with migration guide for taht hook (have not enough time for that atm)

xobotyi avatar Oct 27 '22 16:10 xobotyi

That being said, maybe there's something to be said for NOT porting this hook if it's so easy to accomplish with useEventListener

kylemh avatar Oct 27 '22 17:10 kylemh

I'll mention it in the list later

xobotyi avatar Oct 27 '22 17:10 xobotyi

@ArttuOll could you please make a mention to migration guide about unwilling to implement useBeforeUnload with example from above conversation?

xobotyi avatar Oct 30 '22 17:10 xobotyi