hooks not plays well with mobx-react observer

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]

@kimochg Got it! Looks like there’s an upstream issue at the mobxjs repo for this: https://github.com/mobxjs/mobx-react/issues/591.

[elie222]

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