Interview Experience with FanCode for a React Native Developer Role

Over the last few months, I’ve been preparing for React Native developer positions and recently had the opportunity to interview with FanCode. The process was intense, insightful, and filled with learning moments. I want to share my experience to help others prepare for similar roles.

Interview Rounds

1. Online Assessment (1 hr & 15 mins)
2. Problem Solving (60 mins)
3. Platform Round (60 mins)
4. Design Round (60 mins)

Once you clear all rounds, there will be 2 more rounds of interviews with engineering leadership, mainly to test for cultural fitment.

Round 1: Online Assessment

This round included three different programming questions, and I was given 1 hour and 15 minutes to complete them. The questions I encountered were:

1. Limit Promise Concurrency: Implement a function that dynamically manages the concurrency limit while processing multiple promises.
2. Remove Circular Dependency: Write a function to remove circular dependencies from a given object.
3. Polyfill for setAllTimeout and clearAllTimeout: Implement a polyfill for both these functions.

I was able to complete all three questions. However, for the second problem (removing circular dependencies), some test cases failed as I could not handle certain edge cases. Despite this, I scored enough to advance to the next round.

Round 2: Problem Solving

This round focused on testing JavaScript proficiency by requiring the implementation of three polyfills. Candidates had 60 minutes to write working, executable solutions for the provided tasks.

The questions I encountered were:

1. Flatten Array by Level: Write a polyfill to flatten an array to a specified depth. For example:

flatten([1, [2, [3, [4]]]], 2);
// Output: [1, 2, 3, [4]]

1. SetInterval and ClearInterval: Implement polyfills for the setInterval and clearInterval methods, mimicking their behaviour using setTimeout.
2. Promise.allSettled Method: Write a polyfill for Promise.allSettled, which takes an array of promises and returns a promise that resolves after all of the given promises have either been fulfilled or rejected.

I completed all three questions within the allotted time and ensured the solutions were robust and executable. Clearing this round allowed me to progress to the Platform Round.

Round 3: Platform Round

This round primarily tested my in-depth knowledge of React Native architecture and its modern advancements. The 60-minute session was divided into three sections, each focusing on different aspects of React Native expertise.

Section 1: React Native Architecture Discussion In this segment, the interviewer asked detailed questions about React Native’s architectural evolution. The topics included:

• Old vs. New Architecture: Differences between the old architecture (based on the bridge) and the new one (TurboModules, JSI, and Fabric).
• Optimization Improvements: Discussed enhancements like reduced bridge bottlenecks, faster rendering via Fabric and the role of Hermes in improving performance.
• Why Updates Were Necessary: They probed into the reasons for adopting TurboModules and JSI, highlighting their impact on app performance and inter-module communication.
• How It Works Internally: Questions centred around how JSI facilitates direct communication with the JavaScript engine and eliminates the need for serialization/deserialization via the bridge.

The pattern of questioning was consistent: “What is it? Why was it introduced? How does it work?” This required both theoretical knowledge and a practical understanding of React Native internals.

Section 2: Native Component & Module Implementation In this part, the interviewer provided documentation with the design for a native component and module that I had to implement. This required:

• Creating a Native Component using Android’s SimpleViewManager.
• Developing a Native Module to handle custom business logic.

I managed to complete about 80% of the implementation due to time constraints. The focus was on:

• Writing clean, reusable native code.
• Ensuring seamless integration with React Native.

Section 3: React Fundamentals and Patterns The final section comprised verbal questions on core React and React Native concepts. Topics included:

• React Component Lifecycle: How to React Native leverages lifecycle methods.
• State Management: Best practices for managing state in large applications.
• React Hooks: Practical usage of useEffect, useContext, and custom hooks.
• Design Patterns: Discussion on reusable component patterns and optimizing performance in React Native apps.

Completing most of the coding tasks and demonstrating a solid understanding of React fundamentals helped me move forward to the next round.

Round 4: Design Round

This round tested my ability to design systems and applications effectively, with a focus on both backend and frontend aspects. The task provided by the interviewer was to design a Slack messaging system with the following requirements:

1. Peer-to-Peer Messaging: Enable real-time, direct communication between two users.
2. Group Messaging: Support for creating and managing group conversations.
3. API Design: Design RESTful APIs that handle messaging functionality efficiently.
4. History: Store chat history of conversation.

Functional and Non-Functional Requirements

The interviewer expected a detailed breakdown of both functional (e.g., sending, and receiving messages) and non-functional requirements (e.g., performance, scalability, data consistency). They emphasized maintaining real-time communication and ensuring scalable backend architecture.

My Approach

Backend Design — Proposed a distributed system architecture using WebSockets for real-time communication.

API Design — Created a plan for APIs, including endpoints for sending, receiving, fetching old messages, and managing groups & focused on ensuring low latency for real-time events while keeping APIs stateless for ease of maintenance.

Frontend Design Discussion After completing the system design, the discussion shifted toward the frontend. The interviewer asked how I would efficiently display and paginate messages given the API responses. Key points included:

• Data Fetching and Caching: Use infinite scrolling for message lists with APIs returning batched data.
• State Management: Manage the state effectively using a combination of Redux and React Query for real-time updates.
• Unread Message Count: Display the user's unread message optimally count over UI.

Although I was able to answer most of the questions, a couple of edge cases stumped me, particularly around questions related to WebSockets & its response.

Outcome

After a week of anxious waiting, I received an email from FanCode stating that they would not be moving forward with my application. The message read:

“After much discussion and analysis with the team, we, unfortunately, have decided not to proceed with signing you on at this time. However, we will keep your profile on file, and as soon as a position aligns with your talent, we will reach out!”

While I didn’t make it to the finish line, I gained practical knowledge and feel motivated to keep growing as a developer. Looking forward to the next adventure!