Tatvasoft Front end Developer Interview Questions and Answers

1 hr -duration and Question is Full of basics and technology what we have used

Q1. What is bridge? What is the new architecture?
Ans. 
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
Answered by AI
Add your answer
Q2. How will you optimize a react native app
Ans. 
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
Answered by AI
Add your answer
Q3. What is context API
Ans. 
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
Answered by AI
Add your answer
Q4. What is hoisting
Ans. 
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.
Answered by AI
Add your answer

Hacker Rank Online Written Test

Topics covered DSA and Javascript

Q1. Display a list of items using Pagination concept in React using any online coding editor.
Ans. 
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
Answered by AI
Add your answer
Q2. Check if pair sum exists in the array (Two Sum)?
Ans. 
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.
Answered by AI
Add your answer
Q3. React LifeCycle?
Add your answer
Q4. How do you improve the performance of a website?
Ans. 
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
Answered by AI
Add your answer
Q5. What is NextJS?
Ans. 
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
Answered by AI
Add your answer

Create 1 webpage using html, css, js, scss - xd provided

Q1. Doctype in html
Ans. 
Doctype in HTML specifies the version of HTML being used in the document.
• Doctype declaration is placed at the very beginning of an HTML document before the <html> tag.

• It helps the browser to render the web page correctly by specifying the version of HTML being used.

• Example: <!DOCTYPE html> for HTML5, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
Answered by AI
Add your answer
Q2. What is Flexbox in css
Ans. 
Flexbox is a layout model in CSS that allows you to design complex layouts with a more efficient and predictable way.
• Flexbox is used for creating flexible and responsive layouts.

• It allows you to align and distribute space among items in a container.

• Flexbox properties include display: flex, flex-direction, justify-content, align-items, and more.

• Example: display: flex; justify-content: center; align-items: center;
Answered by AI
Add your answer
Q3. Document.ready and window.onload difference
Ans. 
Document.ready is a jQuery function that fires when the DOM is ready, while window.onload is a vanilla JavaScript event that fires when all resources have loaded.
• Document.ready is specific to jQuery, while window.onload is a standard JavaScript event.

• Document.ready fires when the DOM is ready, even if images are still loading, while window.onload waits for all resources to finish loading.

• Document.ready is faster than w...read more
Answered by AI
Add your answer
Q4. Position properties in css
Ans. 
Position properties in CSS control the positioning of elements on a webpage.
• The 'position' property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

• The 'top', 'right', 'bottom', and 'left' properties can be used to adjust the position of an element relative to its containing element.

• Examples: position: relative; top: 10px; left: 20px;
Answered by AI
Add your answer
Q5. Box model in css
Ans. 
Box model in CSS refers to the way elements are rendered on a webpage, including content, padding, border, and margin.
• The box model consists of content, padding, border, and margin.

• Content is the actual content of the element.

• Padding is the space between the content and the border.

• Border is the line that surrounds the padding.

• Margin is the space outside the border.

• You can adjust the size of each part of the box model u...read more
Answered by AI
Add your answer
Q6. Semantic tags in html
Ans. 
Semantic tags in HTML are specific tags that provide meaning to the content they enclose.
• Semantic tags help search engines and screen readers understand the structure of a webpage.

• Examples of semantic tags include <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, <figcaption>.

• Using semantic tags improves SEO and accessibility of a website.
Answered by AI
Add your answer
Q7. Display properties
Ans. 
Display properties are used in CSS to control the layout and appearance of elements on a webpage.
• Display property determines how an element is displayed on the page

• Common values include 'block', 'inline', 'inline-block', 'flex', 'grid', 'none'

• Example: display: block; will make the element a block-level element
Answered by AI
Add your answer

Q1. What is Flexbox in css
Ans. 
Flexbox is a layout model in CSS that allows for the design of complex responsive layouts with a more efficient and predictable way.
• Flexbox is used to create flexible and responsive layouts.

• It allows for easy alignment and distribution of space among items in a container.

• Flexbox properties include display: flex, flex-direction, justify-content, align-items, and more.

• Example: display: flex; justify-content: center; alig...read more
Answered by AI
Add your answer
Q2. Box sizing difference and scenario
Ans. 
Box sizing property in CSS determines how the total width and height of an element is calculated.
• Content-box: width and height only include the content, padding and border are added on top.

• Border-box: width and height include content, padding, and border.

• Use content-box when you want to specify the width and height of the content area only.

• Use border-box when you want to specify the width and height of the entire box i
Answered by AI
Add your answer
Q3. Bootstrap grid and flex
Add your answer

Q1. Basic JS & React JS question
Add your answer

Q1. Advance level of JS and React related question and coding skills test as well.
Add your answer

Q1. What are your salary expectations?
Ans. 
I am open to discussing salary based on the responsibilities and requirements of the position.
• I am flexible and open to negotiation.

• I am looking for a fair and competitive salary.

• I am more interested in the overall compensation package rather than a specific number.

• I would like to be compensated based on my skills, experience, and the value I can bring to the company.
Answered by AI
Add your answer

Q1. Clousers in Javascript
Ans. 
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.
Answered by AI
Add your answer
Q2. Difference between use ref and create ref
Ans. 
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
Answered by AI
Add your answer