useSelector and useDispatch
In this page:
Reading State with useSelector
useSelector takes a function that receives the whole Redux state and returns just the piece a component needs. React-redux subscribes the component to that specific slice, so it only re-renders when the selected value actually changes, not on every unrelated store update.
Note: Keep selector functions small and specific, like state => state.cart.items.length, rather than selecting large objects wholesale.
Warning: Selecting the entire state (state => state) defeats the optimization — the component re-renders on literally every store update.
Example: Reading State with useSelector
// Run in your local React project (npm install required)
import { useSelector } from 'react-redux';
function ItemCount() {
const count = useSelector(state => state.cart.items.length);
return <p>Items: {count}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Dispatching Actions with useDispatch
useDispatch() returns the store's dispatch function directly, letting a component trigger state changes by calling dispatch(action) inside event handlers, exactly like calling store.dispatch() manually, but wired to the store via Context under the hood.
Note: Store the returned dispatch function in a variable (const dispatch = useDispatch()) once, near the top of the component.
Warning: Calling useDispatch() only gives you the function — you still need to call dispatch(someAction) to actually trigger a change.
Example: Dispatching Actions with useDispatch
// Run in your local React project (npm install required)
import { useDispatch } from 'react-redux';
function AddButton() {
const dispatch = useDispatch();
return <button onClick={() => dispatch({ type: 'cart/addItem', payload: { id: 3 } })}>Add</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Combining Both in One Component
Most components that interact with Redux use both hooks together: useSelector to display current state, and useDispatch to trigger updates in response to user actions, forming a complete read-and-write connection to the store.
Note: Destructure both hooks near the top of the component for a clear, consistent structure across your Redux-connected components.
Warning: Avoid deriving complex computed values inline inside useSelector on every render — compute them in the component body instead, from the selected raw data.
Example: Combining Both in One Component
// Run in your local React project (npm install required)
import { useSelector, useDispatch } from 'react-redux';
function Cart() {
const items = useSelector(state => state.cart.items);
const dispatch = useDispatch();
return (
<div>
<p>{items.length} items</p>
<button onClick={() => dispatch({ type: 'cart/clear' })}>Clear Cart</button>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Selecting the entire state object with useSelector(state => state) instead of just the slice needed, causing re-renders on every single change.
- Calling useDispatch() and forgetting to actually invoke the returned function.
- Creating a new object/array inline inside useSelector, causing unnecessary re-renders since a fresh reference never looks equal to the last one.
- useSelector(fn) subscribes a component to a specific slice of the Redux store, re-rendering when that slice changes.
- useDispatch() returns the store's dispatch function for triggering actions.
- Selecting only the specific data a component needs (not the whole state) minimizes unnecessary re-renders.
- Both hooks come from react-redux and require the component to be inside a <Provider>.
Requires npm install react-redux (hooks API added in react-redux 7.1+) — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: