All rights are reserved by Niteesh Kumar.. Theme images by Storman. Powered by Blogger.


Total Pageviews

Blog Archive


Featured Posts

Thursday, 16 December 2021

React hooks interview Questions

- No comments

What are React hooks?

Before hooks class based components were being used for state or lifecycle methods. 

Hooks are functions which allows you to hook state and lifecycle methods to Functional components.

Why React  hooks?

  • It's a different way of doing the same thing we do with class based component.
  • Code is much simpler here.
  • no more lifecycle methods.
  • We can use useSelector and useDispatch instead of mapStateToProps and mapDispatchToProps.

Rules of React Hooks?
  • Call hooks at top level.
  • don't call hooks inside loops, Conditins or nested functions.
  • Call React hooks from React component , other hooks not from the normal function

Map lifecycle methods Class to hooks lifecycle?

  • Initial Render

  • Update


    //custom hook to hold the previous state. 
  • Unmount
       useEffect(()=>{return function(){}})

How to upgrade Class to functional Components?

Update React and React-dom version.
update one route at a time.

How to debug hooks?

 use Console.log, console.debug, useDebugValue, Chrome debugger.

Wednesday, 15 December 2021

How to avoid unnecessary re-renders of static child component in React

- No comments
When we renders multiple child component inside a Parent component in a functional react component. So whenever Parent component will re-render it will also re-render child components as well. 

Re-rendering of child components in each and every parent render will cause the performance issues in our application. We will see how can we avoid these unnecessary re-renders below.

Let's take an example - 


import { useEffect, useState } from "react";
import Child from "./Child";
import "./styles.css";

export default function App() {
const [num, setNum] = useState(0);
useEffect(() => {
setNum((num) => num + 1);
}, []);
return (
<div className="App">
<Child />


import React from "react";

const Child = () => {
return <h1>test</h1>;

export default Child;

So let's see what is happening here.

We have a parent component (App.js). Where we are rendering Child.js (our child component). So when we will run this application It will render once and useEffect hook will execute and it will sets the state of the component. That will cause another re-render. 
With both the re-renders Child component will also re-renders twice. 

To see that we can see the console will be logged twice.

To avoid this behavior we need to wrap up our child component inside React.memo

So our new Child Component will look like this now - 

import React from "react";

const Child = React.memo(() => {
return <h1>test</h1>;

export default Child;

Visit the below link for the live demo.

Wednesday, 25 November 2020

Program to implement Scan line Algorithm

- No comments

Scan line Algorithm 

  • The scan line algorithm is an alternative to the seed fill algorithm. 
  • It does not require scan conversion of the edges before filling the polygons 
  • It can be applied simultaneously to a set of polygons rather than filling each polygon individually.
We also call it Scan line polygon fill algorithm as it is used to generate polygons.

Algorithm for Scan line C++ code- 

Step1: Start algorithm

Step2: Initialize the desired data structure

  1. Create a polygon table having color, edge pointers, coefficients
  2. Establish edge table contains information regarding, the endpoint of edges, pointer to polygon, inverse slope.
  3. Create Active edge list. This will be sorted in increasing order of x.
  4. Create a flag F. It will have two values either on or off.

Step3: Perform the following steps for all scan lines

  1. Enter values in Active edge list (AEL) in sorted order using y as value
  2. Scan until the flag, i.e. F is on using a background color
  3. When one polygon flag is on, and this is for surface S1enter color intensity as I1into refresh buffer
  4. When two or image surface flag are on, sort the surfaces according to depth and use intensity value Sn for the nth surface. This surface will have least z depth value
  5. Use the concept of coherence for remaining planes.

Step4: Stop Algorithm

Scan line algorithm c++ code - 



using namespace std;

int main()


int n,x[10],y[10],k=0,ymin=1000000,ymax=0,Y,dx,dy,xi[100],gm,gd,temp;

float slope[100];

printf("Enter the number of vertices:");


printf("enter the coordinates of vertices:");

for(int i=0;i<n;i++)









initgraph(&gd,&gm," ");


//draw polygon using all the edges

for(int i=0;i<n;i++)





for(int i=0;i<n;i++)






if(dx!=0 && dy!=0)



for(int j=0;j<=ymax;j++)


int k=0;

for(int i=0;i<n;i++){

if(((y[i]<=j) && (y[i+1]>j)) || ((y[i]>j) && (y[i+1]<=j))){





for(int m=0;m<k-1;m++){

for(int i=0;i<k-1;i++){








for(int i=0;i<k;i+=2){





return 0;


Enter the number of vertices: 5
enter the coordinates of vertices:
30 30
30 150
120 60
120 120
210 30

scan line polygon filling

Thursday, 19 November 2020

React-Native static images not loading in iOS - Xcode 12


Static images are not loading in React-Native iOS Application when working with React-Native version 0.60 and above and Xcode 12. This is because of some changes in Image component of React-Native latest version.

To resolve the issue of React-Native image not loading please follow the below steps - 

  • Copy and paste below code to the end of your Podfile - 

pre_install do |installer|
puts("Image fix for ios14: remove this when upgradeing to >= 0.63.3")
find = "_currentFrame.CGImage;"
replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];"
op = `sed -ie "s/#{find}/#{replace}/"
puts("Image fix for ios14 done")

  • Go to the project directory and run below commands -

     cd ios && pod install

  • Run your application and you will see it's working. 

Monday, 9 November 2020

Undefined is not an object (evaluating 'Component.propsType') - React-Native 0.61.5

- 1 comment

 While working with React-Native Android Application sometimes we face this issue saying - 

Undefined is not an object (evaluating 'Component.propsType').

This issue generally occurs when our npm package versions get altered somehow. 

I have faced this error while trying to optimize my package.json. I have tried a lot of option cleaning Build folder, Resetting cache etc. but nothing worked.

Here are the few steps to resolve the error Undefined is not an object (evaluating 'Component.propsType').

  1. Make Sure you Reverse all your changes made in your package.json file.
  2. Delete node_modules folder inside your react-native application code
  3. Delete package-lock.json file
  4. Go To Android Studio/Build/Clean and clean the project build
  5. After that do npm install in your react-native project directory
  6. Run npm start --reset-cache to reset bundler cache
  7. After that run react-native run-android 
  8. It will start working now

Wednesday, 4 November 2020

Turbo C uses and drawbacks

- 1 comment

 Turbo C is basically a software tool that is used to compile and run C language programs.

Turbo C Uses - 

  1. As an editor for C language coding
  2. To compile and run C programs
  3. Can be used to write Assembly language code inside C program without any separate compilers
  4. Can optimize size of a executable program or fast execution for the same

Turbo C Drawbacks - 

  1. Executable program produce by Turbo C does not run on operating system other than MS-DOS.
  2. It only compiles C programs
  3. Turbo C can not be used to develop real world Applications
  4. Turbo C does not support dynamic loadable modules
  5. Turbo C does not have a good debugger
  6. Memory limitation - Program can only use 64kb of memory that is not sufficient.
  7. No Straightforward way for Network programming.

Although there can be more used or drawback of Turbo C. I have mentioned few of them here.

Monday, 2 November 2020

How to check whether port number is already in use or not?


How to check whether port number is in use or not?

Sometimes we get the "PORT xxxx is already in use" error when trying to run an application. We also face this issue sometimes when while trying to access the any particular PORT number.

To check whether any particular port number is in use or not follow the  steps given below - 

  • Open "Terminal"
  • Type Below Command in Terminal window -     

     netstat -vanp tcp | grep 3000 // Replace 3000 with PORT Number

  • Replace 3000 with your PORT Number 
  • Click "Enter" and you will see the results in the screen.

Now if you want to make this port idle or available to use you just need to find the "PID" that will be there in the result of above command. 

After finding the "PID" of the process using this port number run the below command - 

kill "pid_value"

After running this command if you will run the command to search the port number you will see empty result.

Sunday, 1 November 2020

Multithreading C++ code

- No comments

Multithreading in C++ - 

In Operating system, Multithreading provides the capability to process multiple threads at the same time by a CPU rather than processing multiple processes. 

Examples of Multithreading - 

  • Spelling checker and Grammar checker in Microsoft word at the same time

Below is c++ implementation of multithreading.

Here we are multiplying two matrices using multithreading - 

C++ code for Multithreading -

#define pf printf
#define sf scanf
int m1[100][100],m2[100][100],i,j,k,res[100][100],r,c,sum;
void *input(void *arg)
pf("enter the size of matrix m1(row*col):\n");
printf("enter the matrix elements:\n");
pf("enter the size of matrix m2(row*col):\n");
printf("enter the matrix elements:\n");
void *multiplication(void *arg)
void *print(void *arg)
pf("Resultant Matrix:\n");
pf("%d ",res[i][j]);
int main()
pthread_t p[3];
return 0;

Wednesday, 28 October 2020

How to clone single branch from a repository git?

- No comments

git clone -b <<---Branch Name-->> --single-branch <<----origin Endpoint----->>>

GitHub is most popular when it comes to collaborative work on code. It is widely used by corporate organizations as well as individual developers.

How to clone single branch from a repository git?
Source -

How to clone single branch?

Suppose there are multiple branches of a repository and you want to clone only single branch out of that repository.

You can use the below command for the same - 

git clone -b <<---Branch Name-->> --single-branch <<----origin Endpoint----->>>

Saturday, 18 April 2020

OAM authentication not wroking in react native iOS (Unable to open URL in iOS)

- 1 comment
If you  using "react-native-webview": "^9.1.0" in your application and trying to implement OAM authentication in your react native application it will show error saying Unable to open URL in iOS. 

The problem is with react-native-webview version. I was facing the same problem and resolved the unable to open URL issue in iOS by downgrading the react-native-webview version to 8.0.6.

"react-native-webview": "8.0.6",

Monday, 13 January 2020

spawnsync ./gradlew eacces react native

- No comments
This is a permission issue mostly occurs while running on macOS.

You can resole this error -  spawnsync ./gradlew eacces react native by giving permission to the gradlew directory-

Go to the project directory and run below command-

chmod 755 android/gradlew

Tuesday, 13 August 2019

React Native Orientation not working iOS


While developing React Native Mobile Applications we often face challenges regarding device orientation. Common issues that we face are - 

  1. Get device Orientation
  2. Lock application to portrait mode 
  3. Lock application to landscape 
  4. Lock application to portrait mode and enable landscape mode for some screens only

for all those requirements listed above, we use the react-native-orientation library.

To setup the library follow the steps given in the documentation of react-native-orientation. follow the URL given below-

While setting up the library keep this thing in mind that in case of iOS linking the documentation says that you have to add following lines in AppDeligate.m file - 

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { while ([[UIDevice currentDevice] isGeneratingDeviceOrientationNotifications]) {< [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications]; } return [Orientation getOrientation];

What I have noticed is that after making this change we will see some issues in iOS. Such that - 
  1. OrientaionListener is not working after lockToPortrait() or lockToLandscape() or UnlockAllOrientation()
  2. lockToPortrait() or lockToLandscape() or UnlockAllOrientation() are not working
  3. The device is not coming back to portrait mode after switching to landscape mode
  4. The device is not coming back to landscape mode after switching to portrait mode
To fix all those issues we need to make the below change. Instead of adding the lines sown above you only have to add the lines below-

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { return [Orientation getOrientation];

Because while loop in this creating problem and because of this some times orientation listeners are not getting triggered. 

Wednesday, 8 May 2019

React Native Push Notification Android & iOS


Today We are going to discuss How to set up React Native Push Notification with react native for both Android and iOS. There are multiple packages available to implement the same. for example-

  1. react-native-firebase
  2. react-native-push-notification
  3. react-native-fcm
I have tried all three packages mentioned above. But today I am going to discuss react-native-push-notification as after trying all three of them I found this on more convenient to use.

First We will discuss how to setup react-native-push-notification for Android & iOS in your react native project.


Step by Step Guide to Set Up React Native Push Notification-  

1 - First of all, install react native push notification package in your react native project. Use the command given below -

npm install --save react-native-push-notification For iOS you can also use - yarn add react-native-push-notification

2 - If you will go through react native push notification official documentation you will see react-native link react-native-push-notification. But this will not link the package completely and you may face some problem. So it's we should link manually.

React Native Push Notification Android Manual Linking -

1 - Go at android/app/build.gradle and add the following dependencies - 

dependencies { ...... implementation project(':react-native-push-notification') implementation ('') ...... }

You can use a specific gcm-play-service version and change the version number 8.1.0 for your version. In some cases, you may see an error like gcm-play-service version is 16.1.0 at run time but it is getting 8.1.0 at compile time.
So, in that case, change the version number from 8.1.0 to 16.1.0.

2 -  Now go to your android/app/src/AndroidMenifest.xml file and add the following changes - 

Just below uses-permission add the following lines -

<uses-permission android:name="android.permission.WAKE_LOCK" /> <permission android:name="${applicationId}.permission.C2D_MESSAGE" android:protectionLevel="signature" /> <uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

and just before closing application tag add the lines given below-

<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="YOUR NOTIFICATION CHANNEL NAME"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="YOUR NOTIFICATION CHANNEL DESCRIPTION"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white"/> <receiver android:name="" android:exported="true" android:permission="" > <intent-filter> <action android:name="" /> <category android:name="${applicationId}" /> </intent-filter> </receiver> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" /> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> </intent-filter> </receiver> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationRegistrationService"/> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm" android:exported="false" > <intent-filter> <action android:name="" /> </intent-filter> </service> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="" /> </intent-filter> </service>

NOTE -  Replace ${applicationId} with the application ID that you are using in firebase application. As your application id should be same both in the firebase application that you have created for the push notification and the project you are working in. 

Go to your android/app/build.gradle file and you will find applicationId in defaultconfig

3 - Now go to your file inside android/src/main/java... and do the following steps - 

Add the line below in the imports of your  -

import com.dieam.reactnativepushnotification.ReactNativePushNotificationPackage;

Add the following line inside the implementation of MainApplication - 

@Override protected List<ReactPackage> getPackages() { return Arrays.<reactpackage>asList( new MainReactPackage(), new ReactNativePushNotificationPackage(), //Add This Line

4 -  Go to your settings.gradle file and add the following line on the bottom of the file - 

include ':react-native-push-notification' project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')

Now you are done with linking react-native-push-notification package for Android.

React Native Push Notification iOS Manual Linking -

For iOS, we will be using PushNotificationIOS library that is provided by react-native itself. To use this you need to link the PushNotificationIOS library from X-Code to your project. Follow the URL given below to manually link this library with your react native project-

After Successfully linking this library follow the steps given below for further set up of iOS push notification set up -
1 - To enable the support for push notification and register event you need to make some changes in your AppDeligate.

Add the below line on the top of your Appdelegate.m file -  

#import <React/RCTPushNotificationManager.h>
2 - After this add the blow lines in your AppDelegate Implementation just above @end

// Required to register for notifications - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings { [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; } // Required for the register event. - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; } // Required for the notification event. You must call the completion //handler after handling the remote notification. - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler { [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler]; } // Required for the registrationError event. - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error { [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error]; } // Required for the localNotification event. - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification { [RCTPushNotificationManager didReceiveLocalNotification:notification]; }

Now for iOS we are done setting up react native push notification.