so I have

export default function Parent = async () => {
  const [state, setState] = useState(0);
  return (
    <>
      <Stepper state={state}></Stepper>
      <Suspense fallback = {<Loading />}>
      <BelowStepper currentState = {state} onClick={setState}></BelowStepper>
      </Suspense>
    </>

Inside BelowStepper, I do some checks like fetching the user from supabase to see if they're logged in, and if they arent, then it the stepper gets set to state step 1, if they are it gets set to step 2.

Does anyone have a better idea how to do this without reloading the user/doing all the checks each time the state changes (and thus BelowStepper gets rerendered) by chance?

It's tricky because I need the fetching of the user to be in a suspense, and want to render the stepper already at the top before it has finished fetching. but I also dont want the fetching of the user and checking wether the step is the correct step to happen again each time the step gets updated