ink: Using react hooks with ink: Invariant Violation

Hey,

I am trying to use the new react hooks with Ink components, but I get the error:

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

I am using the hooks inside a function component, so I guess it is related to Ink implementation?

Here is the code:

import React, {useState} from 'react'
import {h, render, Component} from "ink";

function useTest() {
	const [value, update] = useState(Date.now());
	return [value, update]
}

const Demo = () => {
	const [value, update] = useTest();

	setInterval(() => {
		update(Date.now())
	}, 1000)

	return <div>Hello: {value}</div>

}

class Wrapper extends Component<any, any>{
	
	render() {
		return <Demo />
	}
}
render((<Wrapper />));

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20 (11 by maintainers)

Most upvoted comments

Now that hooks are officially released, I will look into how to make Ink work with them 😃 Thanks everyone for helpful input!

And of course, if somebody’s already solved this problem, PRs are always welcome!

vadimdemedes on Feb 15, 2019

This should be fixed now ✌️ See #124

zkat on Feb 16, 2019

A very bare implementation would be setTimeout / clearTimeout; probably the best if there is no way to know when/if the terminal emulator is done updating the screen. Alternatively, just reexport unstable_scheduleCallback / unstable_cancelCallback from scheduler, which is what ReactDOM does (if scheduler can’t find the DOM APIs it wants it falls back to _ => setTimeout(_, 0), but still orders callbacks according to priority).

It looks like this was a last-minute (good!) change in https://github.com/facebook/react/pull/14757

Jessidhia on Feb 12, 2019

Hooks are working now thanks to @zkat!

vadimdemedes on Feb 17, 2019