Nickelback Plays Music

    @dhmk/use-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    useHooks

    npm install @dhmk/use-hooks

    This package optimizes usage of a global state in a React app.

    It lets you use any hooks at the top level of your app without refreshing all children components on state changes.

    Normally, if you have a code like this:

    function App() {
      return <AppState.Provider value={appState}>...</AppState.Provider>;
    }

    any changes in state will cause unnecessary re-renders in descendant components.

    This package allows you to tune which components should re-render in a similar way that react-redux does, but without actually using redux.

    For more info see examples folder.

    API

    <Provider state={}>...</Provider>

    Provides a state to children components via context. Whenever the state changes it will NOT update children. Instead, any children descendants, that called useSelector will be updated if selector produces a different value.

    useSelector<S, T>(fn: (state: S) => T, eq?: (a: T, b: T) => boolean)

    Same as Redux useSelector. It will trigger an update only if newly selected value differs from previous one.

    createSelectorHook<S>()

    Helper for typescript

    function useApp() {
      return {
        counter: useCounter(),
        todos: useTodos(),
      };
    }
    
    const useSelector = createSelectorHook<ReturnType<typeof useApp>>();
    
    // now `s` will have correct type instead of `any`
    useSelector(s => ...)

    Install

    npm i @dhmk/use-hooks

    DownloadsWeekly Downloads

    2

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    6.71 kB

    Total Files

    9

    Last publish

    Collaborators

    • dhmk083