With useSelector(), returning a new objectĮvery time will always force a re-render by default. It didn't matter if the return object wasĪ new reference or not - connect() just compared the individual fields. With mapState, all individual fields were returned in a combined object. This has several implications on how you should use useSelector(). This is different than connect(), which uses shallow equality checks on the results of mapState calls The default comparison is a strict = referenceĬomparison. However, when an action is dispatched to the Redux store, useSelector() only forces a re-render if the selector resultĪppears to be different than the last result. (A cached result may be returned by the hook without re-running the selector if it's the same function reference as on a previous render of the component.) When the function component renders, the provided selector function will be called and its result will be returnedįrom the useSelector() hook. See the Usage Warnings section of this page for further details. There are potential edge cases with using props in selectors that may cause issues. Because of the React update batching behavior used in React Redux v7, a dispatched action that causes multiple useSelector()s in the same component to return new values should only result in a single re-render. Each call to useSelector() creates an individual subscription to the Redux store. You may call useSelector() multiple times within a single function component. The selector is approximately equivalent to the mapStateToProps argument to connect conceptually. useSelector() uses strict = reference equality checks by default, not shallow equality (see the following section for more details). If they are the same, the component will not re-render. If they are different, the component will be forced to re-render. When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched. The selector will be run whenever the function component renders (unless its reference hasn't changed since a previous render of the component so that a cached result can be returned by the hook without re-running the selector).

The return value of the selector will be used as the return value of the useSelector() hook.

The selector may return any value as a result, including directly returning a value that was nested inside state, or deriving new values. The selector will be called with the entire Redux store state as its only argument. See Using Redux: Deriving Data with Selectors in the Redux docs for more details on writing and using selector functions. The selector function should be pure since it is potentially executed multiple times and at arbitrary points in time.

5 types of hooks for writing examples