Redux Toolkit dispatches twice on page load and page change - reactjs

Question

I have several pages in my React app. Every thime when a user clicks on a page3 I want to send a fetch request to get the data and set it to the store. But for some reason Redux Toolkit dispatches twice on app load and page3 load as well. So everytime two fetch requests are made when a page loads or user switches between page3 and other pages.
How to fix that?
App.tsx
import { NavLink, Route, Routes } from "react-router-dom";
import "./styles.css";
import Todo from "./Todo";
const App = () => {
const routes = [
{
path: "/",
element: <div className={"page1"}>Page 1</div>
},
{
path: "/page2",
element: <div className={"page2"}>Page 2</div>
},
{
path: "/page3",
element: <Todo />
}
];
return (
<div className="App">
<div className="Navigation">
<NavLink to={"/"}>Page 1</NavLink>
<NavLink to={"/page2"}>Page 2</NavLink>
<NavLink to={"/page3"}>This sends a request</NavLink>
</div>
<div className="Content">
<h2>Content</h2>
<Routes>
{routes.map((route: any) => (
<Route path={route.path} element={route.element} key={route.path} />
))}
</Routes>
</div>
</div>
);
};
export default App;
Todo component
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "./store/store";
import { fetchTodo } from "./store/TodoSlice";
const Todo: React.FC = () => {
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
dispatch(fetchTodo());
}, []);
return <div className={"page3"}>This dispatches twice</div>;
};
export default Todo;
Store slice
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
export interface ICategoryState {
todo: any[];
isLoading: boolean;
}
const initialState: ICategoryState = {
todo: [],
isLoading: false
};
const BASE_URL = "https://jsonplaceholder.typicode.com/todos";
export const fetchTodo = createAsyncThunk("todos/fetchTodo", async () => {
const response = await fetch(BASE_URL);
const data = await response.json();
return data as any[];
});
export const todoSlice = createSlice({
name: "todos",
initialState,
reducers: {},
extraReducers: (builder) => {
builder.addCase(fetchTodo.pending, (state, action) => {
state.isLoading = true;
console.log("Start loading");
});
builder.addCase(fetchTodo.fulfilled, (state, { payload }) => {
state.todo = payload;
state.isLoading = false;
});
builder.addCase(fetchTodo.rejected, (state, { payload }) => {
console.log("Error happened");
state.isLoading = false;
});
}
});
export default todoSlice.reducer;
Here's a codesandbox as well: https://codesandbox.io/s/ecstatic-cookies-xicjxp?file=/src/App.tsx

Answer 1

By default CRA creates apps running in strict mode which causes useEffects with empty dependencies array to run twice on load.
It is supposed to help people writing better react code.
This only happens in development mode of course.
Just remove the tag
<StrictMode>
in index.tsx and it will work as desired.
I've corrected your sandbox.