Expo SDK 33 - useState Hook error

[paulcham]

Checked the docs that hooks are supported by Expo SDK 33.

However I’m getting:
Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)

Anyone successfully implemented Hooks with Expo 33?

app.json
"sdkVersion": "33.0.0"

package.json
"react": "16.8.3"
"expo": "^33.0.0"
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz"

Thanks.

[rodw1995]

Hooks are working fine for me in Expo 33. Looking at the error message you are probably calling a hook from something that is not a function component. Maybe I can help if you show some code.

[paulcham]

@rodw1995 I think I know now why, it’s because const [loading, setLoading] = useState(false); is outside the LoginPage component. Placing it inside doesn’t compile properly with a syntax error since, I’m on .tsx. I guess I’m stuck with setState for now until I can sort this .tsx issue out. Thanks.

export class LoginPage extends Component<Props> {
    //Syntax error, does not compile
    const [loading, setLoading] = useState(false);

    doLogin() {
        setLoading(true);
        //Test onSuccess
        setTimeout(() => {
            setLoading(false);
        }, 3000);
    }
}

[rodw1995]

Well I have no experience with typescript and react, but in your code you are using a Class Component and not a Functional Component so hooks won’t work anyway. Hooks only work in Functional Components: https://reactjs.org/docs/hooks-intro.html