College: Tier 3 (but in Top 3 in Karnataka) — graduated in 2020
Previous Role: SDE 1
YOE: ~1.5 years
Last working day: 31-03-2021 (Left the job to take care of a personal tragedy due to COVID-19)
Previous Compensation: 13.22L
Interview was scheduled by: A recruiter called me after seeing my profile on Naukri.
Expected Compensation: 30L (Have researched and found that this is not too much considering that 10L is ESOPs over 4 years)

After getting to know that there was a job opening there, I contacted the HR of Cars24 directly. I could do that because I had interviewed there a few months back, when the Cars24's HR had contacted me through Naukri.

NOTE: This is for React Native SDE 1 role
Since I have not seen a lot of Frontend experiences, especially for RN roles, I wanted to add this here, so that it could help someone doing React Native.

Interview Process

Round 1 — (~30m)

1. Initial Introduction of Interviewer and Interviewee (Me)

2. Started with var / let / const. Their differences and when to use which one.

3. Hoisting: Different cases (what happens when you use two different ways of declaring function. i.e., function() { ... } type and () => { ... } arrow function type).

4. Closures: Definition, Any example where you have used it.

He gave a problem to solve on my laptop (For Cars24, they ask you to bring your laptop with you while coming to interview).

Q. I was supposed to add all the numbers in a deeply nested object. Below is the actual code I wrote that day (Since I coded on my own laptop).

let data = {
	a: {
		a: 'a',
		b: 1,
	},
	b: {
		b: 1,
	},
	c: {
		c: {
			e: 'e',
			b: {
				c: 'c',
				a: 1
			}
		}
	}
}

// This was my solution
let sum = 0
const sumCalcFunc = (obj) => {
	for(const val in obj) {
		if(typeof obj[val] === 'number') {
			sum += obj[val]
		} else if(typeof obj[val] === 'object') {
			sumCalcFunc(obj[val])
		}
	}
	return sum
}

console.log(sumCalcFunc(data))

Obviously, it could be improved and more cases handled. I didn't take into account the fact that null can also be object. Also I have not handled the cases where there is an array of numbers.

I don't think the interviewer was seeing if I can handle all the cases. Since this was the first round he wanted to see if I could actually code something that involves recursion and my understanding of the most important data type in JS (i.e., Object).

Then he asked me about debounce and throttle functions (Not implementation, but its concept). I answered it as it was a well known REACT Interview question.

He asked my about Class based and Function based components. Their differences and how can we simulate Lifecycle methods of Class based components using Function based components.

He asked me about the Context API — How to use it and what are the places where it can be used (These are expected questions to follow). But then he asked a rather weird question of whether Context API is only used as a solution to Prop drilling or is there any other function to it ? (Honestly, I still don't have answer to it till date, I even asked about it after the second interview was over, with the second interviewer. He told me that it could be a test of how much you know of Context API, where the interviewer 1 could have deliberately asked a seemingly weird question. I didn't know that interviewers actually try to bluff and confuse to see if we actually know stuff. I had just answered it as, "I have only used Context API as a solution to Prop-drilling, if it has any other advantage / problem that it solves, I don't know about it")

He asked me if I had used Redux. I said Yes. So he asked me to tell about the data flow in Redux. It is a standard question of Redux (Dispatching an action, Reducers used to update the store, and store as a single source of Truth, selectors to get some data from the current state of the store, and so on).

While we were on the topic of Redux, I mentioned to him that I have used Redux-Toolkit and not the original Redux (NOTE: Redux maintainers themselves recommend to go with Redux-Toolkit).

He asked me about the difference between useRef and useState (another standard question).

He, then, moved on to React Native.

1. He asked me about the differences b/w ScrollView and FlatList. (If you have any idea of the RN Interviews you will know that this is a very standard question, so I was prepared).

2. He asked me about the FlatList optimization strategies.

There were some more questions I am not able to remember right now. I will update this post as soon as I remember them.

In any case remember that the first round will always be to check if you know JS and React Basics. Anything that are fundamental to your work, would be asked. So just be thorough on all of the JS Datatypes (numbers, Arrays, Objects, Strings, etc) and their related methods.

I was told that I was selected in about 10 mins after the interview. So I had to wait at the office for my turn, for the second round (waited for ~3 hrs! They gave Lunch in between).

Round 2 — (~45m)

This round started with the Interviewer asking me to take my laptop and navigate to codesandbox. Then I had to share my screen so we used Google Meet. This was the MACHINE CODING ROUND. I realised it when he asked me to take my laptop right at the beginning.

I was asked to display the Name of the user and fetch new users on click of a button, whose fetch logic should be in a custom hook. It was from the famous API: https://randomuser.me/api/. I'm using the term "famous", because I have seen it being used my many YouTubers. But that was after the Interview. During the interview, I wasted some time in displaying the name, not seeing properly that it was an object (accessed using userDetails.name).

I was able to write it eventually. This is my exact code that I wrote on that day (Again, since it was on codesandbox and it was on my own laptop, you can see the exact version. But to show you here, I have put the code together separated by Comment that shows the file name).

// src/customHooks/useData.js

// Yes, I created a separate customHooks folder. I think it adds points to code quality, if they are judging that.

import { useState } from "react";

const UseData = () => {
  const [data, setData] = useState([]);

  const updateData = async () => {
    const datJSON = await fetch("https://randomuser.me/api/");
    const newData = await datJSON.json();
    const newArray = [...data, newData.results[0]];
    setData(newArray);
  };
  return [data, updateData];
};

export default UseData;

// --------------------


// --------------------
// src/App.js

import React, { useEffect, useRef, useState } from "react";
import {
  FlatList,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from "react-native";

import useData from "./customHooks/useData";

function App() {
  const [data, updateData] = useData();

  const onPress = () => {
    updateData();
  };

  return (
    <View>
      <TouchableOpacity onPress={onPress}>
        <Text>{"Get Data"}</Text>
      </TouchableOpacity>
      {data?.length && (
        <FlatList
          data={data}
          keyExtractor={(item) => `${item.name.first}${item.name.last}`}
          renderItem={({ item }) => (
            <View>
              <Text>{`${item.name.first} ${item.name.last}`}</Text>
            </View>
          )}
        />
      )}
    </View>
  );
}

He asked me to update the list in such a way that users are appended to the beginning of the list and not the end as shown in the above code.

It was easy fix. Just update the updateData function of the useData custom hook, to have the newData.results[0] be at the beginning of the newArray. Basically update the value of newArray as const newArray = [newData.results[0], ...data]. And that was it for the randomuser API.

Next he asked me to create a simple TextInput component and a button. On clicking that button, the focus should change to the TextInput. This was easy, I think he wanted to see if I knew about useRef, which I did, so it was a breeze.

Next he asked me to implement a Countdown timer, which should stop at zero. It should reset the timer, if user clicks on the button again (Meaning the user can override the timer. Say the timer is set for 10s. It is at 4s now, and the user clicks on the button, it should reset to 10s and start the timer again).

This was my code after some iterations of mistakes and timer going less than 0. Yeah, the interviewer was really helpful when I was stuck in that mess. He didn't directly tell me what was the issue. But asked the questions in such a way that I could figure out what he was hinting at, and I corrected those.

(Added the comments afterwards, obviously!)

import React, { useEffect, useState } from "react"
import { Text, TouchableOpacity, View } from "react-native"

let intervalId = null  // Very important to declare it outside the component

function App() {
	const [counter, setCounter] = useState(5)  // To test, I had taken 5s timer

	// This useEffect was the key to solve `going below 0` problem.
	useEffect(() => {
		if (counter === 0 && intervalId !== null) {
			clearInterval(intervalId)
		}
	}, [counter])

	// The actual Business Logic is this function.
	const startTimer = () => {
		const startTimerBlock = () => {
			const timerId = setInterval(() => {
				setCounter((c) => c - 1)
			}, 1000)
			intervalId = timerId
		}

		if (!intervalId) {
			startTimerBlock()
		} else {
			clearInterval(intervalId)
			intervalId = null
			setCounter(5)
			startTimerBlock()
		}
	}

	return (
		<View>
			<TouchableOpacity onPress={startTimer}>
				<Text>Start Timer</Text>
			</TouchableOpacity>
			<Text>{counter}</Text>
		</View>
	)
}

export default App

After this he asked me about EventEmitters. I had no idea about it then. So I told him so. He asked me about Event Capturing and Bubbling. Again told him I had no idea.

After these he asked some questions in JS basics, again. It was similar to the questions in first round (Not very difficult).

He then asked me how I debugged for errors in Production in my previous company i.e., the tool used to catch errors in Prod. I told him about that of whatever I could remember (It was 2.5 years ago, so couldn't remember it properly). This is just to see if you have any idea of debugging in Prod Env.

(Don't sweat if you have no experience in Debugging in Prod. Just admit you have not done it. But I would still ask you to know what your team uses, even if you don't directly use it.)

After these questions there was a brief pause when he was mumbling to himself "What do I ask you next", looking at his laptop. I took that pause to my advantage and went on a monologue of sorts, explaining how much I had worked in the last two months. Showed him my GH Profile (Heat map was lit in the last 2 months!!), two websites and two apps I had done (They were very basic apps). So I think he stopped searching for questions and was satisfied with the interview, so he said he didn't have any other questions (after my monologue), and that I could leave.

I thanked him and that was it. After 5-10 mins the HR comes and says that I was selected and wanted to wait some more time since another interviewee was getting interviewed by the Manager. I went out for sometime and the HR called me to tell that my meeting was fixed the next day in the morning.

Round 3 — (~1h)

So at 10:30AM the call started. Introduction happened.

He asked me to build a Password Strength Meter (in Codesandbox's React Native template), with any 5 criteria of my choice and that we could keep the option open for adding animations to it.

I knew about this Manager from a person who had interviewed there before and was rejected as he was asked very deep animation related questions. As soon as I heard of this "Animation" term, I couldn't think properly. I was telling myself, "You won't get it" while on the call with him.

After that he moved on to ask some question regarding KeyboardAvoidingView. He wanted to know what exactly happens when the view is behind the Keyboard. I didn't know about that then. Frankly I couldn't find the answer to it even now (If you know it, let me know in the comments).

Then he asked about some other random JS related thing. I can't remember it. As I said, I had already given up in my mind.

He said after asking some more small questions, "I think I have what I need to know. Do you have any questions for me ?".

I had some questions written to ask him, like what was the most challenging app you have built, etc. I asked about that. I took some advice from him about my performance. He told me to subscribe to JS discord channels, and read up blog posts and articles in the Mobile space.

He was very professional throughout. I had an experience that I will remember for many years.

Some Reflections:

1. I had made significant improvements in the JS and React / RN Basics.
2. I was confident in my answers (Atleast in the first two interviews).
3. I knew the way to crack the Technical interviews for RN FE roles (I'm not saying I know everything that they had asked, but the required skills were thorough).
4. I shouldn't have created this artificial fear in my head about the Manager.
5. I did the problem later in my leisure time, it was so easy that I could do it in 10 mins. The actual time he had alotted was 20 mins in the interview for this challenge (but that also included any other improvements he could've asked).
6. Know the basics of Animations in React Native (It is actually Animated Component in the RN docs). This is just to have some sanity in the interview, as I was not at all in my normal mindspace when I heard the animations term.
7. So don't lose your cool, and don't take any advice too seriously. Trust yourself and ace the interview.

All the best! I hope you are selected. Let me know!

I would suggest the following sources (Based on the request of some commentors):

1. JS Basics

   1. Codevolution YT Channel has playlists on Node.js that has around 60+ videos. It is essential I think.

   2. Dave Ceddia's Blog — He has a lot of posts there

   3. MDN JavaScript page and MDN in general. Read up on Arrays, Strings and Objects from MDN thoroughly.

2. React related

   1. React Docs

   2. Codevolution's React Playlist

   3. Read up on all the Hooks from docs (At least these are a must read: useState, useCallback, useMemo, useEffect and importantly useRef, useContext)

   4. Read the React APIs like lazy, memo, forwardRef. They are used in conjunction with hooks. You can read it from the docs to understand why.

   5. Context API

3. React Native related

   1. React Native Docs — This has all the things needed for RN.

   2. Animation related videos see Catalin Miron's YT Channel. He has a lot of videos related to FlatLists. You don't need to by-heart the code. Just hearing the terms that he uses will make you familiar, if the questions are asked in Interviews.

   3. Codevolution has started a playlist recently, But I didn't see from there. Mentioning here, thinking it will help someone in the future.