Repository: react
Issue: [DevTools Bug]: Error: Should have a queue. This is likely a bug in React. Please file an issue.
Labels: Type: Bug,Status: Unconfirmed

### Website or app

private repo, cannot disclose the full repo because NDA

### Repro steps

I got this error a few times when working in a react native app, It only showed a few times but the error instructed me to file it as issue, so I am posting here. the error said : 

> Error: Should have a queue. This is likely a bug in React. Please file an issue.

I am not sure how it is happening, but it is happening when I added  a new prop "deleted={deletedItem}"  in the header Item :

```

<PageHeaderItemDetails
          id={id}
          watchlisted={isLiked || false}
          deleted={deletedItem}
        />
```


Here is the full screen's code: 
```import {useHeaderHeight} from '@react-navigation/elements';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import React, {useEffect, useLayoutEffect, useState} from 'react';
import {ActivityIndicator, StyleSheet, View} from 'react-native';

import ScreenContainer from '../../components/elements/ScreenContainer';

import ImageCarousel from '../../components/ImageCarousel/ImageCarousel';

import AlreadySubmittedDetails from '../../components/itemDetailsComponents/AlreadySubmittedDetails';

import LikeAndSubmittionButtons from '../../components/itemDetailsComponents/LikeAndSubmittionButtons';
import SubmissionForm from '../../components/itemDetailsComponents/SubmissionForm';

import {useAuth} from '../../contexts/AuthContext';

import Typography from '../../components/common/Typography';
import ItemInfoDetails from '../../components/elements/ItemInfoDetails';
import PageHeaderItemDetails from '../../components/pageheader/PageHeaderItemDetails';
import {useSubmission} from '../../contexts/SubmissionContext';
import {useTreasuresData} from '../../contexts/TreasuresDataContext';
import {useUserData} from '../../contexts/UserDataContext';

interface ItemDetailsScreenProps {
  navigation: NativeStackNavigationProp<any>;
  route: any;
}

const ItemDetailsScreen = ({navigation, route}: ItemDetailsScreenProps) => {
  const {id, isLiked} = route?.params;
  const [deletedItem, setDeletedItem] = useState(false);
  useLayoutEffect(() => {
    console.log(navigation);
    navigation.setOptions({
      headerShown: true,
      header: () => (
        <PageHeaderItemDetails
          id={id}
          watchlisted={isLiked || false}
          deleted={deletedItem}
        />
      ),
    });
  }, [navigation, id, isLiked, deletedItem]);
  const headerHeight = useHeaderHeight();

  const {getTreasureById} = useTreasuresData();
  const [itemData, setItemData] = useState<any>({});
  const {user} = useAuth();
  const {userData} = useUserData();
  const {getSubmittedItemInfo} = useSubmission();
  const isAlreadySubmittedItem =
    userData && userData.mysubmissions && userData?.mysubmissions.includes(id);
  const [loading, setLoading] = useState(false);
  const [loadingPage, setLoadingPage] = useState(false);
  const [submittedInfo, setSubmittedInfo] = useState({});
  useEffect(() => {
    const getSubmissionData = async () => {
      try {
        setLoading(true);
        console.log('getting submission data');
        const submissionData = await getSubmittedItemInfo(id);
        setSubmittedInfo(submissionData);

        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
      }
    };
    if (isAlreadySubmittedItem) {
      getSubmissionData();
    }
    console.log('isAlreadySubmittedItem:', isAlreadySubmittedItem);
  }, [isAlreadySubmittedItem, id]);

  useEffect(() => {
    const getData = async () => {
      try {
        setLoadingPage(true);
        const data = await getTreasureById(id);
        setItemData(data);
        setLoadingPage(false);
      } catch (error) {
        // Handle the error if needed
        console.log('Error fetching data:', error);

        setLoadingPage(false);
        if (error.message === 'Treasure does not exist') {
          setDeletedItem(true);
        }
      }
    };

    getData();
  }, [id, getTreasureById]);
  useEffect(() => {
    console.log('ITem data -- ', itemData, 'ID ->', itemData.id);
  }, [itemData]);
  return (
    <ScreenContainer style={styles.container} keyboardSafe nestedScrollEnabled>
      {itemData && itemData.id ? (
        <>
          <ImageCarousel data={itemData} />
          <LikeAndSubmittionButtons
            id={id}
            numOfLikes={itemData.likesCount}
            numOfSubmittions={itemData.submissionsCount}
          />
          <ItemInfoDetails data={itemData} />
          {isAlreadySubmittedItem ? (
            <AlreadySubmittedDetails data={submittedInfo} loading={loading} />
          ) : (
            <SubmissionForm data={itemData} />
          )}
        </>
      ) : null}
      {!loadingPage && (!itemData || !itemData.id) ? (
        <View style={{flex: 1, justifyContent: 'center'}}>
          <Typography centered small>
            {deletedItem ? 'Item has been deleted' : 'No Data'}
          </Typography>
        </View>
      ) : null}
      {loadingPage ? (
        <View style={{flex: 1, justifyContent: 'center'}}>
          <ActivityIndicator size="large" color="#818181" />
        </View>
      ) : null}
    </ScreenContainer>
  );
};

export default ItemDetailsScreen;

const styles = StyleSheet.create({
  container: {
    minHeight: '100%',
    width: '100%',
    paddingBottom: 20,
    paddingTop: 20,
  },
  headerTitleStyle: {
    fontSize: 16,
    color: '#2C2C2C',
    fontWeight: '600',
    fontFamily: 'Poppins-SemiBold',
  },
});
```


this is the Pageheader component:
```import {useNavigation} from '@react-navigation/native';

import React from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';

import WatchlistEyeIconButton from '../buttons/WatchlistEyeIconButton';
import Typography from '../common/Typography';
import BackButton from './BackButton';
import PageHeaderContainer from './PageHeaderContainer';

interface PageHeaderItemDetailsProps {
  id: string;
  watchlisted: boolean;
  itemOwner?: boolean;
  deleted?: boolean;
}
const PageHeaderItemDetails = ({
  id,
  watchlisted,
  itemOwner,
  deleted = true,
}: PageHeaderItemDetailsProps) => {
  const navigation = useNavigation();
  const goToEdit = () => {
    navigation.navigate('MyItemsStack', {
      screen: 'EditAnItem',
      params: {
        id: id,
      },
    });
  };
  return (
    <PageHeaderContainer>
      <BackButton />
      <Typography style={styles.headerTitleStyle}>Item details</Typography>
      {deleted ? null : (
        <>
          {itemOwner ? (
            <TouchableOpacity activeOpacity={0.8} onPress={goToEdit}>
              <Typography style={styles.editText}>Edit</Typography>
            </TouchableOpacity>
          ) : (
            <WatchlistEyeIconButton
              itemDetailsPage
              id={id}
              watchlisted={watchlisted}
            />
          )}
        </>
      )}
    </PageHeaderContainer>
  );
};

export default PageHeaderItemDetails;

const styles = StyleSheet.create({
  headerTitleStyle: {
    fontSize: 16,
    color: '#2C2C2C',
    fontWeight: '700',
    fontFamily: 'Poppins-Bold',
    flex: 1,
    textAlign: 'center',
  },
  editText: {
    color: '#E8BD70',
    fontWeight: '600',
    fontFamily: 'Poppins-SemiBold',
    fontSize: 14,
    textAlign: 'right',
  },
});

```

### How often does this bug happen?

Sometimes

### DevTools package (automated)

_No response_

### DevTools version (automated)

_No response_

### Error message (automated)

_No response_

### Error call stack (automated)

_No response_

### Error component stack (automated)

_No response_

### GitHub query string (automated)

_No response_