How to set initial slice state using slice reducer - reactjs

Question

So, I've got a redux slice, where there are two reducers, setTodos and addTodo, the initial state is set to be empty, but soon updated using the reducer setTodos, the data of setTodos(dispatched from a component) is fetched by a network call, so it is an asynchronous task. The data is updated properly, but when I try adding a new todo, the addition is not reflected on the screen as it should, perhaps it is displayed only on reload because setTodos is executed again and the state is updated accordingly.
const myTodoSlice = createSlice({
name:'Todo',
initialState:{todos:[]},
reducers:{
addTodo:(state,action)=>{
state.todos.push(action.payload.todo)
},
setTodos:(state,action)=>{
//Approach 1 of setting the initial todo state.
state.todos = action.payload.arrayOfTodos
//Approach 2 of setting the initial todo state.
// state.todos.push(...action.payload.arrayOfTodos)
}
}
List rendering code:
const selector = useSelector((arg:RootStateOrAny)=>arg.todos.todos)
return(
<React.Fragment>
{selector?.map((item:RootStateOrAny) => <TodoItem key={Math.random()} title={item.todoTitle} desc={item.todoDescription} />)}
</React.Fragmnet>
)
Currently, I'm following approach 1, but by doing so, I'm unable to render new additions on the screen. When I tried using approach 2, I'm getting errors mostly related to re-render depth exceeded.
I'd want to know by following approach 1, why is the addition not rendered, and what changes can I make to get the desired result?
Thanks.

Answer 1

The issue is that React sees the same array reference (because the push is a mutation operation of the existing array instance) and ignores the rendering.
Instead of
addTodo:(state,action)=>{
state.todos.push(action.payload.todo)
},
Try like below which creates a new array instance with adding the new todo item (concat returns a new array with the new item without mutating the existing one).
addTodo:(state,action)=>{
state.todos = state.todos.concat([action.payload.todo])
},