Android & React-Native Example

What is useMemo ? useMemo is a hook in react-native that will return the memorized value.  The most common advantage to use the useMemo is to optimize the performance of the react-native application. How it works? The useMemo will takes two arguments. In the first argument, you have to pass the function and in the second argument, you have to pass the array of dependencies.  useMemo will recompute the memorized values once one of the dependencies has changed. Whenever the state is changed in the react-native the component re-render itself. In react-native some-times, we have functions that have expensive calculations code. Once the state has updated the react-native component will call the render and the function will be called again and do the calculation even if the state has no effect on that method. Using useMemo we can resolve the above issue. Impact of useMemo in application performance Using useMemo you can avoid expensive calculations on every render, Which will help you to boo

Unit Testing In the past year, react-native become a very popular language for cross-platform application development. Unit testing means writing test cases to ensure that the individual component will work as expected. The Jest is the default testing library supported by the react-native. There are a couple of more libraries available for testing are  Detox , Appium , and  react-native-testing-library . Why unit testing is required? When we start thinking about unit testing one question in our mind comes is, Why we need to write the test cases?  So, there are some key benefits to write the unit testing for the application. The unit testing helps us to ensure that the individual component is working as expected. In the process of development, we have to integrate the new modules to the application and unit testing is helpful to ensure that the code is still working as expected after updating the new changes. This helps us to determine the small bugs in the code so it will not become a

What is useState? In react-native props and state are the data which are used to handle the component. The component will update itself as soon as the state changes its value.  useState is a hook that is used to define the state for the functional component. Using useState you can define the initial value for the state and update it later for the functional component. How to use useState? import React, {  useState } from 'react'; const [loading, setLoading] = useState(true);   The above is the syntax to define and used the hook in the functional component. We have defined the initial value is true for the above state. loading : The name of the state. setLoading : Method definition to update the value of the state later in the code. useState : Define the const to work as the state and pass the initial value to it. How to update the value for the useState? To update the state value you can see the setLoading method defined in the example. setLoading(false)    

What is useEffect :   In our application, we required to call network operations, subscription for the events, etc. The useEffect provides you a way to handle that operation using hooks. The useEffect is a combination of lifecycle methods of the react component and provides you a better way to handle those events. The useEffect is a combination of lifecycle methods  componentDidMount , componentDidUpdate , and componentWillUnmount . Now, let's start with how can we define and use the useEffect in react-native. Syntax of useEffect  To use the useEffect you required to import it from the react package. import React, { useState, useEffect } from 'react'; useEffect(()=>{ }) or   React.useEffect(()=>{ }) How useEffect works? The useEffect is called after every render.  After the first render takes the place the useEffect will be call and perform the operations. It will affect the performance of the application but we have some ways using which we can customize the call of

Component : The component is a very basic element of any react-native application. As we know a large application is divided into small segments and in react we know it as a component . This helps to make development fast and maintain the code very easily. The main advantage of the component is reusability which saved a lot of development time. There are lots of default components provided by the react it-self. You can also create your own component and use it. PureComponents : The pure component is also one time of component but it has some benefits over a component. The major difference between both is pure component does a shallow comparison on state change. Like when we change any value of any state present in the pure component then It first compares their values, but when comparing objects it compares only references. The re-render of the pure component will only call if the value of the state is changed and used in the pure component. Difference :  Component re-re

If you don’t know how to create dynamic feature module please visit this link . If you already have your module ready than we will check how to download the module in our application and use it. So let’s start :- First you have to add Android Play Core  library in your project : api "com.google.android.play:core:${versions.playcore}" After that sync project and add below line in your manifest file : <manifest xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:dist="http://schemas.android.com/apk/distribution"     package="com.google.android.samples.dynamicfeatures">     <dist:module dist:instant="true" />   <Application/> </manifest> Once you have done with your manifest file than you have to install splitCompact in your project. So for that you have to add the following code in your project Application class. class AppApplication : SplitCompatApplication(){     override f

Dynamic Delivery Feature :  This uses an Android app bundle to generate an android app as per user configurations. This user has the power to download only the part of resources that are used by user so that you can create a smaller and optimised version of your app. So first you have to create a new dynamic module in your project. To create a new dynamic module follow the below steps : 1. Select File > New > New Module from the menu bar. 2. In the Create New Module dialog, select Dynamic Feature Module and click Next . 3. After that, you have to give a Title for your module with a maximum character limit of 50 and select the type of module. The dialog gives you three types of the dynamic delivery feature : 1. Include module at install-time 2. Do not include modules at install-time. 3. Only include module at app install for devices with specified features Pick one as per your needs. In this example, we are using Option 2 and click on Finish. Once your module