0Pricing
React Native Academy · Lección

Lectura del estado con useSelector

Utilice el hook useSelector para leer valores del store en un componente y escriba funciones selector que obtengan datos calculados a partir del estado sin procesar.

Lectura del estado con useSelector es una lección gratuita de React Native Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Native Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Native Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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.

Preguntas frecuentes

¿La lección «Lectura del estado con useSelector» es gratis?

Sí — el texto completo de «Lectura del estado con useSelector» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Native Academy, actualiza a CoddyKit PRO. El curso de React Native Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Lectura del estado con useSelector»?

Utilice el hook useSelector para leer valores del store en un componente y escriba funciones selector que obtengan datos calculados a partir del estado sin procesar. Practicas React Native Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Native Academy?

No se requiere experiencia previa. React Native Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Lectura del estado con useSelector»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Native Academy?

Sí. Cada lección de React Native Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Configuración del store y Provider de Redux
  2. Creación de slices con createSlice
  3. Lectura del estado con useSelector
  4. Thunks asíncronos con createAsyncThunk
← Volver a React Native Academy