[DevTools Bug]: Error: Should have a queue. This is likely a bug in React. Please file an issue.

[zinx110]

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 {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 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

[HermanBide]

can i contribute to this issue ?

[HermanBide]

You probably need to update your react and make sure all libraries are up to date

[zinx110]

that could be the case. Should I remove the issue or anything? I am sorry I only opened the issue because the error itself said to do so.

[zinx110]

Here is the package.json

{
  "name": "refindz",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@bam.tech/react-native-image-resizer": "^3.0.7",
    "@react-native-clipboard/clipboard": "^1.13.2",
    "@react-native-firebase/app": "^18.8.0",
    "@react-native-firebase/auth": "^18.8.0",
    "@react-native-firebase/firestore": "^18.8.0",
    "@react-native-firebase/storage": "^18.8.0",
    "@react-native-google-signin/google-signin": "^11.0.0",
    "@react-native-seoul/masonry-list": "^1.4.2",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "react": "^18.2.0",
    "react-native": "^0.73.4",
    "react-native-chart-kit": "^6.12.0",
    "react-native-create-thumbnail": "^2.0.0",
    "react-native-fbsdk-next": "^12.1.3",
    "react-native-image-picker": "^7.1.0",
    "react-native-pager-view": "^6.2.3",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-native-select-dropdown": "^3.4.0",
    "react-native-svg": "^14.1.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-video": "^5.2.1",
    "react-native-video-controls": "^2.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-svg-transformer": "^1.3.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[zinx110]

I saw that error a few more times when I edited the the code while the app was running in android emulator

[Nantris]

Facing the same issue in #30038, but perhaps with a different cause.