Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove deps of useSelector #1272

Merged
merged 1 commit into from
May 13, 2019
Merged

Remove deps of useSelector #1272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions src/hooks/useSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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