React Native and Flutter are currently competing with each other to become the leading product, and although both have their advantages, it is not yet clear which one will come out on top. This article compares the technologies by examining their features, and their respective advantages and disadvantages. We hope this can help you in choosing which technology to use for your application.

Before looking at the technical differences, let us briefly have a look at their positions in the market so far. In order to do this, we can use Google trends to look at the interest in the technologies since 2015, when React Native was launched.

The trend shows that both technologies have been gaining popularity steadily, and that although React Native is much older, Flutter is catching up quickly.

About Flutter

• Flutter is a free, open-source portable UI toolkit for creating web, desktop, and natively compiled mobile apps in a single codebase.
• It was created by Google in 2017.
• It uses a language named Dart.

 About React Native

• React Native is also a free, open-source mobile application framework.
• It enables the developers to use its parent framework React with the native platform.
• React was created by Facebook in March 2015.
• React Native is virtually identical to React.

Head to head comparison between Flutter and React Native

Let’s list a few of the major advantages and disadvantages of each technology.

Flutter

Advantages:

• Fast apps
• User-friendly design
• Perfect for MVC structure

Disadvantages:

• Large Apps can be difficult to program
• Limited libraries in comparison with React Native
• Currently small developer community (though growing)

React Native

Advantages:

• Active large community
• Uses widely popular JavaScript language
• Robust Performance
• Easy to learn

Disadvantages:

• Lots of abandoned libraries and packages
• App size is bigger than Natively developed Apps
• Fewer testing features compared to Flutter

Which technology should we choose in 2020?

React Native has a huge base of achievements to showcase its success in the market, compared to the new player. However, Flutter has a lot of potential and as of now there is a chance that it can become the leading technology for cross platform mobile app development and web applications. We hope that this article has highlighted some of the key differences and can help you choose the best technology for your app development.

Happy Coding…

React Hooks are functions that allow you to hook into React lifecycle and state features. They primarily serve as an alternative for classes. They can help in keeping your components clean and perform better. Hooks are a recent  addition in React version 16.8.0.

In this article, we are going to show you how to convert a React class into a functional component using the useState Hook.

Hooks don’t work inside classes because they let you use React without classes. We will use the built-in hooks instead of React lifecycle methods. Eg. useState, useEffect, useRef etc.

We are covering useState, useEffect, useRef React hooks in this article. useState() is used to replace the constructor functions and state declarations. While useEffect() is used to replace componentDidMount() and componentDidUpdate(). You can use useEffect as many times as you need to in single component. And the last one, useRef has another cool usage besides DOM refs, it is also a generic container whose current property is mutable, it also can hold any value similar to an instance property of a class.

Steps to convert a React class component into a functional component using React Hooks –

Step 1. Change ‘class ComponentName extends Component’ With ‘function ComponentName(props)‘

Step 2. Remove “this.” And “this.state” from the entire component.

Step 3. import React, { useState } from ‘react’

Step 4. Remove the constructor. Add its logic as shown above in the image for initializing the state variables with the help of useState hook.

Let’s understand conversion into useState, useEffect and useRef with examples –

• useState() Hook –

The parameter of the useState hook is the initial value of the state. This hook provides the array with two values – the first is the name of the state and the second is the function name which updates the value of that state.

Eg.

const [num, setNum] = useState(0); //declaration

setNum(10) //use

Here num is the state name, setCount is the function that you can use anywhere in the component to update that state.

Here are some examples of setting or initializing state variables for different data types –

//Set an Integer

const [num, setNum] = useState(0);

setNum(10);

//Set a String

const [name, setUsername] = useState(‘John’);

setUsername(‘Smith’);

//Set a Boolean

const [isValid, setIsValid] = useState(false);

setIsValid(true);

//Set and Array

const [items, setItems] = useState([]);

setItems([0,1,2,3,4]);

setItems([{id:0, color:”red”},{id:1, color:”green”},{id:2, color:”blue”}]);

//Set and Object

const [form, setValues] = useState({

id: 0,

firstName: ‘’,

lastName: ‘’,

subscribe: false

})

setValues({

…form,

firstName: ‘Jamie’,

subscribe: true

})

• Replace lifecycle methods (compentDidMount, componentWillUnmount,

 componentWillReceiveProps, componentDidUpdate) with useEffect

e.g.

const [items, setItems] = useState([]);

const [num, setNum] = useState(0);

1. compentDidMount

useEffect(()=>{

setItems(items);

}, [])   // Here empty array indicates don’t look for any updates

b.componentWillUnmount

useEffect(()=>{

return () => {console.log(‘unmounting the component’)}

},[])

c. componentDidUpdate/componentWillReceiveProps

This will get executed when your ‘num’ state variable and ‘id’ props will get updated.

useEffect(()=>{

if (!isEmpty(num))

{

console.log(‘num changed = ’,num);

setItems(items);

}

if(!isEmpty(props.id))

{

console.log(‘props.id changed = ’,props.id);

}

},[num, props.id])

• Use of useRef

const [num, setNum] = useState(0);

const prevNumRef = useRef();

useEffect(()=>{

prevNumRef.current = num;

})

const prevNum = prevNumRef.current;

return <h1>Current value : {num}, previous value = {prevNum}</h1>

Advantages

1.With React hooks, the component will be cleaner and easier to read (fewer lines of code). Hooks are easier to work with and to test.

2.It is easy to make code reusable. They don’t create another element in DOM like HOCs in React do.

3. useState – it allows to update different states with specific functions. The ability to move the state update logic as a separate hook.

Disadvantages

1.useEffect hook allows to merge three lifecycle methods such as componentDidMount, componentWillUnmount and componentDidUpdate into one and the issue with useEffect is the second parameters ,i.e. the array that we need to pass to define this behaviour. It is not explicit enough.

2.React Hooks are new additions to React. So to convert and test a complex class can be a time-consuming task initially .

3.Since it is relatively a new addition it may not be compatible with all third party libraries. But this is rapidly changing .

This is all about React Hooks in a nutshell. If you are looking to build any a mobile or web application using React technology, then please contact us.

Happy coding!

Native App

A Native application is a software programme developed for a particular operating system. This application can be developed using Java or Kotlin for Android and Objective-C or Swift for iOS and C# for Windows.

1. High performance – Native apps run much faster than hybrid apps because they are fully supported by the OS on the device.
2. Better UX/UI – User experience is much better because the higher performance allows everything to run smoothly. Depending on the business need, you can develop device-specific features directly within a Native app.
3.  Interactive – Native mobile apps run more smoothly in comparison to hybrid apps. The interaction with the user is intuitive and natural as they have specific UI standards for each platform.

The major disadvantage of Native apps, is that they work only for one OS, leading to extra development time, and cost in building apps for multiple platforms.

React Native

React Native is an open-source JavaScript framework for building iOS and Android apps. It is famous for its lightweight framework for mobile app development.

1. Faster development across multiple platforms – React Native allows sharing of the entire codebase between operating systems (Android and iOS). Once you develop an application for Android, you can compile it on iOS and vice versa. This results in a  significant saving in the development effort as compared to developing natively on both Android and iOS platforms.
2. It gives a Native app feel – With React Native, most of the features can be developed as a Native feature. This means that the user experience is the same as a Native app, despite the fact that hybrid technology has been used.
3. Large Community of Developers – React Native is a popular open-source JavaScript framework, with a well developed community. This means that queries are generally answered quickly on websites such as StackOverflow and GitHub. Furthermore, many helpful libraries created by other developers are freely available for download.
4. Easy and Live Reloading – When using React Native, code changes are immediately reflected on the simulator and can be tested instantly. By eliminating the need to recompile after every change, a lot of development time is saved.
5. Cost reduction and Code reuse – With React Native technology, more than 80% of the code can be reused between the Android and iOS platforms, saving a huge amount of development time and cost.

We found that React Native is a superior method that results in major time saving for mobile app development for multiple platforms. Two examples from our experience with React Native are:

1. App with SQLLite for multiple platforms
2. App with Bluetooth connectivity feature for multiple platforms

The reason we opted for React Native for these apps, is that in both cases the same business logic layer was required to create two Native apps. Our team successfully built a common business logic layer and UI for both the platforms. We saved significant time and cost due to the reusability of the code. Future maintenance will also be cost-effective. Furthermore, we found that Bluetooth and SQLLite features work efficiently in React Native even though they are not Native based.

MetaSys Software has developed custom solutions for clients who are in different sectors using React technology. For more info https://www.metasyssoftware.com/react