Skip to content

Commit

Permalink
Remove deps of useSelector (#1272)
Browse files Browse the repository at this point in the history
  • Loading branch information
josepot authored and timdorr committed May 30, 2019
1 parent a7daf47 commit c8c53f1
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 38 deletions.
14 changes: 5 additions & 9 deletions src/hooks/useSelector.js
Expand Up @@ -24,8 +24,6 @@ const useIsomorphicLayoutEffect =
* useful if you provide a selector that memoizes values).
*
* @param {Function} selector the selector function
* @param {any[]} deps (optional) dependencies array to control referential stability
* of the selector
*
* @returns {any} the selected state
*
Expand All @@ -36,11 +34,11 @@ const useIsomorphicLayoutEffect =
* import { RootState } from './store'
*
* export const CounterComponent = () => {
* const counter = useSelector(state => state.counter, [])
* const counter = useSelector(state => state.counter)
* return <div>{counter}</div>
* }
*/
export function useSelector(selector, deps) {
export function useSelector(selector) {
invariant(selector, `You must pass a selector to useSelectors`)

const { store, subscription: contextSub } = useReduxContext()
Expand All @@ -51,15 +49,13 @@ export function useSelector(selector, deps) {
contextSub
])

const memoizedSelector = useMemo(() => selector, deps)

const latestSubscriptionCallbackError = useRef()
const latestSelector = useRef(memoizedSelector)
const latestSelector = useRef(selector)

let selectedState = undefined

try {
selectedState = memoizedSelector(store.getState())
selectedState = selector(store.getState())
} catch (err) {
let errorMessage = `An error occured while selecting the store state: ${
err.message
Expand All @@ -77,7 +73,7 @@ export function useSelector(selector, deps) {
const latestSelectedState = useRef(selectedState)

useIsomorphicLayoutEffect(() => {
latestSelector.current = memoizedSelector
latestSelector.current = selector
latestSelectedState.current = selectedState
latestSubscriptionCallbackError.current = undefined
})
Expand Down
30 changes: 1 addition & 29 deletions test/hooks/useSelector.spec.js
@@ -1,6 +1,6 @@
/*eslint-disable react/prop-types*/

import React, { useReducer } from 'react'
import React from 'react'
import { createStore } from 'redux'
import { renderHook, act } from 'react-hooks-testing-library'
import * as rtl from 'react-testing-library'
Expand Down Expand Up @@ -154,34 +154,6 @@ describe('React', () => {

expect(renderedItems.length).toBe(1)
})

it('re-uses the selector if deps do not change', () => {
let selectorId = 0
let forceRender

const Comp = () => {
const [, f] = useReducer(c => c + 1, 0)
forceRender = f
const renderedSelectorId = selectorId++
const value = useSelector(() => renderedSelectorId, [])
renderedItems.push(value)
return <div />
}

rtl.render(
<ProviderMock store={store}>
<Comp />
</ProviderMock>
)

rtl.act(forceRender)

// this line verifies the susbcription callback uses the same memoized selector and therefore
// does not cause a re-render
store.dispatch({ type: '' })

expect(renderedItems).toEqual([0, 0])
})
})

describe('edge cases', () => {
Expand Down

0 comments on commit c8c53f1

Please sign in to comment.