Tag: Redux Interview Questions and Answers

1. How does useSelector work 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 store
• state.counter.value = specific slice of data needed
• Component re-renders only when this value changes

How useSelector Works Internally

1. Component calls useSelector with a selector function
2. useSelector subscribes to the Redux store
3. Whenever the store updates:
   • Selector is re-executed
   • It compares the new value with the previous selected value (shallow compare by default)
4. If the selected value changes → Component re-renders
5. 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.

2. 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.

3. 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:

📌 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
);

4. How does useSelector detect state changes internally?

useSelector subscribes to the Redux store and:

1. Calls your selector whenever the state updates
2. Compares new value with previous value using ===
3. If changed → component re-renders
   If same → no re-render (optimization)

📌 Example behavior:

Performance Tip

If selecting objects/arrays, use memoized selectors with createSelector to avoid unnecessary re-renders.