"Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

Question

I'm using React's hook and I want to have a value that is retrieved from the database as the initial value. However, I'm getting the following error:

Invariant Violation: Invariant Violation: Rendered more hooks than during the previous render.

const { data, loading, error } = useQuery(GET_DATA)
const { initialValue } = data
const [value, setValue] = useState(initialValue)

I'm using the React Apollo hook.

Update

export default NotificationScreen = ({ navigation }) => {
    const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)
    if (loadingInitialSettings) {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#FF5D4E" />
            </View>
        )
    }
    if (initialSettingsError) return <Text>Error...</Text>

    const {
        borrowerLendingNotificationToken,
    } = initialNotificationSettings.me
    const [borrowerPending, notifyBorrowerPending] = useState(borrowerLendingNotificationToken)

    return (
        <SafeAreaView style={styles.container}>
        </SafeAreaView>
    )
}

Could you share full code of your component? – Tuan Luong Dec 14 '19 at 23:52 — Tuan Luong, Dec 14 '19 at 23:52
@TuanLuong I've included the full code – Kevvv Dec 15 '19 at 00:01 — Kevvv, Dec 15 '19 at 00:01

Tuan Luong · Accepted Answer · 2019-12-15T04:55:38.887

The problem is that you are using hook below return. Try to update

export default NotificationScreen = ({ navigation }) => {
    const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)

    const [borrowerPending, notifyBorrowerPending] = useState("")

    useEffect(() => {
        if (initialNotificationSettings.me) {
            const { borrowerLendingNotificationToken } = initialNotificationSettings.me
            notifyBorrowerPending(borrowerLendingNotificationToken);
        }
    }, [initialNotificationSettings]);

    if (loadingInitialSettings) {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#FF5D4E" />
            </View>
        )
    }
    if (initialSettingsError) return <Text>Error...</Text>

    return (
        <SafeAreaView style={styles.container}>
        </SafeAreaView>
    )
}

Your borrowerPending is not rendered if loadingInitialSettings or initialSettingsError is true. All hooks inside component are required to be the same every render. — Tuan Luong, Dec 15 '19 at 00:21

"Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

1 Answers1

Linked