What is route based code splitting?

  • Splitting code based on component hierarchy
  • Splitting code based on component state
  • Splitting code based on component location
  • Splitting code based on component size
Route-based code splitting is a technique for splitting code based on the location of the component in the application. Route-based code splitting allows components to be loaded on-demand based on the user's navigation, reducing the initial load time of the application. Route-based code splitting is typically used with libraries like React Router to enable on-demand loading of code.

How to use InnerHtml in React?

  • Use the HTML component
  • Use the InnerHtml component
  • Use the dangerouslySetInnerHTML prop
  • Use the innerHTML attribute
In React, you can use the dangerouslySetInnerHTML prop to set the inner HTML of a component. The dangerouslySetInnerHTML prop is used to bypass React's built-in sanitization and allow arbitrary HTML to be injected into a component. However, this should be used with caution, as it can pose a security risk.

Can I use javascript urls in react16.9?

  • Yes
  • No
JavaScript URLs are not allowed in React16.9 or any modern web development framework due to security concerns. JavaScript URLs are URLs that begin with "javascript:", and they allow for the execution of arbitrary JavaScript code when clicked. This can be used for malicious purposes, such as stealing user data or injecting malware. Instead of using JavaScript URLs, developers should use event handlers and other safe mechanisms to handle user interactions.

What is the difference between constructor and getInitialState?

  • There is no difference, they both initialize component state
  • constructor is called before getInitialState
  • constructor is used in ES6 classes, while getInitialState is used in ES5 classes
  • getInitialState is only used in functional components
The "constructor" method and "getInitialState" method are both used to initialize the state of a component in React, but they are used in different class styles. The "constructor" method is used in ES6 classes, while "getInitialState" is used in ES5 classes. In general, it is recommended to use the "constructor" method in modern React code.

What are Pure Components?

  • Components that implement shouldComponentUpdate
  • Components that only have a render method
  • Components that use the React.Pure API
  • Components that use the useMemo hook
Pure components in React are components that implement the shouldComponentUpdate lifecycle method to improve performance. This method compares the current props and state to the next props and state, and determines whether the component needs to be re-rendered. If the props and state have not changed, the component can skip the rendering process.

How Virtual DOM works?

  • It creates a new DOM tree on each update
  • It updates only the changed parts of the actual DOM
  • It updates the Virtual DOM and calculates the most efficient way to update the actual DOM
  • It updates the actual DOM directly
When a component's state changes in React, it updates the Virtual DOM and calculates the most efficient way to update the actual DOM based on the differences between the two versions. This approach minimizes the number of changes that need to be made to the actual DOM and improves performance.

How JSX prevents Injection Attacks?

  • By using string concatenation
  • By using a virtual DOM
  • By escaping special characters
  • By using JavaScript eval() function
JSX prevents injection attacks by escaping special characters. When JSX is compiled, special characters are automatically escaped, preventing them from being interpreted as code. This helps to prevent XSS (cross-site scripting) attacks.

How you use decorators in React?

  • Use them as HOCs
  • Use them as class decorators
  • Use them as event handlers
  • Use them as function decorators
Decorators in React can be used as class decorators to add functionality to a component class. For example, you can use a decorator to add additional lifecycle methods or state to a component. Decorators can be written as higher-order components (HOCs) or as regular functions.

How React PropTypes allow different type for one prop?

  • PropTypes does not allow different types for one prop
  • You need to define separate PropTypes for each type
  • You can use PropTypes.oneOfType()
You can use PropTypes.oneOfType() to allow a prop to have multiple possible types. For example, you can define a prop that can be either a string or a number like this: 'myProp: PropTypes.oneOfType([PropTypes.string, PropTypes.number])'. This will allow the prop to accept values of either type, and will throw a warning if a value of a different type is passed in.

How to focus an input element on page load?

  • Use the autoFocus attribute on the input element
  • Use the focus() method in componentDidMount()
  • Use the onFocus() event in the render method
  • Use the onLoad() event on the body element
In React, you can focus an input element on page load by using the "focus()" method in the "componentDidMount()" lifecycle method. This will set the focus to the input element after the component has been mounted in the DOM. For example: componentDidMount() { this.myInput.focus(); }.