Question

0

139

Views

Any change to redux store my causes component to re-render

I'm doing some testing on my UI and I've noticed that if any state changes in my redux store my component (shown below) re-renders and restarts with embedded video at 0. If I type in a redux-connected text field, it remounts, if a status notification hits the store, it remounts, etc.

I have no idea how to fix this and I could really use some help figuring out how to go after the bug.

tldr; How can I stop my VideoPlayer from re-rendering each time something changes in my redux store?

redux-toolkit
react

component

const MyComponent = () => {
...
// data used in the VideoPlayer is descructured from this variable:
const formState = useSelector(selectDynamicForm);

// renders output here in the same component
return (
...
 {sourceContentFound === false ? (
   <VideoPlayerDisabled />
 ) : (
   <VideoPlayerController
     title={title}
     description={description}
     sourceAddress={iframeURL}
     author={authorName}
     timeStamp={{ startTime: 0 }}
   />
 )}
)
...
}

formSlice

export const dynamicFormSlice = createSlice({
  name: 'dynamicForm',
  initialState,
  reducers: {
    updateField: (state, action) => {
      state = action.payload;
      return state;
    }
  },
});

export const selectDynamicForm = createSelector(
  (state: RootState): dynamicFormState => state.dynamicForm,
  dynamicForm => dynamicForm
);

statusHandlerSlice

I don't think this component does anything crazy, per-say, but I have a notification appear when the video conditions are met. When it goes back down clearStatus the video player restarts.

export const statusHandlerSlice = createSlice({
  name: 'statusHandler',
  initialState,
  reducers: {
    setStatus: (state, action: PayloadAction<IStatusObject>) => {
      const { type, display, message } = action.payload;
      state.status = {
        ...action.payload,
        message: message.charAt(0).toUpperCase() + message.slice(1),
      };
      if (display === 'internal-only' || display === 'support-both') {
        statusLogger(type, message);
      }
    },
    clearStatus: state => {
      state.status = {
        type: 'success',
        data: {},
        message: '',
        display: 'internal-only',
        key: '',
      };
    },
  },
});

export const { setStatus, clearStatus } = statusHandlerSlice.actions;

export const selectStatus = (state: RootState): IStatusObject =>
  state.statusHandler.status;

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T11:20:09.226Z

Your MyComponent is re-render every time redux store state change is because you have a selector in it

You could stop this to happen by, add an equalityFn to useSelector.

You can write your own equalityFn or use some existing function from a library that supports deep comparison.

Ex: Use lodash isEqual

import { isEqual } from 'lodash';
const MyComponent = () => {
...
// data used in the VideoPlayer is descructured from this variable:
const formState = useSelector(selectDynamicForm, isEqual);

By default, useSelector use a shallow compare which can't detect deep changes inside your object, change to a deep comparison function like isEqual will help you to do that, but It's not recommended for all selector since there will be a performance impact.

Live Example:

Answer 2 · 2022-07-13T11:20:09.236Z

I suggest either creating a custom equalFn to compare the data you're using in the current component or do not select the whole slice, maybe some properties change is unnecessary for your component. like:

const { data } = useSelector(store => store.sliceA, shallowEq);

// console.log(data) => { a: "foo", b: "bar" }
// data.b is useless but once it is changed, the component will re-render as well

return <Typography>{data.a}</Typography>

You should install React Devtools, turn on profiler, remember to check Record why each component rendered while profiling in setting to see what is causing re-rendering. sometimes custom hooks in libraries trigger re-rendering.
whyDidYouRender is a good choice too

0

139