Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CPLAT-8040 Implement/Expose useRef Hook #245

Merged
merged 12 commits into from
Jan 16, 2020

Conversation

sydneyjodon-wk
Copy link
Collaborator

@sydneyjodon-wk sydneyjodon-wk commented Jan 6, 2020

Motivation

Support useRef hook in react-dart.

Changes

  • Added useRef function.
  • Added a initUseRef constructor to the Ref object.
  • Added a setter for the current property of Ref.
  • Wrote tests.

Please review: @kealjones-wk @aaronlademann-wf @greglittlefield-wf @joebingham-wk

@sydneyjodon-wk sydneyjodon-wk changed the base branch from master to 5.3.0-wip January 6, 2020 17:50
# Conflicts:
#	example/test/function_component_test.dart
#	lib/hooks.dart
#	lib/react_client/react_interop.dart
#	test/hooks_test.dart
# Conflicts:
#	example/test/function_component_test.dart
#	lib/hooks.dart
#	lib/react_client/react_interop.dart
#	test/hooks_test.dart
@sydneyjodon-wk sydneyjodon-wk changed the base branch from 5.3.0-wip to CPLAT-8035-useeffect-hook January 6, 2020 18:25
@sydneyjodon-wk sydneyjodon-wk marked this pull request as ready for review January 7, 2020 23:34
@sydneyjodon-wk sydneyjodon-wk changed the base branch from CPLAT-8035-useeffect-hook to 5.4.0-wip January 14, 2020 20:33
Copy link
Collaborator

@greglittlefield-wf greglittlefield-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple comments, mostly on generics, but otherwise this looks perfect. Awesome tests!

lib/hooks.dart Outdated
/// final input = useState('');
/// final inputRef = useRef();
/// final prevInputRef = useRef();
/// final prevInput = prevInputRef.current;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables are named pretty similarly, which makes it a little hard to tell what's going on. I think further distinguishing them and also adding some typing to the refs would help:

final inputValue = useState('');

final inputRef = useRef<InputElement>();
final prevInputValueRef = useRef<String>();

useEffect(() {
  prevInputValueRef.current = inputValue.value;
});

return react.Fragment({}, [
  react.p({}, ['Current Input: ${inputValue.value}, Previous Input: ${prevInputValueRef.current}']),
  react.input({'ref': inputRef}),
  react.button({'onClick': (_) => inputValue.set(inputRef.current.value)}, ['Update']),
]);

lib/hooks.dart Outdated Show resolved Hide resolved
lib/react_client/react_interop.dart Outdated Show resolved Hide resolved
lib/react_client/react_interop.dart Outdated Show resolved Hide resolved
test/hooks_test.dart Outdated Show resolved Hide resolved
test/hooks_test.dart Outdated Show resolved Hide resolved
test/hooks_test.dart Outdated Show resolved Hide resolved
@greglittlefield-wf
Copy link
Collaborator

Looks like there are merge conflicts on this one now too after merging another PR 😅

Copy link
Collaborator

@greglittlefield-wf greglittlefield-wf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+10

@greglittlefield-wf greglittlefield-wf merged commit b1a521b into 5.4.0-wip Jan 16, 2020
@aaronlademann-wf aaronlademann-wf added this to the 5.4.0 milestone Jan 29, 2020
@greglittlefield-wf greglittlefield-wf deleted the CPLAT-8040-useref-hook branch February 16, 2022 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants