Skip to content

Navigation Menu

Sign in
Sign up

WIP fix #171 Convert react integration to use hooks - #186

Open
lkmill wants to merge 1 commit into
developit:master from
lkmill:react-hooks
Open

WIP fix #171 Convert react integration to use hooks #186
lkmill wants to merge 1 commit into
developit:master from
lkmill:react-hooks

Conversation

@lkmill

@lkmill lkmill commented Apr 5, 2020 •
edited
Loading

Copy link
Copy Markdown

To fix #171 and not use any UNSAFE_ methods, i converted the react integration to use hooks.

I haven't updated the tests yet, want to hear whether this is an acceptable change first.

Besides removing the warnings, this also greatly reduces the build file sizes:

Before:

Build "unistore" to .:
 620 B: react.js.gz
 531 B: react.js.br
Build "unistore" to full:
 801 B: react.js.gz
 708 B: react.js.br
 809 B: react.es.js.gz
 717 B: react.es.js.br
 861 B: react.umd.js.gz
 757 B: react.umd.js.br

Build "unistore" to .:
 466 B: react.js.gz
 393 B: react.js.br
Build "unistore" to full:
 682 B: react.js.gz
 592 B: react.js.br
 694 B: react.es.js.gz
 616 B: react.es.js.br
 741 B: react.umd.js.gz
 649 B: react.umd.js.br

With some code golf, eg not using array destructuring, it is quite simple to reduce the size further but the code becomes less readable.

btzr-io, dan-lee, and Akiyamka reacted with thumbs up emoji

@Akiyamka Akiyamka left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

lgfm

Comment thread src/integrations/react.js
* @connect( state => ({ foo: state.foo, bar: state.bar }) )
* export class Foo { render({ foo, bar }) { } }
*/

@ForsakenHarmony ForsakenHarmony Apr 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change

Comment thread src/integrations/react.js
return Child => function Wrapper (props) {
const store = useContext(Context);
let [state = mapStateToProps(store ? store.getState() : {}, props), setState] = useState();
boundActions = boundActions || actions ? mapActions(actions, store) : { store };

@ForsakenHarmony ForsakenHarmony Apr 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I think useMemo would be a lot better here, this seems way too likely to break

Comment thread src/integrations/react.js
let boundActions;
return Child => function Wrapper (props) {
const store = useContext(Context);
let [state = mapStateToProps(store ? store.getState() : {}, props), setState] = useState();

@ForsakenHarmony ForsakenHarmony Apr 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
let [state=mapStateToProps(store ? store.getState() : {}, props),setState]=useState();
let [state,setState]=useState(mapStateToProps(store ? store.getState() : {}, props));

Comment thread src/integrations/react.js
return (Wrapper.prototype = Object.create(Component.prototype)).constructor = Wrapper;

return store.subscribe(update);
}, []);

@ForsakenHarmony ForsakenHarmony Apr 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Suggested change
}, []);
}, [store]);

Might want to at least put the store in here
maybe props as well?

Copy link
Copy Markdown

Super old PR lol 🙃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers
@Akiyamka Akiyamka Akiyamka left review comments
@ForsakenHarmony ForsakenHarmony ForsakenHarmony left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Remove depracated in react 16.9 componentWillReceiveProps

AltStyle によって変換されたページ (->オリジナル) /