Collection of hook-based memoized selector factories for declarations outside of render.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Working hooks Oct 27, 2018
src Working hooks Oct 27, 2018
.babelrc.js Working hooks Oct 27, 2018
.gitignore Working hooks Oct 27, 2018
.huskyrc Working hooks Oct 27, 2018
.lintstagedrc Working hooks Oct 27, 2018
.npmrc Working hooks Oct 27, 2018
.travis.yml Working hooks Oct 27, 2018
README.md Working hooks Oct 27, 2018
package.json Add author entry to package.json Oct 29, 2018
rollup.config.js Working hooks Oct 27, 2018

README.md

react-selector-hooks

Collection of hook-based memoized selector factories for declarations outside of render.

Motivation

Reusing existing functions. It also might often be desirable to declare selector functions outside of render to keep render functions less bloated.

Instead of this:

function Component({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
  return <span>{memoizedValue}</span>
}

You can write this:

const useSelector = createSelector(computeExpensiveValue)

function Component({ a, b }) {
  const memoizedValue = useSelector(a, b)
  return <span>{memoizedValue}</span>
}

API

createSelector(resultFunc)

import * as React from 'react'
import { createSelector } from 'react-selector-hooks'

const useSelector = createSelector(computeExpensiveValue)

export default function Component({ a, b }) {
  const memoizedValue = useSelector(a, b)
  return <span>{memoizedValue}</span>
}

createStateSelector([inputSelectors], resultFunc)

This is really similar to reselect's createSelector.

import * as React from 'react'
import { createStateSelector } from 'react-selector-hooks'

const useSelector = createStateSelector(
  [
    state => state.values.value1,
    (state, a) => state.values.value2 + a,
    (state, a) => state.values.value3 * a,
  ],
  (value1, value2, value3) => value1 + value2,
)

export default function Component({ a }) {
  const state = React.useContext(StoreContext)
  const memoizedValue = useSelector(state, a)
  return <span>{memoizedValue}</span>
}

createStructuredSelector({...inputSelectors}, resultFunc)

This is really similar to reselect's createStructuredSelector.

import * as React from 'react'
import { createStructuredSelector } from 'react-selector-hooks'

const useSelector = createStructuredSelector(
  {
    value1: state => state.values.value1,
    value2: (state, a) => state.values.value2 + a,
  },
  ({ value1, value2 }) => value1 + value2,
)

export default function Component({ a }) {
  const state = React.useContext(StoreContext)
  const memoizedValue = useSelector(state, a)
  return <span>{memoizedValue}</span>
}