A Basic App.tsx file has no dependencies listed for re-render

    export default function App():JSX.Element {
    session: SessionState = useAppSelector((state) => state.session);
        console.log("App file reloaded");
        return (
          <div>
              <ChildComponent />
              {session.cookieConsent ? null : <CookieConsent />}
          </div>
       );
    }

ChildComponent is the only component to:

• list redux state session as a dependency
• update the session state store.

    const session: SessionState = useAppSelector((state) => state.session);
    const dispatch = useAppDispatch();
    ...
    dispatch(setSession({ ...session, updated }));  // state change is perfect
    useEffect(()=>{},[session])

The main question is why would App.tsx file reload if a child component is updating redux state/store? How does one stop this from happening?

CodePudding user response：

What are you using the session constant in App.tsx for? If you remove that line (const session: SessionState = useAppSelector((state) => state.session);) from App.tsx, it shouldn't ever rerender.