Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)

[Hypothesis-github]

Introducing ' observer ' to the component results in triggering of the above error.

here is my code :

import React from 'react'
import { Form } from 'semantic-ui-react'
import {inject , observer} from 'mobx-react'

const Login = observer((props) => {
  
    const [username, setUsername] = React.useState(``)
    const [password, setPassword] = React.useState(``)

    
    const  handleSubmit = async () => {

        


        try {

            fetch('api/cockpit/authUser?token=xxxxx', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                user: username,
                password
            })
        })
        .then(user => user.json()) 
        .then(user => {
            console.log(user.active)
            props.store.loggedMsg = user.active
        })
            
        } catch (error) {
            props.store.loggedMsg = error
        }
    }


    return (
        <>
            <Form onSubmit={handleSubmit}>
                <Form.Group>
                    <Form.Input placeholder='Username' value={username} onChange={(e) => setUsername(e.target.value)} />
                    <Form.Input
                        placeholder='Password'
                        type='password'
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                    <Form.Button content='Submit' />
                </Form.Group>
            </Form>
           { console.log(props.store.loggedMsg)}
        </>
    )

})

export default inject('store') (Login)

Do I have to resort to mobx-lite?

[danielkcz]

You either can wait for v6 (#644) or use mobx-react-lite (observer or useObserver) for functional components using hooks. In this specific example, you can also get away with <Observer /> from V5 of this package since there is nothing observable before the return.

[mweststrate]

...Or use `<Observer>` sections instead of the `observer` wrapper for function components

…

On Mon, Mar 11, 2019 at 11:48 AM Hypothesis ***@***.***> wrote: Closed #656 <#656>. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#656 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhONR1QKUiCrqN1vzktB0UW-p3MTnks5vVjSJgaJpZM4bnZMB> .

[imranzaidi]

I'm using mobx-react-lite 1.4.0 alongside mobx-react 5.4.3. I normally don't see this error until I'm using React chrome dev tools to inspect the tree. To be more specific, it only happens once I actually click on the the main component that wraps the function component using state. The function components inside the main "container" component are using useContext hook and a few useState hooks that were already in there; they're wrapped in observer function imported from mobx-react-lite and the main components isn't. I can still develop and have it working but due to the above I can't really inspect or debug which can be a total nightmare when building complex UIs. Has this behavior been observed by anyone else?

[mweststrate]

I suggest upgrading to mobx-react@6. Op ma 17 jun. 2019 21:16 schreef Imran Ali Zaidi <notifications@github.com>:

…

I'm using mobx-react-lite 1.4.0 alongside mobx-react 5.4.3. I normally don't see this error until I'm using React chrome dev tools to inspect the tree. To be more specific, it only happens once I actually click on the the main component that wraps the function component using state. The function components inside the main "container" component are using useContext hook and a few useState hooks that were already in there; they're wrapped in observer function imported from mobx-react-lite and the main components isn't. I can still develop and have it working but due to the above I can't really inspect or debug which can be a total nightmare when building complex UIs. Has this behavior been observed by anyone else? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#656?email_source=notifications&email_token=AAN4NBGAWJP5SXHKLP4KFA3P27PIFA5CNFSM4G45SMA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX4FQ5Y#issuecomment-502814839>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAN4NBEQAZ7BKI4AUU4JIM3P27PIFANCNFSM4G45SMAQ> .

[imranzaidi]

I would like to migrate completely but there's still plenty of class components in the code base using decorators. My understanding is decorators are not part of mobx-react-lite and I inferred since they're not there they aren't in mobx-react 6 either?

[danielkcz]

@imranzaidi If you use mobx-react@6 you will still have inject/observer available and mobx-react-lite will be automatically used for your refactored functional components.

[imranzaidi]

@FredyC Ah gotcha, thanks!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.