Use Selector in Class Component For Better Performance

React Redux has become a cornerstone of state management in modern React applications. With the introduction of React Redux hooks, developers can manage state more efficiently while improving performance.

In this article, we'll explore selectors, their importance, and best practices for using them in React Redux applications. We'll also address key questions like when to use reselect, whether a selector function can be used in a reducer function, and the role of useSelector in React Redux.

What is Redux and Why Use Selectors?

Redux is a state management library designed to manage global state in React components. In React Redux, selectors help extract data from the Redux store state while optimizing re-render performance. Using selectors prevents unnecessary re-renders by ensuring that components receive only the relevant pieces of data.

Why Use Selectors in Redux?

Selectors in React Redux serve multiple purposes:

1. Encapsulation – They keep data selection logic separate from components, making the code more maintainable.

2. Performance Optimization – By using memoized selectors, we can avoid unnecessary re-renders.

3. Reusability – A well-defined selector function can be reused across different components.

4. Decoupling – Selectors prevent React components from being tightly coupled to the Redux store state.

What is the useSelector Hook?

The useSelector hook is a fundamental part of the React Redux library. It allows functional components to access the Redux store state. Unlike mapStateToProps used in connected components, useSelector provides a more direct way to subscribe to store updates.

The Purpose of useSelector

The useSelector hook enables components to:

• Extract data from the Redux store.

• Receive store update notifications when relevant data changes.

• Avoid unnecessary re-renders by using a memoized selector function.

Here’s a simple example of useSelector in a function component:

1import React from 'react';
2import { useSelector } from 'react-redux';
3
4const Counter = () => {
5  const counter = useSelector(state => state.counter);
6  return <div>Counter: {counter}</div>;
7};
8
9export default Counter;

​

When to Use Reselect?

Reselect is a library used to create memoized selector functions. It prevents unnecessary re-renders by ensuring that selectors return the same output when given the same inputs. You should use reselect when:

• You need to derive multiple values from the Redux store.

• You want to optimize performance by preventing stale props from triggering renders.

• Your application requires complex state computations.

Here's an example of a memoized selector function using reselect:

1import { createSelector } from 'reselect';
2
3const selectTodos = state => state.todos;
4
5const getVisibleTodos = createSelector(
6  [selectTodos],
7  todos => todos.filter(todo => !todo.completed)
8);
9
10export default getVisibleTodos;

​

Can I Use a Selector in a Reducer?

No, you should not use a selector function inside a reducer function. Reducers should be pure functions that take the Redux store state and an action, then return a new reference to the state. Selectors, on the other hand, are meant to extract data from the store, not modify it. Using a selector instance inside a reducer could lead to unexpected behavior and violate Redux principles.

How to Use Selectors in Class Components?

In class components, you can use connect from React Redux instead of useSelector. Here’s how you can use a selector in a class component:

1import React, { Component } from 'react';
2import { connect } from 'react-redux';
3
4class Counter extends Component {
5  render() {
6    return <div>Counter: {this.props.counter}</div>;
7  }
8}
9
10const mapStateToProps = state => ({
11  counter: state.counter
12});
13
14export default connect(mapStateToProps)(Counter);

​

Understanding Redux Hooks

Redux provides two essential hooks for working with state:

1. useSelector – Used to extract data from the store.

2. useDispatch – Used to dispatch actions to the store.

Using these React Redux hooks makes state management in function components more efficient.

Using useDispatch

The useDispatch hook allows us to trigger actions within a function component:

1import React from 'react';
2import { useDispatch } from 'react-redux';
3
4const Counter = () => {
5  const dispatch = useDispatch();
6
7  return (
8    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
9      Increment
10    </button>
11  );
12};
13
14export default Counter;

​

Handling Re-Renders with Selectors

A common problem in React Redux applications is unnecessary re-renders. This occurs when a function component renders multiple times due to a change in state.

Avoiding Re-Renders with Memoized Selectors

Using memoized selectors ensures that components only re-render when necessary. A memoized selector function caches the previous result and recalculates it only when the Redux store state changes.

Understanding export default

When working with React Redux components, using export default is essential for making components reusable. Here are some common patterns:

• export default Counter;

• export default App;

This allows components to be easily imported into other files.

Higher-Order Components and Redux

A higher-order component (HOC) is a pattern in React Redux where a function takes a component and returns a new enhanced component. HOCs are often used in connected components with connect().

1const withRedux = connect(mapStateToProps);
2export default withRedux(Counter);

​

Debugging Redux with Redux DevTools

The Redux DevTools Extension is a powerful tool for debugging Redux store updates. It allows developers to:

• Monitor dispatch actions.

• Track reducer function execution.

• Inspect the root state at different points.

Managing State in React Redux Applications

Efficient state management in React Redux applications requires:

• Proper use of React Redux hooks (useSelector and useDispatch).

• Using memoized selectors to avoid unnecessary re-renders.

• Structuring the Redux ecosystem efficiently.

Final Thoughts!

Using selectors in React Redux applications is a common pattern that helps improve performance and maintainability. By leveraging React Redux hooks, memoized selector functions, and higher-order components, developers can create efficient React components that respond dynamically to state changes.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.