In this, we will see more on React Interview Questions
What is React and explain major features of it?
React is an open-source frontend JavaScript library which is used to build user interfaces especially for single page applications. It is used for handling view layer for web and mobile applications.
- React uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
- React supports server-side rendering.
- React follows Unidirectional data flow.
- Uses reusable/composable UI components.
What is JSX?
JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically, it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
What are the advantages of React?
- Increases the application’s performance with Virtual DOM and less expensive.
- JSX makes code easy to read and write.
- It renders both on client and server side (SSR).
- Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
- Easy to write unit and integration tests with tools such as Jest.
What are the limitations of React?
- React is not a full framework, it’s just a view library.
- Requires additional configuration to integrate React into a traditional MVC framework.
- Too many smaller components leading to over whole boilerplate.
- With inline templating and JSX, code complexity increases.
What is Virtual DOM?
The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.
What is the difference between Shadow DOM and Virtual DOM?
The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The Virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
What is React Fiber?
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.
What is the difference between Element and Component?
| An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. | A component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output. |
What is state in React?
State is a private object and fully controlled by the component which is not accessible to any other component till the owner component decides to pass it. State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of state full components.
What are props in React?
Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component.
The primary purpose of props in React is to provide following component functionality:
- Pass custom data to your component.
- Trigger state changes.
- Use via this.props.reactProp inside component’s render() method.
What is children prop?
Children is a prop (this.props.children) that allow you to pass components as data to other components, just like any other prop you use. Component tree put between component’s opening and closing tag will be passed to that component as children prop.
What are Pure Components?
React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method. When props or state changes, PureComponent 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.
How to create components in React?
There are two ways to create a component in React: Functional and Class Components.
Function Components: Creating Functional components is simplest way to create a react component. Those are pure JavaScript functions that accept props object as first parameter and return React elements:
Class Components: You can also use ES6 class to define a component.
When to use a Class Component over a Function Component?
If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state, lifecycle methods and other features that were only available in class component right in your function component.
What are synthetic events in React?
SyntheticEvent is a cross-browser wrapper around the browser’s native event. It’s API is same as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
What are controlled components?
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.
What are uncontrolled components?
The Uncontrolled Components are the ones that store their 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.
What are the different phases of component lifecycle?
The component lifecycle has three distinct lifecycle phases:
- Mounting: The component is ready to mount in the browser DOM. This phase covers initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.
- Updating: In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.
- Unmounting: In this last phase, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.
What are the phases of DOM changes ?
- Render The component will render without any side-effects. This applies for Pure components and in this phase, React can pause, abort, or restart the render.
- Pre-commit Before the component actually applies the changes to the DOM, there is a moment that allows React to read from the DOM through the getSnapshotBeforeUpdate().
- Commit React works with the DOM and executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.
What are Higher-Order Components?
A higher-order component (HOC) is a function that takes a component and returns a new component. It’s a pattern that is derived from React’s compositional nature.
We call them pure components because they can accept any dynamically provided child component but they won’t modify or copy any behavior from their input components.
Why React uses className over class attribute?
React uses className instead of class because Class is a keyword in JavaScript and JSX is an extension of JavaScript. We can pass a string as the className prop.
Can you update props in React?
No. In React props should be immutable and top-down. Which means a parent can send any prop values to a child, but the child can’t modify received props.
Why can’t browsers read JSX?
JSX in not a regular JavaScript object, Browsers can only read JavaScript objects. To enable a browser to read JSX, We can use Babel to convert JSX file to JavaScript object and pass it to the browser.
What is the significance of keys in React?
DOM elements are identified by keys and their corresponding data is used to drive the user interface. As a result, all existing elements in the DOM are reused to optimize the rendering in React. Using these keys, React just reorders the elements rather than rendering them again, Which helps improving applications performance.
