Cannot update during an existing state transition bug

Question

Could anybody please help me? Im getting this error in console when Im trying to navigate to PostScreen when there are no categories left to show :

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

import React, { useState, useEffect } from "react"
import { View, TouchableOpacity, ImageBackground, Dimensions } from "react-native"
import { FlatGrid } from 'react-native-super-grid';
import { Text } from 'react-native-elements';
import { useSelector } from "react-redux";
import { uniqBy } from "lodash";
import mainScreenStyles from "../styles/mainScreenStyles";
import { Badge, Avatar, Icon, Button } from "react-native-elements";


const MainScreen = props => {
    const userDisplayName = useSelector(state => state.userInfo.user_display_name)
    const categories = useSelector(state => state.categoryData)
    const [currentCategory, setCurrentCategory] = useState({ parent: 0, id: 0 });
    const [items, setItems] = useState(uniqBy(categories.filter(category => category.parent == currentCategory.parent && category.name !== "Nezaradené"), category => category.name));

    const handleChangeFilters = props => {
        setCurrentCategory({ parent: props.parent, id: props.id })
    }

    useEffect(() => {
        setItems(uniqBy(categories.filter(category => category.parent == currentCategory.id && category.name !== "Nezaradené"), category => category.name))
    }, [currentCategory])


    return (
        <View style={{ height: currentCategory.id == 0 ? Dimensions.get("window").height / 1.3 : Dimensions.get("window").height, backgroundColor: "white" }}>
            {currentCategory.id == 0 ? <Text style={mainScreenStyles.heading}>Vitaj, {userDisplayName}</Text> : null}
            {items.length === 0 ? props.navigation.navigate({ routeName: "PostScreen" }) :
                <FlatGrid
                    itemDimension={130}
                    data={items}
                    style={mainScreenStyles.gridView}
                    spacing={10}
                    renderItem={({ item }) => (

i think the problem is here

                        <TouchableOpacity
                            style={item.name == "Administratívno-Logistická časť" ? mainScreenStyles.itemContainerBlue : mainScreenStyles.itemContainerRed}
                            onPress={handleChangeFilters.bind(this, item)}>
                            < ImageBackground
                                resizeMode="contain"
                                source={item.name == "Administratívno-Logistická časť" ? require("../assets/icons/icon2.png") : require("../assets/icons/icon.png")}
                                style={{ height: "100%", justifyContent: 'center', }} >
                                <Text style={mainScreenStyles.itemText}>{item.name}</Text>
                            </ImageBackground>
                        </TouchableOpacity>

                    )
                    }
                />}
            {
                currentCategory.id == 0 ?

                    <TouchableOpacity style={mainScreenStyles.newPosts} onPress={() => { console.log("153") }}>
                        <Badge value="Nové" status="error" containerStyle={{ position: 'absolute', top: 8, left: 8 }} />
                        < ImageBackground resizeMode="contain" source={require("../assets/icons/quote.png")} style={{ height: "100%" }} >
                            <View style={mainScreenStyles.newPost}>
                                <View style={mainScreenStyles.newPostTopInfo}>
                                    <View>
                                        <Avatar
                                            rounded
                                            size={50}
                                            source={require("../assets/icons/profil.png")}
                                        />
                                    </View>
                                    <View style={mainScreenStyles.newPostNameAndDate} >
                                        <Text style={mainScreenStyles.newPostHeading}>Meno</Text>
                                        <Text>{Date.now()}</Text>
                                    </View>
                                    <View>
                                        <Icon
                                            name='heart-outline'
                                            type='ionicon'
                                        />
                                    </View>
                                </View>
                                <View style={mainScreenStyles.newPostContent}>
                                    <Text style={mainScreenStyles.newPostHeading}>Lorem ipsum</Text>
                                    <Text>Lorem mLorem ipsumLorem ipsumLorem ipsumLorem ipsum</Text>
                                </View>
                                <View style={mainScreenStyles.buttonContainer}>
                                    <Button
                                        title="Solid Button"
                                        iconRight
                                        buttonStyle={mainScreenStyles.button}
                                        icon={
                                            <Icon
                                                name="arrow-right"
                                                size={15}
                                                color="white"
                                            />
                                        }
                                    />
                                </View>
                            </View>

                        </ImageBackground>
                    </TouchableOpacity>
                    : null
            }
        </View >
    )
}


export default MainScreen

Answer 1

You are doing props.navigation.navigate() within your render code. Either move it "outside" by putting it in a useEffect/setTimeout, or better, use react-navigation's Redirect component. That component is perfect for use cases like this.