Download React Interview Questions and Answers (2025) and more Exams Web Application Development in PDF only on Docsity!
Interview Questions with 100%
Correct Answers | Latest Version 202 5 |
Verified
What is React? - ✔✔React is a frontend JS library developed by FB in 2011. It is component based which helps in building reusable UI components. Features of React - ✔✔Virtual DOM Server Side Rendering Unidirectional Data Flow Advantages of React (5) - ✔✔
- Increases Application Performance
- Can be used conveniently on the client as well as server side.
- Code readability increases because of JSX.
- React is easy to integrate with other frameworks.
- Writing UI test cases becomes extremely easy. Limitations of React (4) - ✔✔
- Just a library
- Very large and hard to understand
- It can be difficult for novice programmers to understand.
- Coding gets complex as it uses inline templating and JSX. What is JSX? - ✔✔JSX is shorthand for JS XML. Makes it really easy to understand. Explain Virtual DOM - ✔✔Virtual DOM is a lightweight JS object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React's render function creates a node tree out of the React components. It then updates the
tree in response to the mutations in the data. Real DOM will be updated with only the things that have changed. Real DOM vs Virtual DOM - ✔✔Real DOM
- Slow to update
- Directly update HTML
- Creates new DOM if element updates.
- DOM manipulation is expensive
- Memory Waste Virtual DOM
- Updates faster
- Cannot directly update HTML
- Updates the JSX is element updates
- DOM manipulation is easy
- No memory wastage. Why can't browsers read JSX? - ✔✔Browsers can read JS objects but JSX is not a regular JS object. We need to transform the JSX file into a JS object using JSX transformers like Babel and then pass it to the browser. How different is React's ES6 syntax when compared to ES5? - ✔✔require vs import export vs exports component and function props state React vs Angular - ✔✔React Only the view SSR
); } } class Header extends React.Component{ render(){ return Header Component }; } ReactDOM.render( , document.getElementById('content') ); What is Props? - ✔✔Shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components through out the application. What is state in React and how is it used? - ✔✔States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state(). Differentiate between states and props. - ✔✔Conditions, State, Props
- Receive initial value from parent
- Parent component can change value
- Set default values inside component
- Changes inside component
- Set initial value for child components
- Changes inside child components.
How can you update the state of a component? - ✔✔this.setState() What is an arrow function in React? How is it used? - ✔✔Arrow functions are more of brief syntax for writing the function expression. They are also called 'fat arrow' functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions. //General way render() { return(
); } //With Arrow Function render() { return( this.handleOnChange(e) } /> ); } Stateful vs Stateless Components - ✔✔Stateful Component Stateless Component
- Stores info about component's state change in memory 1. Calculates the internal state of the components
- Have authority to change state 2. Do not have the authority to change state
- Contains the knowledge of past, current and possible future changes in state 3. Contains no knowledge of past, current and possible future state changes
- Stateless components notify them about the requirement of the state change, then they send down the props to them. 4. They receive the props from the Stateful components and treat them as callback functions.
How do you create an event in React? - ✔✔class Display extends React.Component({ show(evt) { // code }, render() { // Render the div with an onClick prop (value is a function) return ( Click Me! ); } }); What are synthetic events in React? - ✔✔Synthetic events are the objects which act as a cross-browser wrapper around the browser's native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers. What do you understand by refs in React? - ✔✔Refs it the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components. List some of the cases when you should use Refs. - ✔✔When you need to manage focus, select text, or media playback. To trigger imperative animations. Integrate with third part DOM libraries. How do you make React code modular? - ✔✔We can modularize code by using the export and import properties. They help in writing the components separately in different files. How are forms created in React? - ✔✔React forms are similar to HTML forms. But in React, the state is contained in the state property of the component and is only updated via setState(). Thus the elements
cannot directly update their state and their submission is handled by a JS function. This function has full access to the data that is entered by the user into a form. handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return (
Name:
); } Controlled Components - ✔✔1. Do not maintain their own state.
- Data is controlled by parent component.
- They take in the current values through props and then notify the changes via callbacks. Uncontrolled Components - ✔✔1. Maintain their own state
- Data is controlled by the DOM.
- Refs are used to get their current values. What are Higher Order Components. - ✔✔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 wraps
What are the three principles that Redux follows? - ✔✔i. Single source of truth. The state of the entire application is stored in an object/state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. ii. State is read-only: The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data. iii. Changes are made with pure functions: In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depend solely on the values of their arguments. What do you understand by Single Source of Truth? - ✔✔Redux uses the Store for storing the application's entire state in one place. So all the component's state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application. List down the components of Redux - ✔✔1. Action - object that describes what happened.
- Reducer - place to determine how the state will change.
- Store - State / Object tree of the entire application is saved in the Store.
- View - Displays the data provided by the Store. How are Actions defined in Redux? - ✔✔Actions in React must have a type 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. Below is an example of Action and Action Creator. Explain the role of Reducer - ✔✔Reducers are pure functions which specify how the application's state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done. What is the significance of Store in Redux? - ✔✔A store is a JS object which can hold the application's state and provide a few helper methods to access the state, dispatch actions and register listeners. The entire state/object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.
How is Redux different from Flux? - ✔✔Flux - The store contains state and change logic React - Store and change logic are separate F - Multiple store R - Only one store F - All stores are disconnected and flat R - Single store with hierarchical reducers F - Singleton dispatcher R - No concept of dispatcher F - React components subscribe to the store R - Container components utilize connect F - State is mutable R - State is immutable What are the advantages of Redux? - ✔✔Predictability of outcome Maintainability - Code becomes easier to maintain with a predictable outcome and strict structure. Server Side Rendering - 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 Community - Huge community Easy of testing because small, pure, and isolated Organization - Redux is precise about how code should be organized What is React Router? - ✔✔Built on top of React, which helps in adding new screens and flows to the application. This keeps the URL in sync with data that's being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web apps. Why is the switch keyword used in React Router v4? - ✔✔Although a is used to encapsulate multiple routes inside the Router. The switch keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The What does shouldComponentUpdate do and why is it important? - ✔✔Above we talked about reconciliation and what React does when setState is called. What shouldComponentUpdate does it it's a lifecycle method that allows us to opt out of this reconciliation process for certain components (and their child components). Why would we ever want to do this? As mentioned above, "The end goal of reconciliation is to, in the most efficient way possible, update the UI based on new state". If we know that a certain section of our UI isn't going to change, there's no reason to have React go through the trouble of trying to figure out if it should. By returning false from shouldComponentUpdate, React will assume that the current component, and all its child components, will stay the same as they currently are. How do you tell React to build in Production mode and what will that do? - ✔✔Typically you'd use Webpack's DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and extra warnings. On top of that, it's also a good idea to minify your code because React uses Uglify's dead-code elimination to strip out development only code and comments, which will drastically reduce the size of your bundle. Why would you use React.Children.map(props.children, () => ) instead of props.children.map(() => ) - ✔✔Not guaranteed that props.children will be an array. Inside of Parent if we were to try to map over children using props.children.map it would throw an error because props.children is an object, not an array. React only makes props.children an array if there are more than one child elements, like this Inside of Parent if we were to try to map over children using props.children.map it would throw an error because props.children is an object, not an array. React only makes props.children an array if there are more than one child elements, like this Describe how events are handled in React. - ✔✔In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React's cross-browser wrapper around the browser's native event. These synthetic events have the same interface as native events you're used to, except they work identically across all browsers.
What's mildly interesting is that React doesn't actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn't need to worry about keeping track of event listeners when updating the DOM. What is the difference between createElement and cloneElement? - ✔✔createElement is what JSX gets transpiled to and is what React uses to create React Elements (object representations of some UI). cloneElement is used in order to clone an element and pass it new props. They nailed the naming on these two. What is the second argument that can optionally be passed to setState and what is its purpose? - ✔✔A callback function which will be invoked when setState has finished and the component is re-rendered. Something that's not spoken of a lot is that setState is asynchronous, which is why it takes in a second callback function. Typically it's best to use another lifecycle method rather than relying on this callback function, but it's good to know it exists. What is wrong with this code? this.setState((prevState, props) => { return { streak: prevState.streak + props.count } }) - ✔✔Nothing is wrong with it. It's rarely used and not well known, but you can also pass a function to setState that receives the previous state and props and returns a new state, just as we're doing above. And not only is nothing wrong with it, but it's also actively recommended if you're setting state based on previous state. What is Children? - ✔✔In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed to components automatically as a special prop: props.children. There are a number of methods available in the React API to work with this prop. These include React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.
