React - https://github.com/sudheerj/reactjs-interview-questions
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. - Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, 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 the difference between HTML and React event handling?
- In HTML, the event name should be in lowercase. Whereas in React it follows camelCase convention: - In HTML, you can return false to prevent default behavior. Whereas in React you must call preventDefault() explicitly
How Virtual DOM works?
1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation. 2. Then the difference between the previous DOM representation and the new one is calculated. 3. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.
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. For example, to write all the names in uppercase letters, we use handleChange as below, handleChange(event) { this.setState({value: event.target.value.toUpperCase()}) }
What are "key" props and what is the benefit of using them in arrays of elements?
A key is a special string attribute you should include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. - Note: using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state.
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. (Not the case with Hooks)
What is the difference between createElement and cloneElement?
JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.
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 Pure Components?
React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. 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.
What are forward refs?
Ref forwarding is a feature that lets some components take a ref they receive, and pass it further down to a child.
What is state in React?
State of a component is an object that holds some information that may change over the lifetime of the component. State is similar to props, but it is private and fully controlled by the component. i.e, It is not accessible to any component other than the one that owns and sets it.
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 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 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 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 are the major features of React?
The major features of React are: - It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive. - Supports server-side rendering. - Follows Unidirectional* data flow or data binding. - Uses reusable/composable UI components to develop the view.
What is the use of refs?
The ref is used to return a reference to the element. They should be avoided in most cases, however, they can be useful when you need direct access to the DOM element or an instance of a component.
How to create refs?
Use React.createRef() or use ref callbacks approach
Why should we not update the state directly?
it won't re-render the component. Instead use setState() method. It schedules an update to a component's state object.
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.
