javascriptreactjsreact-nativereact-hooksreact-native-web

React-hooks-global-state invalid hook call on button press


I am attempting to use react-hooks-global-state to create global hooks in functional react that update based on user input, but am running into the following error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

First off, here are my package.json dependencies:

"dependencies": {
    "@expo/webpack-config": "^0.17.0",
    "bootstrap": "^5.2.2",
    "expo": "~46.0.9",
    "expo-status-bar": "~1.4.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
    "react-dom": "^18.2.0",
    "react-hooks-global-state": "^2.0.0",
    "react-native": "0.69.5",
    "react-native-web": "~0.18.7"
  },

And here is a simple example:

import { React } from 'react';
import { createGlobalState } from 'react-hooks-global-state';
import { Text } from 'react-native';

const initialState = { myVar: 1 };
const { useGlobalState } = createGlobalState(initialState);

export default function App() {
    const [myVar, setMyVar] = useGlobalState('myVar');
    setMyVar(10);
    return (
        <>
            <Text>
                {myVar}
            </Text>
            <button onClick={changeValue}>
                Set to 0
            </button>;
        </>
    );
}

function changeValue(){
    const [myVar, setMyVar] = useGlobalState('myVar');
    setMyVar(0);
}

Specifically, the error occurs at const [myVar, setMyVar] = useGlobalState('myVar'); in changeValue() as it is called on button press. I was, however, able to confirm that the global hooks work if I remove dynamic user input (i.e. just calling the changeValue() directly in the App() function), so I'm not sure why I'm running into this error.

Edit: here's an example of the changeValue() function working non-dynamically:

import { React } from 'react';
import { createGlobalState } from 'react-hooks-global-state';
import { Text } from 'react-native';

const initialState = { myVar: 1 };
const { useGlobalState } = createGlobalState(initialState);

export default function Profile() {
    const [myVar, setMyVar] = useGlobalState('myVar');
    changeValue();
    return (
        <>
            <Text>
                {myVar}
            </Text>
        </>
    );
}

function changeValue(){
    const [myVar, setMyVar] = useGlobalState('myVar');
    setMyVar(0);
}

Solution

  • The error is because you call react hooks setMyVar not on React Component

    import { React } from 'react';
    import { createGlobalState } from 'react-hooks-global-state';
    import { Text } from 'react-native';
    
    const initialState = { myVar: 1 };
    const { useGlobalState } = createGlobalState(initialState);
    
    export default function App() {
        const [myVar, setMyVar] = useGlobalState('myVar');
    
        function changeValue(){
          setMyVar(0);
        }
    
        return (
            <>
                <Text>
                    {myVar}
                </Text>
                <button onClick={changeValue}>
                    Set to 0
                </button>;
            </>
        );
    }