React hooks & context

[konsumer]

I'd love to be able to use react hooks in react-blessed.

It's an RFC, now, but looks like it will probably solidify into mainline react, soon. In order to test, I installed react@16.7.0-alpha.2.

As it is, I get this error:

Invariant Violation: Hooks can only be called inside the body of a function component.

with this code:

import React, { useState, useEffect } from 'react'
import fetch from 'node-fetch'

function App () {
  const [posts, setPosts] = useState([])
  useEffect(async () => {
    const items = await fetch(
      'https://jsonplaceholder.typicode.com/posts'
    ).then(r => r.json())
    setPosts(items.map(i => i.title))
  })

  return (
    <list items={posts} />
  )
}

To verify that the hooks work, etc, here is a similar thing in a sandbox, in react-dom.

[konsumer]

here is a quick demo of the code above, so you can try it out quickly.

[Yomguithereal]

Hello @konsumer. I agree it would be nice to have hooks support. Unfortunately I am not even sure the current codebase is able to work with react@16 since a lot of changes were made to the reconciler logic. I have not much time to work on this but will of course consider any PR.

[konsumer]

I noticed similar with context (in trying to work around no hooks) and was about to make another issue. :)

I'd be happy to make a PR, but I'm not really sure where to start. It looks like you are using react-reconciler with fibers, which is basically how I would do it, and as far as I can tell all the code is fine, and should work great. Maybe it just needs new versions of a few things. I will experiment with it, and report back.

[konsumer]

Ok, I filled in the demo project a bit more to test hooks & context, including demos that work in react-dom, and will change the title of the isse to include both. I'll start looking at what needs to be added to react-blessed to make it work.

[konsumer]

I got a good start, I think. Supports @next of react, and new fiber stuff.

Maybe I am doing it wrong, but I'm not sure how to make buttons onPress to work, and it's keeping demos from working (button-presses trigger state/context changes.) Any help would be appreciated. I thought all I needed to do was this:

<button onPress={a => console.error('press', a)}>TEST</button>

but it doesn't seem to be calling onPress.

[konsumer]

Ah, I got it. needed mouse for buttons to work. Ok, ready for review.