React Newsletter #199

Deep linking in React Native, understanding concurrent React, and learning about state management


Hi friends,

This is issue #199, which means next week is a big one (cause you know, base-10 numbering). Up until this point, React Newsletter has been a fun side project for me. As we're approaching 20,000 subscribers now, I think it's time it starts getting a little more love. Starting next week, we're going to be experimenting with some small changes to make it even better. If you have any ideas on how we can improve, feel free to reply to this issue as I'd love to hear them.


Articles

6 things I wish I knew about state management when I started writing React apps

A solid writeup from Veeral about state management. Spoiler alert, here's his list. Check out the article to get more details.

  1. State management is how you mitigate prop drilling
  2. State management is how you update your page after creating/updating data, without a refresh
  3. Manage your state maintainably by storing it in the right places
  4. Learn other state management libraries in addition to just Redux
  5. Your React app has two layers
  6. Shared vs non-shared components"

Deep Linking in React Native

A practical guide to what Deep Linking is and how to accomplish it in React Native (including code samples). Also, this blog is really pretty and that has to count for something.

To Understand Concurrent React, Look Outside React: 3 Talks from Outside React

To better understand Concurrent React, swyx suggests you look outside of the React ecosystem. He's smart, so I think that's a reasonable suggestion. This article suggests talks from Python, Koka, Java/Haskell/Scala to help you get your lingo down.


Sponsor

Learn the Concepts of AI in a Free Five-Day Mini-Course

Interested in AI but not sure where to start? This free, five-day mini-course is a great introduction to AI and Machine Learning. By the end of the course, you'll understand important AI buzzwords, common types and uses of AI and Machine Learning, and practical business applications. This course is taught by a Google-certified AI developer and includes a certificate of completion. Sign up today and start your AI learning journey!


Projects

OpenChakra

OpenChakra is an open-source visual editor for React, and it's really good.

react-ufo: 🛸

Fetch and Axios help you fetching data but when you need to link the status of a request to your React state you are on your own. Handling the UI state related to a request can be repetitive and error-prone, especially if you have to handle related requests within the same component, ignore requests results after your, the component is unmounted, etc. react-ufo is a beginner friendly Hook to help you deal with this complexity.

react-tiger-transition: Full page transitions with react-router.

react-tiger-transition offers page transitions for react router dom. Animate your routes programmatically during navigation. Instead of defining the animation inside , this module defines inside , allowing to easily reach and leave the same url with different transitions. It's not my cup of tea, but that's irrelevant.

use-places-autocomplete

This is a React hook for Google Maps Places Autocomplete, which helps you build an UI component with the feature of place autocomplete easily! By leveraging the power of Google Maps Places API, you can provide a great UX for user interacts with your search bar or form etc.

react-use-firebase-hook

Clean, lightweight and hooks-based approach of integrating Firebase into your React web app, without compromising the Firebase SDK features.


made with ❤️ by ui.dev