0Pricing
React Native Academy · Lesson

Reading State with useSelector

Use the useSelector hook to read values from the store in a component, write selector functions that derive computed data from raw state.

Reading State with useSelector is a free React Native Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is useSelector?

useSelector is a hook from react-redux that lets a component read data from the Redux store. It accepts a selector function as its argument. The selector receives the entire root state and returns only the piece of data that component needs. When that piece of data changes, React re-renders the component automatically.

Basic useSelector Usage

Call useSelector inside a functional component, passing an arrow function that extracts the value you need from the global state. The hook subscribes to the store and triggers a re-render only when the selected value changes, avoiding unnecessary re-renders if unrelated parts of the state update.

import React from 'react';
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';
import type { RootState } from '../../store';

export default function CounterDisplay() {
  const count = useSelector((state: RootState) => state.counter.value);

  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

Using Typed useAppSelector

In TypeScript projects, use the pre-typed useAppSelector hook you created in the hooks file. This eliminates the need to annotate the state parameter every time you call the hook. Your editor will also autocomplete state property names, making it faster to write selectors correctly.

import { useAppSelector } from '../../store/hooks';

export default function CounterDisplay() {
  // No need to annotate RootState — it is inferred automatically
  const count = useAppSelector((state) => state.counter.value);
  const status = useAppSelector((state) => state.counter.status);

  return <Text>{status === 'loading' ? 'Loading...' : count}</Text>;
}

What Is a Selector Function?

A selector is simply a function that takes the Redux state as an argument and returns a derived value. Keeping selectors separate from components promotes reuse — many components can use the same selector. You can also compose selectors to derive more complex computed values from raw state data.

// selectors.ts
import type { RootState } from './store';

export const selectCount = (state: RootState) => state.counter.value;
export const selectDoubledCount = (state: RootState) => state.counter.value * 2;

// In component:
const count = useAppSelector(selectCount);
const doubled = useAppSelector(selectDoubledCount);

Re-render Behavior of useSelector

useSelector uses strict equality (===) to compare the previous and next selected values. The component re-renders only when the returned value changes. If your selector returns an object or array literal (like state.items.filter(...)), it will return a new reference on every call, causing unnecessary re-renders. Keep selectors returning primitives or memoize them.

// This runs a filter on every store update — returns new array each time!
const activeItems = useAppSelector(
  (state) => state.todos.filter((t) => t.active) // Bad for performance
);

// Better: use a stable reference or memoize with reselect

Memoized Selectors with reselect

The reselect library (included in RTK) provides createSelector for building memoized selectors. A memoized selector caches its last result and only recomputes when its input selectors return different values. This prevents expensive derivations from running on every state update when only unrelated parts of state changed.

import { createSelector } from '@reduxjs/toolkit';
import type { RootState } from './store';

const selectTodos = (state: RootState) => state.todos.items;
const selectFilter = (state: RootState) => state.todos.filter;

export const selectFilteredTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => todos.filter((t) => t.status === filter)
);

Selecting Nested State

You can drill as deep as needed into the state tree inside a selector. For complex state shapes, chain property accesses carefully and handle optional chaining (?.) to avoid runtime errors if a slice has not yet loaded data. Keep selectors readable by giving them meaningful names that describe what data they return.

const userName = useAppSelector((state) => state.user.profile?.name ?? 'Guest');
const cartTotal = useAppSelector((state) =>
  state.cart.items.reduce((sum, item) => sum + item.price * item.qty, 0)
);

Combining Multiple Selectors

A single component can call useSelector multiple times to read different pieces of state, or you can call it once and destructure from a selector that returns an object. Calling it multiple times is preferred because each subscription is independent — the component only re-renders when one of the selected values actually changes.

export default function ProfileScreen() {
  const name = useAppSelector((state) => state.user.name);
  const email = useAppSelector((state) => state.user.email);
  const isPremium = useAppSelector((state) => state.subscription.tier === 'premium');

  return (
    <View>
      <Text>{name}</Text>
      <Text>{email}</Text>
      {isPremium && <Text>Premium Member</Text>}
    </View>
  );
}

Selector Co-location Pattern

A popular pattern is to define selectors inside the slice file alongside the reducers. Prefix them with select and export them named. This co-location makes it easy to find and update a selector if the state shape changes, since both the reducer and the selector live in the same file.

// counterSlice.ts
export const selectCount = (state: RootState) => state.counter.value;
export const selectStatus = (state: RootState) => state.counter.status;

// In component:
import { selectCount, selectStatus } from './counterSlice';
const count = useAppSelector(selectCount);

Avoiding Object Returns in useSelector

If you must return an object from useSelector, use the shallowEqual comparator as the second argument. This compares each property of the returned object separately, preventing re-renders when the object's contents have not changed but the reference is new. Import shallowEqual from react-redux.

import { useSelector, shallowEqual } from 'react-redux';

const { name, email } = useAppSelector(
  (state) => ({ name: state.user.name, email: state.user.email }),
  shallowEqual
);

useSelector vs mapStateToProps

The older connect(mapStateToProps) higher-order component pattern achieves the same goal as useSelector but with more boilerplate. Hooks are the modern, preferred approach because they require less code, work inside any functional component, and compose naturally with other hooks. The connect API is still supported but not recommended for new code.

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: useSelector subscribes a component to a slice of Redux state and re-renders when that value changes, selector functions keep data derivation logic reusable and testable, and createSelector memoizes expensive computations to prevent unnecessary re-renders. Next up we explore async thunks with createAsyncThunk.

Frequently asked questions

Is the “Reading State with useSelector” lesson free?

Yes — the full text of “Reading State with useSelector” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.

What will I learn in “Reading State with useSelector”?

Use the useSelector hook to read values from the store in a component, write selector functions that derive computed data from raw state. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Native Academy?

No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Reading State with useSelector” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Native Academy lesson?

Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up the Redux Store and Provider
  2. Creating Slices with createSlice
  3. Reading State with useSelector
  4. Async Thunks with createAsyncThunk
← Back to React Native Academy