How to fix useSelector must return the same type in every case in React

// ❌ Bad: Returns different types
const selectValue = (state: RootState) => {
  if (state.someCondition) {
    return state.data.value; // number
  }
  return null; // null
};

// ✅ Good: Always returns the same type
const selectValue = (state: RootState): number | null => {
  if (state.someCondition) {
    return state.data.value;
  }
  return null;
};

// Using .withTypes() (React Redux v9.1.0+)
import { useSelector } from 'react-redux';
import type { RootState } from './store';

export const useAppSelector = useSelector.withTypes<RootState>();

// In your component
const value = useAppSelector(selectValue); // No second argument needed

// If you need equality comparison, consider alternatives

import { createSelector } from '@reduxjs/toolkit';

const selectData = (state: RootState) => state.some.data;
const selectFilter = (state: RootState) => state.some.filter;

export const selectFilteredData = createSelector(
  [selectData, selectFilter],
  (data, filter) => data.filter(item => item.matches(filter))
);

// This selector is automatically memoized and has proper typing
const filteredData = useAppSelector(selectFilteredData);

npm update react-redux @types/react-redux

yarn upgrade react-redux @types/react-redux

interface ComplexResult {
  items: Item[];
  total: number;
  hasMore: boolean;
}

const selectComplexData = (state: RootState): ComplexResult => {
  // Complex logic here
  return {
    items: state.data.items,
    total: state.data.total,
    hasMore: state.data.hasMore
  };
};

// TypeScript now knows the exact return type
const complexData = useSelector(selectComplexData);