Obtuve estas líneas masivas de códigos en App.js

 const { userInfo } = useSelector((state) => state.user); // JWT details const dispatch = useDispatch(); const { data, loading } = useQuery(GET_USER_DETAILS); const { data: cartData, loading: cartLoading } = useQuery(GET_USER_CART); const { data: orderData, loading: orderLoading } = useQuery(GET_USER_ORDER); useEffect(() => { if (!loading && data && data?.getUserById.id === userInfo?.id) { dispatch(loginUser(data?.getUserById, loading)); } }, [dispatch, data, loading, userInfo?.id]); useEffect(() => { if ( !cartLoading && cartData && cartData?.getUserCart.userId === userInfo?.id ) { dispatch(addToCart(cartData?.getUserCart)); } }, [dispatch, cartData, cartLoading, userInfo?.id]); useEffect(() => { if ( !orderLoading && orderData && orderData?.getUserOrders[0]?.purchasedBy === userInfo?.id ) { dispatch(addOrder(orderData?.getUserOrders)); } }, [dispatch, orderData, orderLoading, userInfo?.id]);

Si se pregunta por qué, cada vez que el usuario inicia sesión, obtengo los datos del backend (datos del carrito, datos de pedidos, datos del perfil del usuario) y los coloco directamente en mi redux-store.

¿Hay alguna forma de moverlo a otro componente y luego simplemente llamarlo en App.js? Ty :D