Interview Questions On React Js
1. What do you mean by ReactJS?
Answer: It is nothing but a JavaScript library which was developed by the popular social media giant Facebook. The prime aim was to build user interfaces. The good thing is that developers can simply create renewable UI components. There are certain factors that have contributed to its success and the one among them is the support of a very large community.
2. Tell us three reasons behind the success of ReactJS?
Answer: ReactJS is a technology that can be trusted for complex tasks. While performing any task through it, developers need not worry about the bugs. It always ensures error-free outcomes and the best part is it offers scalable apps. It is a very fast technology and can simply be trusted for quality outcomes.
3. What is meant by event handling?
Answer: To capture the user’s information and other similar data, event handling system is considered. It is generally done through DOM elements which are present in the code. This task is simple to accomplish. Two-way communication is considered in this approach.
4. What do you know about React Router?
Answer: Rendering the components is an important task in ReactJS. React router is used to decide which components are to be rendered and which one should not. It also performs dictation during several activities.
5. What do you mean by the state?
Answer: It is basically a JavaScript object that is meant to effectively handle the changes into the data. Generally, it is present inside in all the components that are used. It is considered as an important part of RectJS apps which boost user interfaces. As it represents the data that change over time, certain errors can be eliminated and developers can always ensure quality.
6. Do you know what the reconciliation algorithm is?
Answer: It is the algorithm responsible for figuring out what changed between re-renders and how to update the actual DOM. It is basically a diffing algorithm. The latest addition of improvements on the core algorithm is called React Fiber.
7. How would you optimize the performance of a React application?
Answer: The most expensive task in a React app is the update of the DOM. The basic optimization is to reduce how many times a component re-renders. This can be achieved by using component Should Update, using Pure Component or memoization libraries like reselect. Reducing the size of the final JS file also helps improving performance and we can use dynamic imports and chunks for this.
8. What Is Flux Concept In Reactjs?
Answer: Flux is the architecture of an application that Facebook uses for developing client-side web applications. Facebook uses internally when working with React. It is not a framework or a library. This is simply a new technique that complements React and the concept of Unidirectional Data Flow.
Facebook dispatcher library is a sort of global pub/sub handler technique which broadcasts payloads to registered callbacks.
9. What do you know about the controlled and uncontrolled components?
Answer:
Controlled Components
Uncontrolled Components
- They do not maintain their own state
- They maintain their own state
- Data is controlled by the parent component
- Data is controlled by the DOM
- They take in the current values through
- props and then notify the changes via callbacks.
- Refs are used to getting their current values
10. What is Flux and its Key Components in ReactJS?
Answer: While working with React, Facebook internally makes use of the architecture named Flux, which is neither a framework nor a library. It is the application architecture used to build JavaScript applications for Facebook and is based on a unidirectional data flow. From small widgets to huge applications designed with Flux, React has handled everything that has been thrown at it. In addition, you can start using it without a lot of new code beyond React.
Individual components include:
Actions
These facilitate the passing of data to the Dispatcher. Whenever new data enters the system either through a person who interacts with the application or through a web API call, the data is packaged into the action. These helper methods not only create the action object but also pass the action to the dispatcher.
Dispatcher
The dispatcher is required to provide a simple, synchronous iteration through the callbacks, invoking each in turn. After the entire set of dependencies has been fulfilled, the original callback then continues to execute. In brief, a dispatcher receives actions and broadcasts payloads to the registered callbacks.
Stores
In Flux, these stores are required to manage the application state for a particular domain within your application. Thus, these stores manage the data, data retrieval methods, and dispatcher callbacks. These are the containers for application state and logic that have callbacks registered to the dispatcher.
Controller views
These are the React components that listen to the change events and retrieve the application state from the stores. Thereafter, they pass that data down to the child components through props.
11. How is React differently?
Answer:
- Since React is a little small concentrated on building UI components, it is essentially not the same as a considerable measure of other JavaScript frameworks.
- For instance, AngularJS (1.x) approaches building an application by expanding HTML markup and infusing different develops (e.g. Directives, Controllers, Services) at runtime. Subsequently, AngularJS is extremely obstinate about the more architecture design of your application — these reflections are absolutely helpful now and again, yet much of the time, they come at the cost of adaptability.
12. What is a prop?
Answer: A good analogy to define “what is a prop?” has been likened to the real-life situation of when a person moves from one home to another. A moving van pulls up and all the contents of the home are loaded in the van and it drives off to be unloaded into the new house. The house is the scenery. The scenery includes the actual walls, floors, ceilings, doors- the architecture of the house. This does not move. It is stationary and permanent. The items boxed up, covered in pads, and carried out to the moving van when a person is changing residences would all be considered the props.
13. What do you understand under asynchronous code in JS?
Answer: Synchronous code is code which is executed step by step if we have a long-running task we need to wait until it finishes executing before moving further and this basically blocks all other tasks if we don’t have multithreading. In case of a 5s long AJAX call, we would block the browser for 5 seconds unable to do anything. This is solved by asynchronous code where tasks can be executed in a non-blocking way. This is ensured by the event loop and uses the call stack and callback queue to provide asynchronous behavior. In simple terms, we can register asynchronous tasks with the event loop to be executed in the future. JavaScript provides a few ways to achieve asynchronous code: via promises, async/await or generators.
14. List down the advantages of React Router?
Answer:
Few advantages are:
- Just like how React is based on components, in React Router v4, the API is ‘All About Components’. A Router can be visualized as a single root component () in which we enclose the specific child routes ().
- No need to manually set History value: In React Router v4, all we need to do is wrap our routes within the component.
- The packages are split: Three packages one each for Web, Native and Core. This supports the compact size of our application. It’s easy to switch over based on a similar coding style. (interview questions on react js)
15. What are the advantages of Redux?
Answer:
Advantages of Redux are listed below:
Predictability of outcome: Since there is always one source of truth, i.e. the store, there is no confusion about how to sync the current state with actions and other parts of the application.
Maintainability: The code becomes easier to maintain with a predictable outcome and strict structure.
Server-side rendering: You just need to pass the store created on the server, to the client-side. This is very useful for initial render and provides a better user experience as it optimizes the application performance.
Developer tools: From actions to state changes, developers can track everything going on in the application in real-time.
Community and ecosystem: Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.
Ease of testing: Redux’s code is mostly functions which are small, pure and isolated. This makes the code testable and independent.
Organization: Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.
16. What is React.createClass?
Answer:
- React.createClass allows us to generate component “classes.” But with ES6, React allows us to implement component classes that use ES6 JavaScript classes. The end result is the same — we have a component class. But the style is different. And one is using a “custom” JavaScript class system (createClass) while the other is using a “native”
- JavaScript class system.
- When using React’s createClass() method, we pass in an object as an argument. So we can write a component using createClass that looks like this:
- Using an ES6 class to write the same component is a little different. Instead of using a method from the react library, we extend an ES6 class that the library defines, Component.
- constructor() is a special function in a JavaScript class. JavaScript invokes constructor() whenever an object is created via a class.
17. What are the controlled components?
Answer:
- In HTML, form elements such as typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it’s the state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. A form element whose value is controlled by React in this way is called a “controlled component”.
- With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.
18. What are controlled and uncontrolled components in React?
Answer:
This relates to stateful DOM components (form elements) and the difference:
- A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange.
- A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.
- An Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.
- In most (or all) cases we should use controlled components.
19. How React JS differs from AngularJs?
Answer: Both React JS and AngularJS are very potent with a diverse approach from front-end web application. It supports all kind of enterprise applications from small, medium to large ones. React JS –is SEO friendly, easily understandable and simple application whereas AngularJs training Bangalore is easy to develop an application and supports different testing forms.
20. What do you know about the component lifecycle in ReactJS?
Answer: Component lifecycle is an essential part of this platform. Basically, they have lifecycle events that fall in the three prime categories which are property updates, Initialization and third are Destruction. They are generally considered as a method of simply managing the state and properties of every reach component.
21. What happens during the lifecycle of a React component?
Answer: A standout amongst the most valuable parts of React is its segment lifecycle — so seeing precisely how segments components after some time are instrumental in building a viable application.
22. Advantages of React Native?
Answer:
- The fact that React Native actually renders using its host platform’s standard rendering APIs enables it to stand out from most existing methods of cross-platform application development, like Cordova or Ionic. Existing methods of writing mobile applications using combinations of JavaScript, HTML, and CSS typically render using web views. While this approach can work, it also comes with drawbacks, especially around performance.
Additionally, they do not usually have access to the host platform’s set of native UI elements. When these frameworks do try to mimic native UI elements, the results usually “feel” just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort, and they can quickly become out of date. - In contrast, Reactive Native actually translates your markup to real, native UI elements, leveraging existing means of rendering views of whatever platform you are working with. Additionally, React works separately from the main UI thread, so your application can maintain high performance without sacrificing capability. The update cycle in React Native is the same as in React: when props or state change, React Native re-renders the views. The major difference between React Native and React in the browser is that React Native does this by leveraging the UI libraries of its host platform, rather than using HTML and CSS markup.
- For developers accustomed to working on the Web with React, this means you can write mobile apps with performance and look and feel of a native application while using familiar tools. React Native also represents an improvement over normal mobile development in two other areas: the developer experience and cross-platform development potential.
23. How is it different from MVC and Flux?
Answer: In classical widely known MVC architecture, there is a clear separation between data (model), presentation (view) and logic (controller). There is one issue with this, especially in large-scale applications: The flow of data is bidirectional. This means that one change (a user input or API response) can affect the state of an application in many places in the code — for example, two-way data binding. That can be hard to maintain and debug.
Flux is very similar to Redux. The main difference is that Flux has multiple stores that change the state of the application, and it broadcasts these changes as events. Components can subscribe to these events to sync with the current state. Redux doesn’t have a dispatcher, which in Flux is used to broadcast payloads to registered callbacks. Another difference in Flux is that many varieties are available, and that creates some confusion and inconsistency.
24. What do you know about synthetic events?
Answer: ReactJS is capable to simply transform original events of browsers by monitoring the behavior of the browser. This is done to make sure that events have logical properties beyond the browsers that are different. Actually, they act as a cross-browser envelope around the logical event system of the browser.
25. Explain the difference between Stateful and Stateless components in ReactJS?
Answer:
- This question seems pretty simple on the surface, yet it covers a crucial aspect of React. So if you’re aiming to find software developers with a profound understanding of React, don’t forget about this one.
- As the name suggests, sateless React components never change the state. Besides, they don’t access the data related to past, present or future changes of a state.
- In the case with stateful React components, everything’s vice versa. A stateful component can use the .setState() method to change states. Aside from this, stateful components can store the information about the state changes performed in the past, happening at the moment, or planned for the future.
26. When would you use a Class Component over a Functional Component?
Answer: If your component has a state or a lifecycle method(s), use a Class component. or else, use a Functional component.
27. What is the difference between creating Element and cloneElement?
Answer: CreateElement is the thing that JSX gets transpiled to and is the thing that React uses to make React Elements (protest representations of some UI). cloneElement is utilized as a part of request to clone a component and pass it new props. They nailed the naming on these two.
28. What is the role of reducers in Redux?
Answer: In Redux, reducers are functions (pure) that take the current state of the application and an action and then return a new state. Understanding how reducers work is important because they perform most of the work. Here is a very simple reducer that takes the current state and an action as arguments and then returns the next state: function handle Auth(state, action)
For more complex apps, using the combine Reducers() utility provided by Redux is possible (indeed, recommended). It combines all of the reducers in the app into a single index reducer. Every reducer is responsible for its own part of the app’s state, and the state parameter is different for every reducer. The combine Reducers() utility makes the file structure much easier to maintain.
If an object (state) changes only some values, Redux creates a new object, the values that didn’t change will refer to the old object and only new values will be created. That’s great for performance. To make it even more efficient you can add Immutable.js. const root Reducer = combine Reducers.
handle Auth: handle Auth,
edit Profile: edit Profile,
change Password: change Password
29. What happens during the lifecycle of a ReactJS component?
Answer: Components lifecycle is one of the cornerstone aspects of ReactLS and an essential thing to ask about during a remote React developer interview. This particular question boils down to asking you the candidate to provide you with a high-level description of the categories that React’s lifecycle events fall into.
30. Do you know the Context API?
Answer: The Context API is a feature which allows sharing data without passing it down in the component tree. With the latest API, in some cases, it is a nice replacement for state management libraries. Many libraries use the API including Redux, styled-components theme provider and some other UI libraries.
31. What are Pure Components?
Answer: React. Pure Component is exactly the same as React. Component except that it handles the should Component Update() method for you. When props or state changes, Pure Component will do a shallow comparison on both props and state. Component, on the other hand, won’t compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.
32. What is the difference between creating Element and clone Element?
Answer: JSX elements will be transpiled to React. create Element() functions to create React elements which are going to be used for the object representation of UI. Whereas clone Element is used to clone an element and pass it new props.
33. What are “actions” in Redux?
Answer:
- In a nutshell, actions are events. Actions send data from the application (user interactions, internal events such as API calls, and form submissions) to the store. The store gets information only from actions. Internal actions are simple JavaScript objects that have a type of property (usually constant), describing the type of action and payload of information being sent to the store.
- Calling actions anywhere in the app, then, is very easy. Use the dispatch method, like so:dispatch(authUser(form));
34. What is the difference between a function declaration and an arrow function?
Answer: Apart from a difference in hoisting the main difference is that a function declaration is bound to its execution context while an arrow function is bound to its lexical context. E.g. the difference is how this is handled and it is especially useful in react components as we don’t need to bind context anymore when passing down event handlers for instance.
35. Explain Various Flux Elements Including Action, Dispatcher, Store, And View?
Answer:
Flux can be better explained by defining its individual components:
Actions: They are helper methods that facilitate passing data to the Dispatcher.
Dispatcher: It is the central hub of the app, it receives actions and broadcasts payloads to registered callbacks.
Stores: It is said to be Containers for application state & logic that have callbacks registered to the dispatcher. Every store maintains a particular state and it will update when it is needed. It wakes up on a relevant dispatch to retrieve the requested data. It is accomplished by registering with the dispatcher when constructed. They are similar to the model in a traditional MVC (Model View Controller), but they manage the state of many objects — it does not represent a single record of data like ORM models do.
Controller Views: React Components grabs the state from Stores and pass it down through props to child components to view to render application.
36. How To Apply Validation On Props In Reactjs?
Answer:
- When the application is running in development mode, React will automatically check for all props that we set on components to make sure they must right correct and right data type.
- For instance, if we say a component has a Message prop which is a string and is required, React will automatically check and warn if it gets an invalid string or number or boolean objects. For performance reasons this check is only done on dev environments and on production, it is disabled so that rendering of objects is done in a fast manner.
37. What Is an event in React?
Answer: The events are the triggered reactions and it is very similar to handling events on DOM elements:
- Mouse Hover
- Mouse Click
- KeyPress
- And too many
But there are only some syntactical differences and it looks like:
- Events are named using camel case instead of just using the lowercase.
- Events are passed as functions instead of strings.
38. What is the Difference between Flux and MVC?
Answer: Have you ever been to web application development? If yes, then you definitely have some experience with MVC architecture. Various technologies including ASP.NET, PHP, Ruby on Rails, and JavaScript frameworks as well as libraries is a great architecture for web applications. Talking about Flux, a new application architecture was introduced by Facebook in 2014 in order to overcome the limitations of MVC architecture. While Flux follows the concept of unidirectional data flow, MVC includes bidirectional data flow. Undeniably, unidirectional data flow reduces the probability of unpredicted data mutations.
39. What do you mean by Redux?
Answer: Many times there is a need to handle the data of an app in a reliable manner. For such tasks, Redux is used. It accurately performs its task and always makes sure that the entire data has been controlled. It is also possible to apply filters in case only a specific part of data is required.
40. What are the Higher-Order Components(HOC)?
Answer: Higher-Order Component is an advanced way of reusing the component logic. Basically, it’s a pattern that is derived from React’s compositional nature. HOC are custom components which wrap another component within it. They can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components. You can say that HOC is ‘pure’ components.
41. What do you know about Flux?
Answer: Basically, Flux is a basic illustration that is helpful in maintaining a unidirectional data stream. It is meant to control construed data unique fragments to make them interface with that data without creating issues. Flux configuration is insipid; it’s not specific to React applications, nor is it required to collect a React application. Flux is basically a straightforward idea, however in you have to exhibit a profound comprehension of its usage.
42. What are the primary reasons to use React JS?
Answer: In spite of all front-end frameworks, React JS is gaining massive popularity with SEO friendly applications and easily understandable methodologies. It was the perfect fit for our needs.
The primary reasons for its popularity are as follows:
- Fast Learning Curve
- Reusable Components
- Quick render with Virtual DOM
- Clean Abstraction
- Flux and Redux
- Great Developer Tools
- React Native
43. How are Actions defined in Redux?
Answer: Actions in React must have a type of property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well. In Redux, actions are created using the functions called Action Creators.
44. What is JSX?
Answer: It is basically a novel dialect of the popular JavaScript that simply integrates the HTML templates into the code of JavaScript. The browser is not capable to read the code simply and thus there is a need for this integration. Generally, WebPack or Babel tools are considered for this task. It has become a very popular approach in the present scenario among the developers.
45. Is setState() is async? Why is setState() in React Async instead of Sync?
Answer:
- setState() actions are asynchronous and are batched for performance gains. This is explained in documentation as below.
- setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
- This is because setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. Thus the setState calls are asynchronous as well as batched for better UI experience and performance.
46. What’s Your Favorite React Stack and Why?
Answer:
- Do expect open, non-specific React interview questions like this one, as well!
- Not only do they breathe life into an otherwise overly technical and rigid interview, but it will help the interviewer get a clear picture on:
- How you can justify your choices and preferences by backing them up with clearly articulated arguments.
Word of caution: Honesty’s your best friend (if not the only one)! You might be tempted to choose dependencies that you have no (or little) experience working with, just because they’re popular: do not fall into this trap! - You’ll only risk getting tangled up in your lies if the interviewer decides to ask you for further, more specific details about your experience working with those tools.
47. What is the difference between ReactJs and AngularJs?
Answer: Both ReactJs and AngularJs are the very powerful and diverse approach for a front-end web application. It supports all small medium and large enterprise application. One side the ReactJs application SEO friendly, simple and easy to understand and the other side Angular Js applications are easy to develop and supports a different form of testing.
48. What is ReactDOM and what is the difference between ReactDOM and React?
Answer:
- Prior to v0.14, all ReactDOM functionality was part of React. But later, React and ReactDOM were split into two different libraries.
- As the name implies, ReactDOM is the glue between React and the DOM. Often, we will only use it for one single thing: mounting with ReactDOM. Another useful feature of ReactDOM is ReactDOM.findDOMNode() which we can use to gain direct access to a DOM element.
- For everything else, there’s React. We use React to define and create our elements, for lifecycle hooks, etc. i.e. the guts of a React application.
49. What is the difference between array.map and array.forEach?
Answer: This simple question apparently causes a lot of issues 🙂 but the answer is very simple. While forEach executes a function for each element with the element as the function argument, the map does almost the same but it returns a new array with the results of the function replacing the item in each step. The new array is of the same size as the original array.
50. How would you structure a React application?
Answer: This is an open question with many possible answers. The basic structure is usually module or feature-based. We usually differentiate between UI and logic. There are many approaches to structure UI components with the most popular being atomic design. Data and business heavy applications use a more domain-driven approach. The ideal combination for larger applications is having the domain logic separate and having the UI logic in an atomic structure. All this can be combined in features which are rendered on pages.
51. Define ReactJs and Its features?
Answer: ReactJs is a front-end JavaScript library and provides a component-based approach that helps designers to build reusable components. React has the following listed features:
- React uses virtual DOM rather than real DOM,
- React uses Server-side rendering,
- Uni-directional data flow or data binding is used in React
Note: Browse latest React JS Interview Questions and Angular training videos. Here you can check Angular JS Online Training details and React Js Training Videos for self learning. Contact +91 988 502 2027 for more information.