React 检测到 Hooks 的顺序发生了变化？

Question

I keep getting this error saying "ERROR Warning: React has detected a change in the order of Hooks called by MainMenuScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks" . Really confused don't know why am getting this error if someone can please explain or show an example it would greatly be appreciated. Many thanks for considering my request.

Here is an image of the code.

function MainMenuScreen({ navigation, route, props }) {
    const globalContext = useContext(Context)
    const { setIsLoggedIn, appSettings, domain, userObj, setUserObj, setToken, address, setAddress } = globalContext;
    const [selecedTab, setSelectedTab] = React.useState(tabs[0]);


return (
    <View style={styles.container}>
        <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
            
            <FlatList 
                data={tabs}
                horizontal
                showsHorizontalScrollIndicator={false}
                style={{ flexGrow: 0 }}
                keyExtractor={(item, index) => `${item}-${index}`}
                renderItem={({ item: tab }) => {
                return (
                    <TouchableOpacity onPress={() => setSelectedTab(tab)}>
                        <View style={[styles.pill,
                        {
                            backgroundColor: selecedTab === tab ? 'gold' : 'transparent',
                        },
                    ]}>
                            <Text style={[styles.pillText, { color: selecedTab === tab ? 'white' : 'black' }]}>{tab}</Text>
                        </View>
                    </TouchableOpacity>
                )
                }}
            />
            <FlatList
                data={popularFood}
                keyExtractor={item => item.key}
                renderItem={({ item }) => {
                    return (
                        <View style={{ flexDirection: 'row' }}>
                            <Image source={{ uri: item.image }} style={{ width: 100, height: 100, margin: 10 }} />
                            <View>
                                <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.type}</Text>
                                <View>
                                    <AntDesign name="star" size={20} color="gold" style={{ marginRight: 10 }} />
                                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.rating}</Text>
                                </View>
                            </View>
                        </View>
                    )
                }}
            />
            <Text style={styles.title}>Address</Text>
            <Text style={styles.title}>{address}</Text>
        </LinearGradient>
    </View>
    );
};


Error:
 ERROR  Warning: React has detected a change in the order of Hooks called by MainMenuScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Answer 1

It actually happens because of any bad practice for hook implementations

1 - Only Call Hooks at the Top Level Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function

NOTE: Implement your useState hooks first at top of the function

2 - Only Call Hooks from React Functions Don't call Hooks from regular JavaScript functions

3 - Getting Error during Test If you get This Error when testing the component, be careful to where you set your custom hooks (replace to top of the function)

Best Practice use eslint for lint your code avoid geting React Hooks Rules errors

install package with npm or yarn

npm install eslint-plugin-react-hooks --save-dev