Close

Redux-less context-based useSelector hook that has same performance as React-Redux

Redux-less context-based useSelector hook that has same performance as React-Redux

Introduction
React-Redux provides hooks API
with nice abstraction.
Especially, useSelector is probaly less misused than mapStateToProps.
react-tracked
is a library for global state without Redux.
This library provides almost compatible hooks API to React-Redux.
It’s developed with performance in mind, and it should
be as performant as React-Redux, even though it utilizes
only React context. See the GitHub repo for more information.
https://github.com/dai-shi/react-tracked
This post shows benchmark results to convince that
it actually is performant in one scenario.
It’s worth mentioning that react-tracked, as the name implies,
has another useTrackedState hook that has capability of
state usage tracking. Unlike useSelector, developers don’t need
to define selectors for this hook.
It’s also worth mentioning that another library
reactive-react-redux
provides the useTrackedState hook for Redux.
See the GitHub repo for more information.
https://github.com/dai-shi/reactive-react-redux
We compare all hooks described above.
Benchmark tool
To benchmark different frameworks,
js-framework-benchmark
is used.
Checkout the forked repo
if you want to reproduce the benchmark result at your end.
Benchmark results

react-tracked-useTrackedState: useTrackedState in react-tracked v0.4.0
react-tracked-useSelector: useSelector in react-tracked v0.4.0
reactive-react-redux-useTrackedState: useTrackedState in reactive-react-redux v4.0.0-beta.0
reactive-react-redux-useSelector: useSelector in reactive-react-redux v4.0.0-beta.0
react-redux-hooks: useSelector in react-redux v7.1.0

Closing notes
The benchmark code for useSelector is almost identical
among three libraries.
The code for useTrackedState is also identical
between two libraries.
However, the code for useSelector and
the code for useTrackedState is a bit different
and they are optimized separately.
Hence, be reminded when comparing with different hooks.
I hope these results encourage developers to try my two libraries.

The post Redux-less context-based useSelector hook that has same performance as React-Redux appeared first on Web Design Tips.

Best Web Design Myrtle Beach

Website Design Myrtle Beach

Web Design Myrtle Beach

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3318.7978769654424!2d-78.89065158479374!3d33.714178680699305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89006948f3f1d2cf%3A0x5b44b4834ae52223!2sCoastal+Media+Brand!5e0!3m2!1sen!2sus!4v1560353810818!5m2!1sen!2sus&w=400&h=300]

Related Posts