Here’s my take on using a Haxe/React functional component with hooks (useState, useRef, useEffect) with react 16.8.
What do you think about it? Are there better ways of destructuring the return array of useState()…?
(As Haxe unfortunately doesn’t have object/array destructuring yet (Destructuring assignments · Issue #4300 · HaxeFoundation/haxe · GitHub), I “destructure” the return array [state, setState] into an object for each value via an temp Array - not very elegant. How would you guys do this? Macros, I guess…)
EDIT: Using untyped for the hooks here - someone’s having externs for them?
/ Jonas
import react.ReactMacro.jsx;
class App {
static public function main() {
var body = js.Browser.document.querySelector('main');
react.ReactDOM.render(jsx('<TestHooks defaultText=${'Abc123'} />'), body);
}
static public function TestHooks(props:{defaultText:String}):react.ReactComponent.ReactElement {
//----------------------------------------------
// State hooks
var temp:Array<Dynamic> = untyped React.useState(props.defaultText);
var text:{state:String, setState:Dynamic->String} = {state: temp[0], setState: temp[1]};
var temp:Array<Dynamic> = untyped React.useState(222);
var num:{state:Int, setState:Dynamic->Int} = {state: temp[0], setState: temp[1]};
//----------------------------------------------
// Ref hooks
// We must use ref for render counter - it can't be held in state, because updating a state counter
// would cause another render, causing an inifite loop
var renderCountRef:{current:Int} = untyped React.useRef(1);
var inputRef:{current:js.html.InputElement} = untyped React.useRef();
//---------------------------------------
// Effect hooks
var alwaysEffect:(f:Void->Void)->Void = untyped React.useEffect;
alwaysEffect(() -> {
trace('run on each render');
renderCountRef.current++; // increase counter on each render
});
var numEffect:(f:Void->Void, a:Array<Int>)->Void = untyped React.useEffect;
numEffect(() -> {
trace('run when num is changed, but not when text is changed');
}, [num.state]);
//------------------------------------------------
// Render
return jsx('<div>
<h3>Haxe, React, Functional components, Hooks</h3>
<div>text: <input key="input" ref=${inputRef} value=${text.state} onChange=${e -> text.setState(e.target.value)} /> </div>
<div>
<button onClick=${e -> num.setState(() -> num.state + 1)}>Inc num</button>
<button onClick=${e -> num.setState(() -> num.state - 1)}>Dec num</button>
<span>num: ${num.state}</span>
</div>
<p>Render count: ${renderCountRef.current} </p>
<button onClick=${e -> inputRef.current.focus()}>Set input field focus</button>
</div>');
}
}
haxe-react isn’t rushing to support them, because AFAIK MassiveInteractive is kinda sunsetting Haxe and so the lib is used only in pretty old projects with pretty old react versions
haxe-react-next probably won’t be adding them because Rudy hates hooks and I can’t say I blame him
I don’t really want to bore you with my opinions on all the things that are wrong with hooks, so let’s get straight to how one would use them:
@:native('React')
extern class Hooks {
static function useRef<T>(?value:T):{ current:T };
static function useState<T>(init:T):HookState<T>;
static function useEffect(fx:()->Void, ?dependencies:Array<Dynamic>):Void;
}
abstract HookState<T>(Array<Dynamic>) {
public var value(get, set):T;
function get_value():T
return this[0];
function set_value(param:T):T {
this[0] = param;// may not be necessary, but in concurrent mode this should lead to more consistent state - that's why JS react users are compelled to use setState(prev => prev + 1)
this[1](param);
return param;
}
}
The general rule is: if you have something in JS that doesn’t map onto the Haxe type system, make an abstract over untyped code.
Which would then make your code look like so:
import react.ReactMacro.jsx;
class App {
static public function main() {
var body = js.Browser.document.querySelector('main');
react.ReactDOM.render(jsx('<TestHooks defaultText=${'Abc123'} />'), body);
}
static public function TestHooks(props:{defaultText:String}):react.ReactComponent.ReactElement {
//----------------------------------------------
// State hooks
var text = Hooks.useState(props.defaultText);
var num = Hooks.useState(222);
//----------------------------------------------
// Ref hooks
// We must use ref for render counter - it can't be held in state, because updating a state counter
// would cause another render, causing an inifite loop
var renderCountRef = Hooks.useRef(1);
var inputRef = Hooks.useRef();
//---------------------------------------
// Effect hooks
Hooks.useEffect(() -> {
trace('run on each render');
renderCountRef.current++; // increase counter on each render
});
Hooks.useEffect(() -> {
trace('run when num is changed, but not when text is changed');
}, [num.value]);
//------------------------------------------------
// Render
return jsx('<div>
<h3>Haxe, React, Functional components, Hooks</h3>
<div>text: <input key="input" ref=${inputRef} value=${text.value} onChange=${e -> text.value = e.target.value} /> </div>
<div>
<button onClick=${e -> num.value +=1}>Inc num</button>
<button onClick=${e -> num.value -=1}>Dec num</button>
<span>num: ${num.value}</span>
</div>
<p>Render count: ${renderCountRef.current} </p>
<button onClick=${e -> inputRef.current.focus()}>Set input field focus</button>
</div>');
}
}
Thank you, Juraj, for your elaborate answer and elegant solution!
Good or bad, React with functional components and hooks are everywhere, and when dealing with react code and projects, it’s so much won when you’re able to “map” js workflow to haxe without too much reinterpretation.
Very elegant to map the useState return array to a getter/setter pair…! Thanks again!
@Zhan: In Juraj´s solution, the javascript way of handling it (with [checked, setChecked] for value and setter method respectively) is hidden behind the HookState abstract. You can ineract with it as following:
