The Latest In React & React Native

Revisiting React Hooks:

It has been more than 1 year since React Hooks was unveiled and an year later, it appears to be no longer omittable in any form. More APIs are being upgraded to support Hooks, like React Navigation etc. and as much as it came across as a big change, it is on its way to becoming a norm.. 

One of the newest packages out there for React is SWR (stale-while-revalidate) by Vercel, the creators of Next JS. It is simply a caching service in React. You can make fetch calls and cache them too. In every situation where using any State Management, duplicating APIs, writing scripts for caching etc. finds its way into a project, SWR holds responses as key values and these key values act as identifiers for different APIs and refreshes on its own.

The connect method is still the go to method to get data from Redux but Hooks has added on to that. Still, the connect method does away with the problems that are faced when dealing with stale states in Hooks and is still the primary choice of method for fetching data, or as our geeks say.

React Spring has decent hooks for animations. There are some hooks for server-side rendering as well which are very good, so moving from HOC to Hooks completely in the coming times won’t be such a bad idea.

React Navigation:

React Navigation has got a pretty big upgrade. It has been rebuilt completely using Hooks.

React Navigation 4.0 was more like a configuration where it required to be provided a JSON structure, which defined structure for our side tabs, stacks etc. React Navigation 5.0 is a lot better because it accepts structure declaration in JSX, which has made the learning curve quite smooth as compared to its predecessor. Handling authentications is super easy in React Navigation 5.0. It works by conditionally rendering screens. Even the docs are very clear and simple to understand. Maintaining structures between screens and tree structures is easier in React Navigation 5.0 and it supports React completely, though through a different package.

The Move To Typescript:

Typescript has become pretty much a staple these days. Typescript makes it super easy to handle and maintain scaled projects by checking variables passed and providing a proper documentation for function syntax etc. Facebook has recently stopped using Flow and is now pushing Typescript in React more, which has led to less fragmentation in the developer society and streamlined things. Typescript 4.0 does not have any breaking changes, so it is easy to upgrade to it from Typescript 3.

Push Notifications:

One Signal is a free push notification service for React that can be used to send notifications and in-app messages. Firebase cloud messaging is far cleaner and simpler than One Signal and handles notifications better. Keep in mind that FCM prioritizes delivering messages over showing them, so it’s recommended to use some third-party services like Notifee or RN Notification community package to handle them better. FCM also requires quite some involvement in setting a lot of parameters on Server Side for APNS and notification payload.

UI Libraries:

Chakra UI is impressive. It uses Style System, which is a general guideline on how to build UI Libraries, and Emotion. It is a Low level design system which does not need absolute values. It’s customizable like Tailwind CSS but uses CSS in JS. The documentation is pretty solid and it offers a decent amount of freedom when it comes to the level of customization offered. Quite promising, if you ask us.

Documentation Services:

Docusaurus, an open source documentation service, is the newest favourite in the colony. It’s owed to the fact that it's pretty easy to set up and is very neat. Many libraries like Recoil and Redux use Docusaurus. NextJS with mdx is a great choice for people who are beginners and are just starting out with using documentation services. In fact, NativeBase v 2.0 used GitBook but that is an old service now.