Next auth (M.)
Open-source authentication solution for Next.js apps
☀️ Built-in popular sign-in providers supported (Google, Facebook, Auth0, Apple, etc.)
☀️ Support for credentials and passwordless sign-in
☀️ Authorization logic is highly customizable
☀️ The signed-in user can be easily accessible on the client side via the built-in hooks
☀️ Ability to tailor the structure of the session user
☀️ Built-in tab/window syncing
☀️ Secure by default
☀️ Great overall documentation
🌧️ Handling of JWT callback can be a bit overwhelming
Example
Conclusion
⚡ Popular sign-in providers like Google or Facebook can be implemented in a few minutes
👨🏻💻 The signed-in user information can be accessed via the client-side
useSession() hook or the server-side unstable_getServerSession() function🔒 The local data are stored in a secured server only cookies
Jotai (A.)
Jotai
Jotai (atomic) vs Redux, React Context (monolithic)
Redux - similar to (singleton pattern) - (big global object)
with Jotai - You break your state into atoms i.e. - one atom for one single store, or for closely related state.
✅ No need for memo ⇒ selector function needs to return referentially equal values to prevent re-renders and this often requires a memoization technique
✅ Good Typescript support
✅ Good docs and api
'jotai/utils’ cool helper functions
atomWithImmer
How it went on PH
In component
Věci pod čarou 🙂
Devtools
😑 you can etiher debug it with React Devtools or Redux devtools - not that good coompare to Redux
Conclusion
Great for simple app state - would use it again
React hook form (L.)
Most significant difference compared to other solutions (Formik, Final form, Redux-form) is no usage of React context.
Also the library utilizes uncontrolled components over controlled ones.
Both these ☝️gives it power of amazing performance as it drastically decreases count of wasted rerenders.
☀️ Integration with UI libraries is not made over some mid-package
☀️ Included basic validation aligns with HTML standard
☀️ Easy integration with most of popular schema validators
☀️ The API design seems solving most of problems I was facing last years (submit mode, first or all errors, ...)
☀️ Ecosystem includes a Devtool for debugging the form
☀️ Great Typescript support and utilization
☀️ It’s small in bundle size
🌧 When you have deeply nested form trees, you need to resort to usage of context anyway
🌧 May be sometimes quite verbose (it’s a price for flexibility)
🌧 Leverages some special APIs like
Proxy which might sometimes lead to confusions or unexpected issuesExample
Notice the component is controlled based on passing
register or not, so we don’t need to make any wrapping InputField component.For controlled components
Conclusion
🔌 Ideal for forms consisting of inputs that can work in uncontrolled mode
🚀 Perfect for big forms to boost their performance
🤔 We didn’t try integration with
redux-saga but I guess it will need similar wrap up technique as final form🏋️ It’s flexibility surpasses the verbosity, but in some ways it’s quite new in compare to what we’re used to use - there is some learning curve
Reach UI (M.)
Library containing 15 different unstyled UI components
☀️ Reliable and well-tested components
☀️ Incremental adoption → Install component by component
🌧️ Limited number of components
🌧️ New components won't be added
Alternatives
- Radix UI
- more components
- new components are still being added
- well documented
- has some problems when testing with React Testing Library
- does not support IE very well
- Headless UI
- a small number of components
- seems to be quite well documented
- works well with Tailwind CSS
- Downshift
- by Kent C. Dodds
- focuses on autocomplete, select, combobox, and multi combobox
- total control over styling and functionality
Conclusion
I would prefer to use another library, like Radix UI. Other than that, the approach of styling primitive UI components instead of using a UI framework proved to be efficient and easy to implement.
useSWR (A.)
wrapper around fetch == simple implementation of useEffect a useState
derived from stale-while-revalidate = first cache (stale) then fetch (revalidate)
✅ Small bundle 4.2 kB
✅ easy api (no loading state 😢 )
- simple cache for small apps
- pagination
👎 docs for graphql
👎 not really state management solution (maybe smth like reactQuery would be better fit for us)