- How does
useSelectorwork in React-Redux?
useSelector is a React-Redux hook that allows a component to read data from the Redux store.
It subscribes the component to the store, and the component re-renders whenever the selected state changes.
useSelector accepts a selector function that returns the desired portion of state.
Example:
const count = useSelector((state) => state.counter.value);
Here:
state= entire Redux storestate.counter.value= specific slice of data needed- Component re-renders only when this value changes
How useSelector Works Internally
- Component calls
useSelectorwith a selector function useSelectorsubscribes to the Redux store- Whenever the store updates:
- Selector is re-executed
- It compares the new value with the previous selected value (shallow compare by default)
- If the selected value changes → Component re-renders
- If value does NOT change → No re-render (performance optimization)
✅ Example Code
import { useSelector } from "react-redux";
function Profile() {
const username = useSelector(state => state.user.name);
return <h3>Welcome, {username}</h3>;
}
Real-World Use Case
Imagine you have a dashboard with many widgets.
If each widget used the entire Redux store, everything would re-render on every update 😵
But with useSelector, each widget only re-renders when its specific data changes → huge performance improvement.
- What does this function do, and how would you use it in a Redux-based React app?
export const hasAccess = (state: Object): boolean => {
return get(state, ['settings', 'admin']) === true;
};
This function is a Redux selector that uses Lodash’s get() to safely read deeply nested properties (settings.admin) from the Redux state.
It returns a boolean value (true or false) based on whether admin access is enabled.
Using it with useSelector:
const hasAdminAccess = useSelector(hasAccess);
This ensures your component automatically updates whenever state.settings.admin changes.
- What is a selector in Redux?
A selector is a pure function that takes the Redux state and returns the required piece of data.
Selectors improve:
| Benefit | Explanation |
|---|---|
| Reusability | Same logic used everywhere |
| Maintainability | State structure changes only affect selectors |
| Performance (with memoization) | Can use reselect to avoid recomputing expensive values |
📌 Example with nested access:
const selectUserEmail = (state) => state.user?.profile?.email;
📌 Memoized selector (advanced):
import { createSelector } from "reselect";
const selectUser = (state) => state.user;
const selectUserEmail = createSelector(
[selectUser],
(user) => user.profile.email
);
- How does
useSelectordetect state changes internally?
useSelector subscribes to the Redux store and:
- Calls your selector whenever the state updates
- Compares new value with previous value using
=== - If changed → component re-renders
If same → no re-render (optimization)
📌 Example behavior:
| Previous value | New value | Re-render? |
|---|---|---|
"test" | "test" | ❌ No |
"test" | "hello" | ✅ Yes |
{user:1} | {user:1} (new object) | ✅ Yes (shallow compare fails) |
Performance Tip
If selecting objects/arrays, use memoized selectors with createSelector to avoid unnecessary re-renders.
