Premium Employer

i

This company page is being actively managed by Infosys Team. If you also belong to the team, you can get access from here

Infosys Verified Tick

Compare button icon Compare button icon Compare

Filter interviews by

Infosys Reactjs Developer Interview Questions, Process, and Tips

Updated 10 Jan 2025

Top Infosys Reactjs Developer Interview Questions and Answers

  • Q1. What are higher-order functions in JS
  • Q2. What is the difference between a development dependency and a regular dependency in software development?
  • Q3. presentation component vs functional component in React.js
View all 34 questions

Infosys Reactjs Developer Interview Experiences

11 interviews found

Interview experience
3
Average
Difficulty level
Moderate
Process Duration
Less than 2 weeks
Result
Not Selected

I applied via Naukri.com and was interviewed in Dec 2024. There was 1 interview round.

Round 1 - Technical 

(6 Questions)

  • Q1. What is the difference between a development dependency and a regular dependency in software development?
  • Ans. 

    Development dependencies are needed for development and testing, while regular dependencies are needed for the application to run.

    • Development dependencies are used during the development process, such as testing frameworks or build tools.

    • Regular dependencies are required for the application to function properly in production.

    • Development dependencies are typically listed in the devDependencies section of package.json, w...

  • Answered by AI
  • Q2. What do the symbols ^ and ~ represent in the package.json file?
  • Ans. 

    Symbols ^ and ~ in package.json represent version ranges for dependencies.

    • The symbol ^ represents a range that allows minor version updates.

    • The symbol ~ represents a range that allows only patch updates.

    • For example, ^1.2.3 allows any version from 1.2.3 to <2.0.0, while ~1.2.3 allows any version from 1.2.3 to <1.3.0.

  • Answered by AI
  • Q3. How can a 404 page be handled in React routing?
  • Ans. 

    404 page can be handled in React routing by creating a Route component with a path of '*' at the end of all other routes.

    • Create a Route component with a path of '*' at the end of all other routes in the Switch component.

    • Inside the '*' Route component, render a custom 404 page component.

    • Use the Switch component to ensure that only one Route is rendered at a time.

  • Answered by AI
  • Q4. Some Javascript coding questions.
  • Q5. What is the component lifecycle in functional components?
  • Ans. 

    Component lifecycle in functional components involves useEffect hook for side effects.

    • Functional components use useEffect hook to handle side effects like fetching data, subscribing to events, etc.

    • useEffect hook can be used to mimic componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods.

    • useEffect hook takes a callback function as its first argument and an optional array of dependencies as its...

  • Answered by AI
  • Q6. Explain redux data flow
  • Ans. 

    Redux data flow is a unidirectional flow of data in React applications using a centralized store.

    • Actions are dispatched to the store

    • Reducers update the state based on the action

    • Components subscribe to the store to access the updated state

  • Answered by AI

Interview Preparation Tips

Topics to prepare for Infosys Reactjs Developer interview:
  • Javascript
  • React.Js
Interview preparation tips for other job seekers - Get your basic cleared and be prepared
Interview experience
4
Good
Difficulty level
Easy
Process Duration
Less than 2 weeks
Result
Selected Selected

I applied via Recruitment Consulltant and was interviewed in Oct 2024. There were 2 interview rounds.

Round 1 - Technical 

(5 Questions)

  • Q1. Component lifecycle
  • Q2. What is DOM tree?
  • Ans. 

    DOM tree is a hierarchical representation of HTML elements in a web page.

    • DOM stands for Document Object Model.

    • It is a tree-like structure where each node represents an HTML element.

    • The DOM tree is created by the browser when a web page is loaded.

    • It allows JavaScript to manipulate the content, structure, and style of a web page.

  • Answered by AI
  • Q3. What is the difference between props and state?
  • Ans. 

    Props are immutable and passed from parent component, while state is mutable and managed within the component.

    • Props are read-only and cannot be modified by the component receiving them.

    • State is mutable and can be changed by the component that owns it.

    • Props are passed from parent to child components, while state is managed within the component itself.

    • Example: Props can be used to pass data from a parent component to a c...

  • Answered by AI
  • Q4. What is redux and when to use it and when not to use it?
  • Ans. 

    Redux is a predictable state container for JavaScript apps. It is used to manage application state in a centralized way.

    • Use Redux when you have complex state management needs in your application.

    • Redux is helpful for large applications with many components that need access to the same state.

    • Avoid using Redux for simple applications with minimal state management requirements.

    • Consider using React's built-in state manageme...

  • Answered by AI
  • Q5. Two arrays passed to one function, then remove the elements passed from source array and present in another array
  • Ans. 

    Remove elements from source array present in another array passed to a function

    • Loop through elements in source array and check if they exist in the other array

    • If an element is found in both arrays, remove it from the source array

  • Answered by AI
Round 2 - Client Interview 

(5 Questions)

  • Q1. What is DOM tree
  • Ans. 

    DOM tree is a hierarchical representation of HTML elements in a web page.

    • DOM stands for Document Object Model

    • It is a tree-like structure where each node represents an HTML element

    • The root node is the element, followed by and elements

    • Nodes can have parent-child relationships, siblings, and descendants

    • JavaScript can manipulate the DOM to dynamically update the content and structure of a web page

Answered by AI
  • Q2. What are lifecycle methods of react? How we can achieve same in functional components?
  • Ans. 

    React lifecycle methods are methods that are invoked at different stages of a component's life cycle.

    • Some lifecycle methods include componentDidMount, componentDidUpdate, componentWillUnmount, etc.

    • In functional components, we can achieve similar functionality using useEffect hook.

    • For example, useEffect with an empty dependency array can mimic componentDidMount, while useEffect with dependencies can mimic componentDidUp

  • Answered by AI
  • Q3. What is redux? Explain its architecture.
  • Ans. 

    Redux is a predictable state container for JavaScript apps.

    • Redux is a state management library commonly used with React.

    • It helps in managing the state of the application in a predictable way.

    • Redux follows a unidirectional data flow architecture.

    • Actions are dispatched to update the state, which is stored in a single immutable state tree.

    • Reducers are pure functions that specify how the state should change in response to

  • Answered by AI
  • Q4. When do we use any in typescript?
  • Ans. 

    The 'any' type in TypeScript is used when the type of a variable is not known during development.

    • Use 'any' when working with dynamic data types or when the type cannot be determined at compile time.

    • Avoid using 'any' as much as possible to maintain type safety and improve code quality.

    • Consider using 'unknown' type instead of 'any' for better type checking and error prevention.

  • Answered by AI
  • Q5. What is the checklist for improving performance of React application?
  • Ans. 

    Checklist for improving performance of React application

    • Use React.memo or PureComponent for optimizing rendering

    • Avoid unnecessary re-renders by using shouldComponentUpdate or React.memo

    • Use code splitting to load only necessary components

    • Optimize state management with libraries like Redux or Context API

    • Minimize the use of inline styles and prefer CSS stylesheets for better performance

  • Answered by AI

    Skills evaluated in this interview

    Reactjs Developer Interview Questions Asked at Other Companies

    Q1. Implement counter such that it has 2 buttons to increment and dec ... read more
    asked in Accenture
    Q2. How do you make a page responsive. Bootstrap layouts and alerts
    asked in Java R & D
    Q3. What are Call, apply and bind methods, what is currying in JavaSc ... read more
    Q4. what is ES6 feature small coding on how let,var,const works javas ... read more
    asked in Metafic
    Q5. Write code for functional component to call an API and show a lis ... read more
    Interview experience
    3
    Average
    Difficulty level
    -
    Process Duration
    -
    Result
    -
    Round 1 - Technical 

    (5 Questions)

    • Q1. Diff between state and props
    • Q2. Lifecycle method in functional component
    • Q3. Find unique element
    • Q4. Remove duplicate element
    • Q5. Explain clousure

    Reactjs Developer Interview Questions & Answers

    user image vamshi thatikonda

    posted on 11 Dec 2024

    Interview experience
    4
    Good
    Difficulty level
    -
    Process Duration
    -
    Result
    -
    Round 1 - Technical 

    (1 Question)

    • Q1. What are closures in JS
    • Ans. 

      Closures in JavaScript are functions that have access to variables from their outer scope even after the outer function has finished executing.

      • Closures allow functions to access variables from their parent function even after the parent function has returned.

      • They help in creating private variables and data encapsulation.

      • Closures are created whenever a function is defined within another function.

    • Answered by AI
    Round 2 - Technical 

    (1 Question)

    • Q1. Controlled and uncontrolled components

    Skills evaluated in this interview

    Infosys interview questions for designations

     Developer

     (22)

     Software Developer

     (261)

     Java Developer

     (145)

     Salesforce Developer

     (34)

     Web Developer

     (21)

     Angular Developer

     (13)

     Application Developer

     (10)

     Plsql Developer

     (10)

    Interview experience
    4
    Good
    Difficulty level
    -
    Process Duration
    -
    Result
    -
    Round 1 - Technical 

    (1 Question)

    • Q1. All js concepts.

    Get interview-ready with Top Infosys Interview Questions

    Interview experience
    4
    Good
    Difficulty level
    Moderate
    Process Duration
    Less than 2 weeks
    Result
    -

    I applied via Company Website and was interviewed in Oct 2023. There were 3 interview rounds.

    Round 1 - Technical 

    (6 Questions)

    • Q1. What are the benefits of React?
    • Ans. 

      React offers a component-based architecture, virtual DOM for performance optimization, and a strong community support.

      • Component-based architecture allows for reusability and easier maintenance of code.

      • Virtual DOM helps in improving performance by only updating the necessary parts of the actual DOM.

      • React has a strong community support with a vast ecosystem of libraries and tools available.

      • React allows for server-side re...

    • Answered by AI
    • Q2. Difference between state and props?
    • Ans. 

      State is mutable and managed within the component, while props are immutable and passed from parent component.

      • State is managed within the component and can be changed using setState() method

      • Props are passed from parent component to child component and cannot be changed by the child component

      • State is used for internal component data management, while props are used for passing data from parent to child components

    • Answered by AI
    • Q3. What is useReducer and UseContext api?
    • Ans. 

      useReducer is a React hook that manages state changes through a specified reducer function. useContext is a hook that allows access to a context object.

      • useReducer is used for managing complex state logic in React applications.

      • It takes in a reducer function and an initial state, and returns the current state and a dispatch function.

      • Example: const [state, dispatch] = useReducer(reducer, initialState);

      • useContext is used f...

    • Answered by AI
    • Q4. What is one way data binding?
    • Ans. 

      One way data binding is a unidirectional flow of data from the model to the view in React applications.

      • Data flows from the model (or source of truth) to the view, but not vice versa.

      • Changes in the model automatically update the view, but changes in the view do not affect the model.

      • Helps in maintaining a clear and predictable data flow in React components.

    • Answered by AI
    • Q5. Tell me hooks you have used?
    • Ans. 

      I have used useState, useEffect, useContext, useReducer, and useRef hooks in my projects.

      • useState - for managing state in functional components

      • useEffect - for handling side effects in functional components

      • useContext - for accessing context in functional components

      • useReducer - for managing complex state logic in functional components

      • useRef - for accessing DOM elements or storing mutable values

    • Answered by AI
    • Q6. What is redux middleware
    • Ans. 

      Redux middleware is a function that intercepts actions before they reach the reducer.

      • Middleware can be used for logging, crash reporting, asynchronous API calls, etc.

      • It sits between the action dispatch and the reducer.

      • Examples of popular middleware include redux-thunk and redux-saga.

    • Answered by AI
    Round 2 - Behavioral 

    (2 Questions)

    • Q1. Questions related to Projects
    • Q2. Git commands: How to commit ,merge code, how to resolve merge conflicts
    • Ans. 

      Git commands for committing, merging code, and resolving merge conflicts

      • To commit code: git commit -m 'Commit message'

      • To merge code from a branch: git merge branch_name

      • To resolve merge conflicts: manually edit the conflicting files, add changes, and then commit the merge

    • Answered by AI
    Round 3 - Coding Test 

    It's 10 multiple-choice question with low,medium, and difficult range levels.

    Skills evaluated in this interview

    Reactjs Developer Jobs at Infosys

    View all
    Interview experience
    1
    Bad
    Difficulty level
    Moderate
    Process Duration
    Less than 2 weeks
    Result
    Not Selected

    I applied via Naukri.com and was interviewed before Dec 2023. There was 1 interview round.

    Round 1 - Technical 

    (2 Questions)

    • Q1. What is the concept of redeclaration in JavaScript?
    • Ans. 

      Redeclaration in JavaScript refers to the act of declaring a variable or function multiple times within the same scope.

      • Redeclaring a variable using the 'var' keyword will not throw an error but will simply update the value of the variable.

      • Redeclaring a variable using the 'let' or 'const' keyword within the same scope will result in a syntax error.

      • Redeclaring a function within the same scope will override the previous f

    • Answered by AI
    • Q2. What are Promises?
    • Ans. 

      Promises in JavaScript are objects representing the eventual completion or failure of an asynchronous operation.

      • Promises are used to handle asynchronous operations in JavaScript.

      • They can be in one of three states: pending, fulfilled, or rejected.

      • Promises can be chained using .then() to handle success and .catch() to handle errors.

      • Example: const myPromise = new Promise((resolve, reject) => { ... });

    • Answered by AI

    Interview Preparation Tips

    Interview preparation tips for other job seekers - Just prepare and pray😂

    Skills evaluated in this interview

    Interview experience
    4
    Good
    Difficulty level
    Moderate
    Process Duration
    -
    Result
    Not Selected

    I applied via Company Website and was interviewed in Aug 2023. There was 1 interview round.

    Round 1 - Technical 

    (2 Questions)

    • Q1. What is conditional rendering in React? What are closures? OOPS concept in JavaScript. What is ACID in database? Stack vs Heap
    • Ans. 

      Conditional rendering in React allows components to render different elements or components based on certain conditions.

      • Conditional rendering is achieved using JavaScript expressions inside JSX.

      • Common conditional rendering techniques include using if statements, ternary operators, and logical && operator.

      • Example: rendering a component only if a certain condition is met - {condition ? : null}

    • Answered by AI
    • Q2. In react you can conditionally render component like when and which component to render by using if condition and other.

    Skills evaluated in this interview

    I applied via Company Website and was interviewed in Nov 2022. There was 1 interview round.

    Round 1 - Technical 

    (2 Questions)

    • Q1. Difference between var and let, difference between redux and flux
    • Ans. 

      Var is function scoped, let is block scoped. Redux is a predictable state container, Flux is an architecture pattern.

      • Var can be redeclared and updated within its scope, let cannot be redeclared but can be updated within its scope

      • Redux has a single store for the entire application, while Flux has multiple stores

      • Redux uses a unidirectional data flow, while Flux uses a bidirectional data flow

      • Redux has middleware for handl...

    • Answered by AI
    • Q2. Output based questions on var and let.

    Interview Preparation Tips

    Interview preparation tips for other job seekers - Go through the fundamentals of javaScript , var and let , promises, map,filter,reduce

    Skills evaluated in this interview

    I applied via Recruitment Consulltant and was interviewed in Mar 2022. There was 1 interview round.

    Round 1 - Technical 

    (6 Questions)

    • Q1. What is hoisting in JS
    • Ans. 

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

      • Hoisting applies to both variable and function declarations.

      • Variable declarations are hoisted but not their initializations.

      • Function declarations are fully hoisted, allowing them to be called before they are declared.

      • Hoisting does not apply to variables declared with let or const.

      • Hoisting can lead t...

    • Answered by AI
    • Q2. What are higher-order functions in JS
    • Ans. 

      Higher-order functions are functions that take one or more functions as arguments or return a function as their result.

      • Higher-order functions can be used to create reusable code by abstracting common patterns.

      • They enable functional programming paradigms like currying and composition.

      • Examples of higher-order functions in JavaScript include map, filter, and reduce.

    • Answered by AI
    • Q3. Difference between var, let, and const in JS
    • Ans. 

      var is function scoped, let and const are block scoped.

      • var can be redeclared and updated within its scope

      • let can be updated but not redeclared within its scope

      • const cannot be updated or redeclared once declared

      • let and const are not hoisted like var

      • const must be initialized during declaration

    • Answered by AI
    • Q4. What are Hooks in React.js
    • Ans. 

      Hooks are a feature in React.js that allow developers to use state and other React features in functional components.

      • Hooks are functions that let you use React features in functional components

      • They allow you to use state and other React features without writing a class

      • Hooks provide a way to reuse stateful logic between components

      • Some commonly used hooks are useState, useEffect, and useContext

    • Answered by AI
    • Q5. Presentation component vs functional component in React.js
    • Ans. 

      Presentation components are class components that handle rendering, while functional components are simpler and handle stateless rendering.

      • Presentation components are also known as container components.

      • Functional components are also known as stateless components.

      • Presentation components are used for complex UI logic and state management.

      • Functional components are used for simple UI logic and stateless rendering.

      • Functiona...

    • Answered by AI
    • Q6. Bind(), call(), apply() in JS

    Interview Preparation Tips

    Topics to prepare for Infosys Reactjs Developer interview:
    • JavaSctipt
    • React.Js
    Interview preparation tips for other job seekers - the interview was based on basic concepts of JS.

    Skills evaluated in this interview

    Infosys Interview FAQs

    How many rounds are there in Infosys Reactjs Developer interview?
    Infosys interview process usually has 1-2 rounds. The most common rounds in the Infosys interview process are Technical, Resume Shortlist and Behavioral.
    How to prepare for Infosys Reactjs Developer interview?
    Go through your CV in detail and study all the technologies mentioned in your CV. Prepare at least two technologies or languages in depth if you are appearing for a technical interview at Infosys. The most common topics and skills that interviewers at Infosys expect are Redux, React Native, Javascript, React.Js and HTML.
    What are the top questions asked in Infosys Reactjs Developer interview?

    Some of the top questions asked at the Infosys Reactjs Developer interview -

    1. What are higher-order functions in...read more
    2. What is the difference between a development dependency and a regular dependenc...read more
    3. presentation component vs functional component in React...read more

    Tell us how to improve this page.

    Infosys Reactjs Developer Interview Process

    based on 10 interviews

    1 Interview rounds

    • Technical Round
    View more
    Join Infosys Creating the next opportunity for people, businesses & communities
    Infosys Reactjs Developer Salary
    based on 137 salaries
    ₹2.5 L/yr - ₹9.5 L/yr
    14% less than the average Reactjs Developer Salary in India
    View more details

    Infosys Reactjs Developer Reviews and Ratings

    based on 10 reviews

    2.7/5

    Rating in categories

    2.6

    Skill development

    3.3

    Work-life balance

    1.8

    Salary

    3.9

    Job security

    2.5

    Company culture

    1.9

    Promotions

    2.5

    Work satisfaction

    Explore 10 Reviews and Ratings
    React JS Developer

    Hyderabad / Secunderabad,

    Pune

    +1

    3-8 Yrs

    Not Disclosed

    Reactjs Developer - Pan India

    Hyderabad / Secunderabad,

    Chennai

    +1

    5-10 Yrs

    Not Disclosed

    ReactJS Developer

    Bangalore / Bengaluru

    5-9 Yrs

    Not Disclosed

    Explore more jobs
    Technology Analyst
    55.9k salaries
    unlock blur

    ₹3 L/yr - ₹11 L/yr

    Senior Systems Engineer
    50.4k salaries
    unlock blur

    ₹2.8 L/yr - ₹8 L/yr

    System Engineer
    39.5k salaries
    unlock blur

    ₹2.5 L/yr - ₹5.5 L/yr

    Technical Lead
    30.8k salaries
    unlock blur

    ₹5.2 L/yr - ₹19.5 L/yr

    Senior Associate Consultant
    27.7k salaries
    unlock blur

    ₹6.2 L/yr - ₹16.8 L/yr

    Explore more salaries
    Compare Infosys with

    TCS

    3.7
    Compare

    Wipro

    3.7
    Compare

    Cognizant

    3.8
    Compare

    Accenture

    3.8
    Compare
    Did you find this page helpful?
    Yes No
    write
    Share an Interview