From a8098b8c7deedcc3fae59b128452efa4cfe9c96a Mon Sep 17 00:00:00 2001 From: Josep M Sobrepere Date: Thu, 2 May 2019 18:14:44 +0200 Subject: [PATCH] Remove deps of useSelector --- src/hooks/useSelector.js | 14 +++++--------- test/hooks/useSelector.spec.js | 30 +----------------------------- 2 files changed, 6 insertions(+), 38 deletions(-) diff --git a/src/hooks/useSelector.js b/src/hooks/useSelector.js index 83e1666f9..8e40cfa10 100644 --- a/src/hooks/useSelector.js +++ b/src/hooks/useSelector.js @@ -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 * @@ -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
{counter}
* } */ -export function useSelector(selector, deps) { +export function useSelector(selector) { invariant(selector, `You must pass a selector to useSelectors`) const { store, subscription: contextSub } = useReduxContext() @@ -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 @@ -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 }) diff --git a/test/hooks/useSelector.spec.js b/test/hooks/useSelector.spec.js index e0fb95c8b..c37c5b6e6 100644 --- a/test/hooks/useSelector.spec.js +++ b/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' @@ -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
- } - - rtl.render( - - - - ) - - 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', () => {