TCS iON Front end Developer Interview Questions and Answers

Display a list of items using Pagination concept in React

• Create a list of items to display

• Implement pagination logic to display a limited number of items per page

• Add navigation buttons to switch between pages

Check if pair sum exists in the array using a hash map.

• Use a hash map to store the difference between the target sum and each element in the array.

• Iterate through the array and check if the current element exists in the hash map.

• Return true if a pair sum exists, otherwise return false.

Improving website performance involves optimizing code, reducing server requests, using caching, and optimizing images.

• Optimize code by minifying CSS, JavaScript, and HTML

• Reduce server requests by combining files and using asynchronous loading

• Utilize caching techniques like browser caching and server-side caching

• Optimize images by resizing, compressing, and using modern image formats like WebP

NextJS is a React framework that allows for server-side rendering and static site generation.

• NextJS is built on top of React, providing features like server-side rendering and static site generation.

• It simplifies the process of building React applications by handling routing, code splitting, and more out of the box.

• NextJS also supports API routes for serverless functions and data fetching.

• It offers features like automa...read more

Bridge is a structural design pattern that decouples an abstraction from its implementation. The new architecture refers to modern design patterns and technologies used in software development.

• Bridge pattern allows the client code to work with different implementations of an interface independently.

• The new architecture in front end development may include concepts like component-based architecture, state management lib...read more

Optimizing a React Native app involves reducing bundle size, improving performance, and enhancing user experience.

• Use code splitting to reduce initial load time

• Optimize images and assets for smaller file sizes

• Implement lazy loading for components that are not immediately visible

• Minimize the use of third-party libraries and only include necessary dependencies

• Utilize performance monitoring tools like React Native Perform

Context API is a feature in React that allows sharing data between components without having to pass props through every level of the component tree.

• Context API provides a way to pass data through the component tree without having to pass props down manually at every level.

• It is useful for sharing global data such as themes, user authentication, or language preferences.

• Context API consists of three main parts: Provider...read more

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during compilation.

• Variable declarations are hoisted to the top of their scope, but not their initializations.

• Function declarations are fully hoisted, including their definitions.

• Hoisting can lead to unexpected behavior if not understood properly.

Closures are functions that have access to variables in their outer scope, even after the outer function has returned.

• Closures are created when a function is defined inside another function.

• The inner function has access to the outer function's variables and parameters.

• Closures can be used to create private variables and methods.

• Closures can also be used to create functions with pre-set arguments.

useRef is a hook used to create a mutable ref object, while createRef is a method used to create a ref object.

• useRef is a hook provided by React, while createRef is a method provided by the React library.

• useRef can be used in functional components to create a mutable ref object that persists across renders.

• createRef is used in class components to create a ref object that can be attached to a DOM element.

• useRef can also...read more

Finding common characters in 3 strings using coding

• Create a function that takes in 3 strings as input

• Iterate through each character of the first string and check if it exists in the other 2 strings

• Store the common characters in an array and return it