This article is about fixing TypeError Cannot redefine property useSelector in reduxjs React Redux
  • 08-Feb-2023
Lightrun Team
Author Lightrun Team
This article is about fixing TypeError Cannot redefine property useSelector in reduxjs React Redux

TypeError: Cannot redefine property: useSelector in reduxjs React Redux

Lightrun Team
Lightrun Team

Explanation of the problem

The version of React, ReactDOM/React Native, Redux, and React Redux being used are as follows:

  • React: “17.0.2”
  • React Native: “0.68.2”
  • Redux: “4.2.0”
  • React Redux: “8.0.1”

The current behavior is that, in some test cases, the spyOn method is used to mock the useSelector hook of React Redux. This is achieved as follows:

import * as ReactRedux from 'react-redux';
jest.spyOn(ReactRedux, 'useSelector').mockReturnValueOnce({value: mockValue});

However, after updating to version 8.0.1 of React Redux, the following error is encountered:

TypeError: Cannot redefine property: useSelector
        at Function.defineProperty (<anonymous>)

The expected behavior is that, prior to the update to version 8.0.1, everything was working as expected when using version 7.2.8 of React Redux and version 4.1.2 of Redux. No information is provided about the affected browser and operating system.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for TypeError: Cannot redefine property: useSelector in reduxjs React Redux

The issue at hand is with mocking the “useSelector” hook from the “react-redux” library when using the latest version of React Redux. The current behavior is that when trying to mock “useSelector” using “jest.spyOn” in a test case, the following error is encountered: “TypeError: Cannot redefine property: useSelector”.

The proposed solution to this issue is to use “jest.mock” to mock the “react-redux” library, allowing to define custom behavior for the “useSelector” and “useDispatch” hooks. The code below demonstrates how to achieve this by creating mock functions for “mockDispatch” and “mockSelector”.

const mockDispatch = jest.fn();
const mockSelector = jest.fn();

jest.mock("react-redux", () => ({
 useDispatch: () => mockDispatch,
 useSelector: () => mockSelector,

This solution ensures that the behavior of the “useSelector” and “useDispatch” hooks can be properly controlled during tests, allowing to mock their behavior as necessary. By using this solution, it is possible to avoid encountering the “TypeError: Cannot redefine property: useSelector” error and successfully run tests that utilize the latest version of React Redux.

Other popular problems with reduxjs React Redux

Problem: Keeping Components Synchronized with the Redux Store

When building applications with React Redux, it is important to ensure that components are kept synchronized with the underlying Redux store. This can be challenging, as the components need to re-render when the state of the Redux store changes, and it is easy to miss updates.


The solution to this issue is to use the useSelector hook to subscribe components to changes in the Redux store. The useSelector hook returns the current state of the Redux store and re-renders the component whenever the state changes. The following code block demonstrates how to use the useSelector hook:

import { useSelector } from "react-redux";

const Component = () => {
  const state = useSelector(state => state);

  return (
    // Render component

Problem: Inconsistent State Management in Complex Applications

One of the common issues with Redux and React Redux is the difficulty in managing a consistent state in complex applications. As the application grows, it becomes challenging to keep track of all the different state changes and updates, leading to unintended consequences such as bugs and incorrect state values.


One solution to this issue is to properly structure the state and use selector functions in Redux. Selectors are used to extract specific data from the state tree and make it easier to keep track of state changes. By using selectors, developers can avoid accessing the state directly and instead retrieve the state values they need through the selector functions.

Example code:

// Selector function to extract specific data from the state tree
const getSpecificData = (state) => state.specificData;

// Using the selector in a React component
const Component = () => {
  const specificData = useSelector(getSpecificData);

  return (

Additionally, developers can also use tools like Redux DevTools to visualize the state changes and debug any issues with the state management in real-time. By using selectors and tools like Redux DevTools, developers can ensure a consistent state in complex applications.

Problem: Incorrect Initial State with useSelector

One common issue that can arise when using the useSelector hook from the react-redux library is that the initial state of the selector may not be properly initialized. This can occur when the selector is being called before the store has finished being initialized, which can lead to unexpected behavior.


To ensure that the initial state of the selector is correctly initialized, you can utilize the useEffect hook to ensure that the selector is only called after the store has finished initializing. Here’s an example implementation:

import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";

const MyComponent = () => {
  const dispatch = useDispatch();
  const selector = useSelector((state) => state.myValue);

  useEffect(() => {
    dispatch({ type: "INITIALIZE_STORE" });
  }, [dispatch]);

  return (
      {selector !== undefined ? selector : "Loading..."}

In this example, we are using the useEffect hook to dispatch an action that initializes the store when the component is first mounted. This ensures that the selector will only be called after the store has finished initializing, and thus the initial state of the selector will be correctly initialized.

A brief introduction to reduxjs React Redux

Redux is a state management library for JavaScript applications, commonly used with React to manage the state of an application. React Redux is a library that allows React components to interact with the Redux store. It provides bindings for React, allowing developers to easily access the state stored in the Redux store from within React components.

In a React Redux application, the Redux store holds the global state of the application, while React components are used to render the user interface. Components can access the state stored in the Redux store through the use of the useSelector and useDispatch hooks provided by React Redux. The useSelector hook is used to select and subscribe to state slices, while the useDispatch hook is used to dispatch actions to the store. The state can only be updated by dispatching actions, and the store updates its state in response to these actions. This unidirectional flow of data makes it easier to understand and manage the state of an application, making it a popular choice for large-scale React applications.

Most popular use cases for reduxjs React Redux

  1. State Management: React Redux provides a centralized store for the entire application state, allowing developers to easily manage and manipulate the state of their applications. This helps in making the application more predictable, efficient and scalable.
  2. Unidirectional Data Flow: React Redux follows a unidirectional data flow pattern, which ensures that data flows only in one direction, from the store to the components. This helps in preventing unintended side effects and makes it easier to debug the application.
  3. Easy Integration with React: React Redux is designed to work seamlessly with React, the popular JavaScript library for building user interfaces. With a few simple steps, developers can connect their React components to the Redux store and start using its powerful features.

Example code for connecting a React component to the Redux store:

import { connect } from 'react-redux';
import { incrementCount } from './actions';

function Counter({ count, dispatch }) {
  return (
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(incrementCount())}>

function mapStateToProps(state) {
  return {
    count: state.count

export default connect(mapStateToProps)(Counter);

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.