CPLAT-8041 Implement/Expose useImperativeHandle Hook #247
Conversation
…ndle-hook # Conflicts: # lib/hooks.dart
sydneyjodon-wk
changed the base branch from
CPLAT-8040-useref-hook
to
5.4.0-wip
There was a problem hiding this comment.
This looks dooope! Refs are crazy and confusing, but the example is really straight forward and helped me figure out what was going on.
Most of my comments are just about nit picky typing stuff - all of the most important things looked awesome. Besides the comments, could we add an example using the dependencies parameter? I kinda get it, but it's still a little foggy and I think an example could help!
lib/react_client/react_interop.dart
Outdated
| @@ -53,6 +53,7 @@ abstract class React { | |||
| external static Function useCallback(Function callback, List dependencies); | |||
| external static ReactContext useContext(ReactContext context); | |||
| external static JsRef useRef([dynamic initialValue]); | |||
| external static void useImperativeHandle(JsRef ref, Function() createHandle, [List dependencies]); | |||
There was a problem hiding this comment.
Based on whether or not my typing information of hooks.useImperativeHandle is correct, this would be updated to match:
| external static void useImperativeHandle(JsRef ref, Function() createHandle, [List dependencies]); | |
| external static void useImperativeHandle(JsRef ref, void Function() createHandle, [List<dynamic> dependencies]); |
| ref, | ||
| () { | ||
| print('FancyInput: useImperativeHandle re-assigns ref.current'); | ||
| return {'focus': () => inputRef.current.focus()}; |
There was a problem hiding this comment.
This matches the JS implementation by using a Map, but I think it might be helpful to also show a Dart object being used (perhaps in another example), to illustrate that you can use typed objects and not just Maps.
class FancyInputApi {
final void Function() focus;
FancyInputApi._(this.focus);
}
final FancyInput = react.forwardRef((props, ref) {
final inputRef = useRef();
useImperativeHandle(
ref,
() {
print('FancyInput: useImperativeHandle re-assigns ref.current');
return FancyInputApi(() => inputRef.current.focus());
},
/// Because the return value of createHandle never changes, it is not necessary for ref.current
/// to be re-set on each render so this dependency list is empty.
[],
);
});It is admittedly a bit clunkier than using a Map, but it does provide static typing.
Thoughts?
There was a problem hiding this comment.
That makes sense!
…erativeHandle-hook # Conflicts: # example/test/function_component_test.dart # lib/hooks.dart # lib/react_client/react_interop.dart # test/hooks_test.dart
…T-8041-useImperativeHandle-hook
…ndart/react-dart into CPLAT-8041-useImperativeHandle-hook
Motivation
Support useImperativeHandle hook in
react-dart.Changes
useImperativeHandlefunction.Please review: @greglittlefield-wf @aaronlademann-wf @joebingham-wk