I upgraded my app to react v18 and replaced ReactDOM with createRoot() as per the docs, and I notice render issues:

In v17, my <Restricted/> component was rendering twice, once before fetching user data with auseEffect() in App.js, and once when the redux state is updated with the new user data.

But in react v18 with StrictMode enabled, it only renders once.
Is there an issue with my implementation?

App.js

function App() {
    ...
    useEffect(() => {
        let isSubscribed = true;
        
        if(isSubscribed) {
            // Fetching data
            // Dispatching to redux
        }
        return () => { isSubscribed = false }
    }, [dispatch, gettingUserInfo]);
    
    const Restricted = ({ routeType }) => {
        const cartSelection = location.state?.cartSelection;
        const isLogged = () => {
          console.log('# loggedIn :', loggedIn)
          return loggedIn;
        }
        if(loggedIn !== null) {
          if(routeType === "guest") {
            if(isLogged()){
              if(location.state?.from) {
                return <Navigate 
                  replace 
                  to={location.state.from}
                  state={{cartSelection: cartSelection}}
                />
              } else {
                return <Navigate replace to="/" />
              }
            } else {
              return <Outlet />;
            }
          } else if(routeType === "user") {
            return isLogged() ? (
              <Outlet /> 
            ) : <Navigate replace to="/" />;
          }
        } else {
          return <h2>Loading user data...</h2>
        }
    }

return (
    <>
        <Navbar />
        <Routes location={location} key={location.pathname}>
            ...
            {/* RESTRICTED - USER */}
            <Route element={<Restricted routeType="user" />}>
              <Route path="/profile" element={<Profile/>} />
            </Route>
            {/* RESTRICTED - GUEST */}
            <Route element={<Restricted routeType="guest" />}>
              <Route path="/login" element={<Login/>} />
            </Route>
        </Routes>
    </>
  );

index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

import { createStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import entities from './Redux/config/entities';
import { injectStore } from './Api/nutritivApi';

export const store = createStore(
  entities,
  /* preloadedState, */
  window.__REDUX_DEVTOOLS_EXTENSION__ &&
  window.__REDUX_DEVTOOLS_EXTENSION__({
    trace: true
  })
);

injectStore(store);

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
);

CodePudding user response：

There has been some changes in React v18 that might cause different behaviors. Check this article

I recommend disabling StrictMode , that worked for me .