React js createSelector reselect does not work. Issue connected with quality of renders

Question

React js reselect does not work, while I use him in the slice. I have created big project smth like social media app, however when I wanted to check the quality of renders, I saw that the whole page is rendering for 6 or 7 times.

here is the image

import {createSlice} from '@reduxjs/toolkit';
import {createSelector} from "reselect";

export const optimizedEventsSlice = createSlice({
 name: 'optimizedEvents',
        initialState: {
           optimizedEvents: {
           next: null,
           previous: null,
           results: []
        }
},
 reducers: {
    initOptimizedEvents: (state, action) => {
        state.optimizedEvents = action.payload;
        },
   },
 });

 export const {
   initOptimizedEvents
 } = optimizedEventsSlice.actions;

 // export const getOptimizedEvents = (state) => state.optimizedEvents;

 export const getOptimizedEvents = createSelector(
   (state) => state.optimizedEvents,
   (optimizedEvents)=> optimizedEvents
 );

 export default optimizedEventsSlice.reducer;

Answer 1

The selector you have written isn't doing anything useful at all. Any selector that finishes with x => x as its "output selector" isn't actually memoizing anything. Additionally, by returning the entire slice state, you are telling the UI layer that it should re-render any time state.optimizedEvents is updated in any way.

I'd recommend reading the Redux docs page on Deriving Data with Selectors to better understand how Reselect works and how to use it correctly.