How can I avoid renders using updateOne from createEntityAdapter

[Agmat]

Hello everyone ! 🙂
I have a question about some needless rerenders. I'm working with something like this:

Reducer

const myAdapter = createEntityAdapter();

const { actions, reducer } = createSlice({
    name: 'mySlice',
    initialState: myAdapter.getInitialState(),
    reducers: {
        updateOne: myAdapter.updateOne,
    },
});

export const { updateOne } = actions;
export const mySelectors = myAdapter.getSelectors((state) => state.mySlice);

export default reducer;

Component A

const A = () => <button onClick={() => updateOne({ id, changes: { someData } })}>Some button</button>

Component B

const B = () => {
    // allData is considered different every time I click on component's A button
    const allData = useSelector((state) => mySelectors.selectEntities(state));

     useEffect(() => {
        functionUsingMyData(allData);
     }, [allData]);
    ....
}

The data store in my store looks like this:

[key: string]: string | number | boolean

The issue I have is that when I call updateOne it cause my component B to rerender. And since allData changed, the function inside my useEffect will be called when I don't want to...

Do you guys have any idea how I can avoid this ?

Thank you for taking the time 🙏

[markerikson]

This is normal behavior for immutable updates.

An immutable update requires that every level of nesting that you are trying to update has to be copied. So, if I want to update state.todos.entities["abcd"].completed, it has to copy:

• the {id: "abcd"} entity object
• entities
• todos
• state

So, yes, if you are trying to select state.someSlice.entities, that will be a new reference every time you apply an update. That means that the component will re-render, and if you're using that as an effect dependency, the effect will run too.

What are you trying to accomplish in that effect?

[Agmat]

I want to call a function that need the data as parameter. But only when I remove/add some keys from state.someSlice.entities.
I think I can do i by changing the equality function from useSelector but I was wondering if there is any other way.

[markerikson]

I don't think the equality function is going to help here. What you're trying to do is more complex than just "has the object changed to a new reference".

what you may need to do is keep around a reference to the previous version of entities, and then in the effect, diff that with the current version of entities to see if the keys have actually changed.

[Agmat]

I tested both and both solution worked. But I think I'll go with yours (keep the reference around).
Thanks again for taking the time 🙏