Adding Features to Your React App: Tools for Various Cases

Introduction

React – although it started as a simple tool for generating components, over the years it grew to a powerful set of tools easily extendable with third-party plugins.

Which tools should you choose to deliver functionalities your business needs?

In this article, we’re sharing widely-accepted tips and tools for implementing:

• state management,
• real-time communication,
• geolocation,
• payments.

In each of the sections, we explain which tool your team can use to deliver the required feature, why it’s considered the best solution, and how it works.

State management – React with Redux

The most frequently used tool for data management in React apps is undoubtedly Redux. 

It is so popular that many people, who’ve heard of React, believe it can only be used with Redux. In reality, the library is a complete standalone (weighs only 2kBs) and may be used together with any JS framework. 

Redux is very easy to implement and allows for adding extensions such as redux-persist (used for remembering the state after coming back) or immutableJS.

Thanks to its simplicity and ease of integration it gained a lot of popularity among developers. As a result, many debugging tools built solely for Redux were created.

In Redux the state can only be changed by dispatching actions (direct change of state is impossible) so the flow of a feature in the application can be observed by looking at the list of dispatched actions. This simplifies debugging as developers are able to look at the current state of the app after each action is performed.

Some developers claim that it’s inconvenient to write in Redux as even the simplest actions (i.e. changing the state of a modal to close/open) require:

• creating an action creator (which is the name of the action), 
• action dispatcher, 
• function that returns a new state with the new value, 
• selector for getting the current state of the modal in order to pass it to the UI 
• creating a bridge between Redux and React 

<span class="colorbox1" fs-test-element="box1"><p>Note: React components update whenever there is a change in the component’s state, hooks, or props, so they don’t react to changes that happened somewhere else, thus the bridge is required.</p></span>

Redux toolkit eases most of those pains. 

In Redux a lot of the code is repetitive, but if developers use React toolkit they can automate it and thus significantly reduce the codebase.

As mentioned earlier Redux allows for extensibility. 

Developers may add an existing solution for asynchronous calls, or create their own.

For example, when fetching data from the server they can dispatch an action responsible for the start of a server call (which is often suffixed with _STARTED e.g. FETCH_PHOTOS_OF_CATS_STARTED). 

After the fetching finishes, they can dispatch another action, this time with a suffix _SUCCESS if the call was successful or e.g. _REJECTED if the call failed.

Redux-toolkit helps to simplify this repetitive process.

Real-time chat/video chat app – Socket.io with React

Writing a chat application with popular web application stacks like LAMP (PHP) is hard. It involves polling the server for changes, keeping track of timestamps, and it’s a lot slower than developers and businesses would like.

Sockets have traditionally been the solution around which most real-time chat systems are architected. 

Why?

It’s because they provide a bi-directional communication channel between a client and a server, meaning the server can push messages to clients. 

The idea is that whenever a chat message is sent, the server receives it and pushes it to all other connected clients.

The most popular tool for this purpose is socket.io. It works on every platform, browser, or device, focusing equally on reliability and speed.

When it comes to real-time chat messaging, React doesn’t produce any obstacles. Once the connection is established, a client and the server may freely communicate with each other. 

The sole purpose of React here is only to provide the UI to expose fresh data from the server and (optionally) allow the user to send his/her messages.

What’s noteworthy is that it works with React Native out of the box, too. 

<span class="colorbox1" fs-test-element="box1"><p>Good to know: React Native is a popular spin-off of the React library that is used to create native mobile applications. In some cases, it allows developers to share the codebase (including socket.io) between the web and mobile applications.</p></span>

Geolocation

To implement a functionality connected to geolocation in a React app, developers need to use the Geolocation API. It retrieves users’ locations, which can later be used to display their positions using a mapping API. 

As there aren’t any widely-used libraries on the market that could be recommended for this feature, in most cases, building a customized solution adjusted to the specific needs of the project proves best.

Payments

The topic of payments is a broad one. There are multiple third-party payment providers available on the market such as Stripe or PayPal, but no one-fits-all solution.

When choosing a provider for your product consider your business vision, the needs of your customers, and the standards in your industry.

Adding features to React apps – Cheat list

What is beautiful about React is that it is painlessly extensible and doesn’t force engineering teams to use any specific tools.

React community has created many robust solutions for typical use cases such as styling, routing, or state management, so businesses can freely choose third-party libraries they want to implement.

<span class="colorbox1" fs-test-element="box1"><h3>Which React tools could you use and when?</h3><ul><li>Data management – Redux, Redux-toolkit, and Redux devTools.</li><li>Real-time data transfer between the server and the client – Socket.io.</li><li>Geolocation – it’s a simple API, there’s no need to use any additional tools.</li><li>Payments – no obvious leader, the solution you pick will depend on the providers your business chooses to support.</li></ul></span>