[uuid].tsx

import { CustomNextPage } from '../_app';
import { Stack, Typography } from '@mui/material';
import { EventProvider, useEvent, useEventGuests } from '@events';
import { useEffect, useState } from 'react';

export const TestPage: CustomNextPage = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timeoutId = setTimeout(() => setShow((prev) => !prev), 1000);

    return () => clearTimeout(timeoutId);
  }, [show]);

  const { event, fetching: eventFetching } = useEvent();

  const { guests, fetching: guestsFetching } = useEventGuests();

  return (
    <Stack direction='row'>
      {show && <ChildComponent />}
      <Stack direction='column' sx={{ width: '50%', overflow: 'hidden' }}>
        <Typography>Event fetching: {eventFetching.toString()}</Typography>
        {event && (
          <Typography>
            <pre>{JSON.stringify(event, null, `\t`)}</pre>
          </Typography>
        )}
      </Stack>
      <Stack direction='column' sx={{ width: '50%', overflow: 'hidden' }}>
        <Typography>Guests fetching: {guestsFetching.toString()}</Typography>
        {guests && (
          <Typography>
            <pre>{JSON.stringify(guests, null, `\t`)}</pre>
          </Typography>
        )}
      </Stack>
    </Stack>
  );
};

const ChildComponent = () => {
  const { refetchGuests } = useEventGuests();

  return null;
};

export default () => (
  <EventProvider>
    <TestPage />
  </EventProvider>
);