Dispatch Redux action in loader will be cleared by useEffect cleanup function in strict mode

[itschiaming]

I just migrated from v3 to v6 and started using data loader to fetch data, but ran into a problem because of the React.StrictMode.
This is the simplify route:

// I created my router outside of the component.
const router = createBrowserRouter(
  createRoutesFromElements(
  <Route
    path="/"
    element={<App />}
    // only run loader once before it renders
    shouldRevalidate={() => false}
    loader={({ request, params }: LoaderFunctionArgs) => {
      // ...
      // dispatch action to fetch data
      reduxStore.dispatch(getData(params));
      // ...
    }}
   /> ),
);

function App() {
  const dispatch = useAppDispatch();
  
  // dispatch action to clear data when unmounting
  useEffect(() => () => dispatch(clearData()), []);

  return // UI
}

Above code will work in production environment, but in StrictMode everything I did will be cleared by the clearData().
Any ideas on how to fix it? thanks!

[lamhungypl]

Because you violate the useEffect's usage
https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount