What’s new in React 18?

Introduction:

What is React?

React is an independent and open-source front-end JavaScript library for building user interfaces.The current version of React 18 provides developers with improved features to create a Great User Experience. Some of the improvements are

  • Automatic Batching: Groups all state updates which in turn improves performance.
  • Transitions: Is now more sophisticated and differentiates between urgent and non-urgent user interactions.
  • React Suspense: Allows for better Server-side rendering and improves the User Experience. as well as Performance

Let’s look at these in a bit more detail

  1. Automatic Batching:

    Batching is one of the React features that combines all the updated states in a single update. Batched updates can be performed inside React event handlers, i.e., it only worked inside the synchronous React event handlers functions. These changes were made in React version 18 with automatic batching.In the example code below, it shows how the automatic batching helps to stop re-rendering the set Counter () function twice.

  2. Transitions:

    Transition is an advanced concept introduced in React 18 that helps to differentiate between urgent and non-urgent updates.

    • Urgent Update: It reflects direct interaction like typing, clicking, pressing etc. This visual feedback is high priority for users.
    • Non-urgent Update: Non-urgent updates are not vital to the user like searching, which can be marked as no-urgent updates.

    For such use cases, startTransitions and useTransitions methods are used.

    • useTransitions: useTransitions is a hook concept that begins transitions, in addition to a value to track the pending state.
    • startTransitions: startTransitions is a method to initialize start transition where hooks can’t be used. Below is the example for startTransition where you can put your code which is non-vital to the end user.
  3. Suspense:

    Suspense lets you declaratively specify the loading state for some of the component tree if it’s not prepared to be displayed. Suspense in React version 18 functions better when combined with transitions API. while you suspend the time of transition, React will halt already-visible content from being altered by a fallback. Rather, React will stop or delay the rendering until enough data has loaded to prevent an inferior loading state.
    Below is the example for Suspense that explains how to use a fallback property of it to show the loading state to the end-user.

    Concurrency

    Concurrency is the most important addition in React version 18. It is a confidential mechanism that makes it possible for React to prepare multiple versions of UI.

    For these, React uses a “dispatcher” internally which is responsible to compile and combine the callbacks.

    Before React 18, the user did not have any way to control the appeal order of these functions. Since the release of React version 18, React is providing some authority to this event loop to the user with a Transition API.

    How to upgrade to React version 18?

    You will need to install React 18 and DOM using npm/yarn.

    npm install react react-dom

    npm install [email protected] [email protected]

    After upgrading to version 18, the following changes need to be made in the Index.js file:

    Note: – There is an error in the console while upgrading to version 18.

    To fix this console issue, the index.js is converted to the latest React version 18, which recommends a new root API. This new root API provides a user-friendly system for executing roots. The new root API also enables the new concurrent re-renders which fastens the coexisting features.

    Our React developers have experience of building complex applications using React technology. They use the latest Dev tools such as React-Redux, React Hooks, React Router, React Bootstrap etc. If you would like to develop a mobile or web application using React technology, then please feel free to contact us.

Bluetooth Low Energy (BLE) technology usage and its communication with mobile devices

BLE is a wireless technology for a personal area network that is designed and marketed by the Bluetooth Special Interest Group. It is a low power-consuming device which maintains the same communication range as that of Bluetooth classic. It is mainly used in small and low power consumption devices such as a, smartwatch, BLE keychain, true wireless Bluetooth earphones, etc.  It is compatible with most of the mobile phones, tablets, and computers.

In this article, we will share how a BLE device works and how it communicates with Android and iOS devices for transferring and receiving information/data. But prior to that, let’s try to understand where BLE technology is used.
BLE

  1. 1. Device Tracking: BLE device is a tiny device that can transmit the data. It consumes very low power and can be used to track the assets and people within a range of 30 meters.
  2. 2. Machinery Diagnosis using BLE: Machine Diagnostics is possible through BLE. BLE can be integrated into the machines and used to transfer data. All key statistics as well as detailed diagnosis-related data can be retrieved from machines and transmitted to mobile devices/computers for detailed analysis.
  3. 3. BLE Proximity real-time location: BLE devices are capable of broadcasting radio signals at regular intervals. These signals can be captured by any mobile device (Android, iOS or any other compatible devices). The mobile application can then establish or pinpoint the BLE location.
  4. 4. Better retail experience: Marketers can enhance the shopping experience by attaching BLE enabled tags to products. When customers are in the vicinity of the store, they would get the latest offers/coupons/discounts for these products on their mobile app.
  5. 5. Locating people: BLE technology can be effectively used in events where you need to coordinate with different people within a particular facility.
  6. 6. Home Automation Systems: BLE is used in Home Automation Systems because of its low power consumption and low cost.
  7. 7. Health monitoring system: BLE is the best choice for health monitoring systems like fitness bands. It collects information from the human and animal body and transfers data to the mobile device using a Bluetooth connection. Since it has a low power consumption feature, it can be easily integrated with small handheld devices for better battery usage.

There are different steps involved for searching BLE peripherals, establishing the connection, writing and reading characteristics. They are as follows:

  • 1. Scan nearby BLE peripherals: To get all available nearby BLE peripheral.
    manager.startScan( ).then(availableBLEPeripherals =>{
    console.log( availableBLEPeripherals );
    }).catch(error => {
    handleError( error );
    })

 

  1. 2. Connection and Disconnection:
      1. a. To connect the BLE peripheral:
        manager.connectBle( peripheral ).then( peripheral => {
        console.log( “Connected peripheral :-”, peripheral );
        }).catch( error => {
        handleError( error );
        })

     

      1. b. To disconnect the BLE peripheral:
        manager.disconnectBle( peripheral )then( peripheral => {
        console.log( “Disconnected peripheral :-”, peripheral );
        }).catch( error => {
        handleError( error );
        })

     

  2. 3. Start listening for incoming data:
      1. a. To get all the incoming data from BLE:
        manager.monitorBle( peripheral.id, peripheral.characteristics).then( ( response ) => {
        console.log( response );
        }).catch( error => {
        handleError( error );
        })

     

  3. 4. Write characteristic:
      1. a. To fire query to BLE peripheral:
        manager.writeData( peripheral.id, peripheral.service, peripheral.characteristics, dataToSend ).then( response => {
        console.log( response );
        }).catch(error => {
        handleError( error );
        })

     

MetaSys Software has developed custom mobile solutions for clients who are in different sectors using React Native technology. For more information on our React Native app development projects – https://www.metasyssoftware.com/react

 

Six smart steps to configure Mapbox with ReactJS

Mapbox provides custom maps, search and navigation. It supports many platforms. The tool is powered by programmers as well as millions of devices providing Location Data. It provides developers a platform and a toolset to build customized applications where location-based data can be used to meet a variety of business requirements.
A typical scenario where Mapbox is used:
A service provider uses Mapbox to track locations of their assets or employees in order to provide real-time information to customers or for operational monitoring. This could be a restaurant delivery service, an international transport company or even a fleet operator in a city.
Customizing Mapbox
One of our clients provides data services to monitor the health of agricultural farms. They wished to offer compelling data visualization of agricultural farm images along with other details. We customized mapbox to render this information on the web and mobile devices. There are SDKs available for the Web, iOS and Android.
In this article, we share how we configured mapbox in React JS using custom style to add new fonts, custom icons and publish these styles.Following are the steps involved –
1. Steps to generate the token number and style in Mapbox

  • a. Create an account on https://account.mapbox.com
  • b. Log in to your account
  • c. On the Dashboard look for the Default public token. This Token number can be used for configuration in the Web App. You need to remember that this token number is public and easily accessible from the developer tab.
  • d. To get the private Token click on the button ‘Create a Token’ you will get a form. Enter the ‘Token name’ and select the desired ‘Public Scope’ and the ‘Secret Scopes’.
    Access tokens
  • e. Note: – This token will only be accessible from the specific URLs that we add while generating the Token.
    Create an access tokenToken Restrictions
  • f. Now add the list of comma-separated URLs into the URL field and click on the ‘Create Token’. Next you will be asked to confirm with your account password.
  • g. You will find the private token at the bottom of the Token list.
    Private token

2. Steps to configure React JS app with Mapbox

  • a. There are two different methods available for using the Mapbox on the web App.
    We describe the steps using the ‘npm’ module bundler for installing Mapbox GL JS.
    Method selection for installing Mapbox
  • b. Install the ‘npm’ package –> ‘npm install mapbox-gl –save’
  • c. Include the GL JS CSS file
  • d. Include the CSS file in theof your HTML file
    • i.<link href=’https://api.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css’ rel=’stylesheet’ />
  • e. Add the map to your Web App.
    • i. var mapboxgl = require(‘mapbox-gl/dist/mapbox-gl.js’);
    • ii. mapboxgl.accessToken = ‘Your Token number’;
    • iii. var map = new mapboxgl.Map({
    • iv. container: ‘YOUR_CONTAINER_ELEMENT_ID’,
    • v. style: ‘mapbox://styles/mapbox/streets-v11’ // Default style link
    • vi. });
  • f.  Now you are done with the configuration.

3. Steps to create the custom style of Mapbox

  • a.To create our custom style for the map, we need to open the Mapbox Studio,
  • b.To open the Mapbox studio, you can to go to the Dashboard and then click on the ‘Design in Mapbox Studio’ on the right side of the Dashboard or Just click on the link here https://studio.mapbox.com/
  • c.After opening the Mapbox studio, you can see the predefined styles you can use directly or you may choose to create a new style.Mapbox styles
  • d. To create a new style, click on the ‘New style’ button on top of the page.
  • e. Select the desired template from the list and can change the style of the map from bottom of the dialog and then click on the customize button.Templates
  • f. You can see a dashboard with different settings.
  • g. You can update the style of the country label, background, road, buildings and many moreUpdating styleicons

4. Steps to add a new font to the map and then publish for production

  • a. Click on the Fonts tab on the top-right corner then you can find a dialog to upload the new fonts.Upload fonts
  • b. Clicking on the Upload new font, you can see a new dialog with the title ‘Upload fonts’ here you can drag new fonts with extension ‘.TTF’ and ‘.OTF’.
    Upload new font
  • c. Once Font family is added, it can be then used in the map.
    icons

5. Steps to add a custom icon or an image and publish

  • a. The image we upload here will be available as an icon on the map for example Image as a custom marker.
  • b. Click on the ‘Images’ tab in the header you can see a dialog to upload the SVG image.
    Upload svgDrag and drop svg images
  • c. To upload the SVG image, click on the ‘Upload SVG Icon’ button, now you can see a new dialog where you can drag your SVG image.
  • d. Once you update any style, you have to publish the style to see the changes on the map.
  • e. Note: – It may take some time to get published and to reflect on the map.
  • f. It is very easy to publish the changes; you just have to click on the ‘Publish’ button on the top-right corner of the map box studio.
    Image
  • g. Now you can see a dialog with a slider where you can see the styles you added.
  • h. Here you can either ‘Publish as new’ which will replace all the styles, or, use the ‘Publish’ button to add the styles you added in your draft.
    Basic template

6. Steps to add the updated style to our map

  • a. Once the style is published,click on the ‘Share’ tab on the top-right corner of the Mapbox Studio. Here you can see a dialog where you can find your ‘Your style Url’ and ‘Your access token’.
    Share
  • b. Now update your style URL of the map.
    • i. var map = new mapboxgl.Map({
    • ii. style: ‘Add your style URL Here’
    • iii. });
  • c. Example:
    • i. const feature: feature = {
    • ii. id: 123,
    • iii. type: ‘Feature’,
    • iv. geometry: feature.geometry,
    • v. properties: {
      • 1. meta: feature.meta,
      • 2. icon: ‘square-stroke’
      • 3. // Custom Icon name which is added to the style in Mapbox Studio
    • vi. }
    • vii. }

We at MetaSys software have helped the clients in building such kind of custom software solutions. For more details – https://www.metasyssoftware.com/case-study-react