hooks not plays well with mobx-react observer

[chengcyber]

Do you want to request a feature or report a bug?
bug

What is the current behavior?

My code is shown below, it complains 'Hooks can only be called inside the body of a function component.'

import React, { useState } from 'react'
import { observer } from 'mobx-react'

import WishListItemEdit from './WishListItemEdit'

const WishListItemView = ({ item }) => {
    const [isEditing, setIsEditing] = useState(false)
    const toggleEditing = () => setIsEditing(!isEditing)

    if (isEditing) {
        return (
            <WishListItemEdit item={item} />
        )
    }

    return (
        <li className="item">
            { item.image && <img src={item.image} /> }
            <h3>{item.name}</h3>
            <span>{item.price}</span>
            <span>
                <button onClick={toggleEditing}>Edit</button>
            </span>
        </li>
    )
}

export default observer(WishListItemView)

after removing the observer, using export default WishListItemView, it works.
Is there a conflict between using mobx observer with react hooks? Since the component is no longer an observer component following the mobx pattern.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I created my repo from CRA, and update both react and react-dom to 16.7-alpha.0

What is the expected behavior?

it works well with mobx-react observer

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[philipp-spiess]

Hey!

From the code you've attached, everything looks correct. Maybe this has something to do with mobx-react or perhaps you have a stale cache that is not using the right React version.

You can check out this Hook-enabled CodeSandbox example I made with your example: https://codesandbox.io/s/613zrmj85r. Everything seems to work as expected.

[philipp-spiess]

I just saw this issue from another community member: #13991

You can try to see if you're running into the same issue 🙂 I hope this helps.

[chengcyber]

@philipp-spiess, thanks for your quick reply and nice demo! I checked the issue you mentioned, but I think this is a different issue because it works without the observer decorator.

Also, I created a codesandbox here.
https://codesandbox.io/s/zrnx27jv63

You can comment the line 30, and uncomment the line 29 to suppress the error...

My concern is the hooks feature might be broken by a third-party module so easily, but it's the recommended code style now by the official react team. That might leads to the efforts of the ecosystem to change their implementation, or the official could handle more cases like this one. :)

[philipp-spiess]

@kimochg Got it! Looks like there's an upstream issue at the mobxjs repo for this: mobxjs/mobx-react#591.

[chengcyber]

@philipp-spiess, That's SUPER helpful! 🙂

[elie222]

@kimochg did you find a way to get React hooks and observer working nicely together?