What is the difference between Shadow DOM and Virtual DOM?

  • Shadow DOM is a browser feature, while Virtual DOM is a React feature
  • Shadow DOM is used for server-side rendering, while Virtual DOM is used for client-side rendering
  • Shadow DOM is used for styling and encapsulation, while Virtual DOM is used for performance optimization
  • There is no difference
Shadow DOM and Virtual DOM are two different concepts. Shadow DOM is a browser feature that allows developers to encapsulate styles and markup within components. Virtual DOM, on the other hand, is a React feature that allows for performance optimization by minimizing changes to the actual DOM.

Why should we not update the state directly?

  • It can cause memory leaks
  • It can cause race conditions
  • It can cause the application to crash
  • It can cause the component to re-render
In React, state should not be updated directly because it can cause the component to re-render improperly. Instead, the setState method should be used to update state, which triggers a re-render of the component and ensures that the updated state is properly reflected in the UI.

What are fragments?

  • A way to create custom HTML elements
  • A way to group multiple elements without adding an extra DOM node
  • An alternative to using HTML tags for styling
  • Special React components
Fragments are a way to group multiple elements without adding an extra DOM node. Fragments are useful when you want to return multiple elements from a component, but don't want to add an unnecessary container element to the DOM.

How events are different in React?

  • All the options
  • Events in React are synthetic events
  • React events are camelCase instead of lowercase
  • React events have a different API than native events
Events in React are different from native events in several ways. React events are synthetic events that are cross-browser compatible and have the same API across all browsers. React events are also camelCase instead of lowercase (e.g. onClick instead of onclick). Finally, React events have a different API than native events, including the ability to call preventDefault and stopPropagation on the event object.

sWhat are HOC factory implementations?

  • Higher-order components that return a function
  • Higher-order components that return a component
  • Higher-order components that are used to create other higher-order components
HOC factory implementations are higher-order components that return a function. This function can then be used to create a new higher-order component that has a specific set of props or behavior. This can be useful for creating reusable HOCs that can be customized for specific use cases. For example, you could create a withData HOC factory that takes a data source as an argument and returns a HOC that fetches and passes data to the wrapped component.

How do you use contextType?

  • By passing the context value as a prop
  • By using the useContext() hook
  • By assigning the contextType property in the class definition
  • By creating a context consumer
The contextType property is used to consume a context value in a class component in React. To use contextType, you assign the context object to the contextType property in the class definition. This allows the component to access the context value using the this.context property. ContextType can only be used with a single context object and can only be used in class components.

What is the purpose of default value in context?

  • To provide a fallback value when a context value is not available
  • To override the context value in child components
  • To provide a default value for the context provider
  • To prevent child components from accessing the context value
The default value in context is used to provide a fallback value when a context value is not available. When a component consumes a context value, it looks for the context value in its ancestors. If no ancestor provides a value, the default value is used instead. The default value is typically used as a fallback or to provide a default value for the context.

What are error boundaries in React v16?

  • A way to create dynamic forms
  • A way to handle errors in React components
  • A way to optimize rendering performance
  • A way to render components outside the normal DOM
Error boundaries are a way to handle errors in React components. In React v16, error boundaries are special components that catch and handle errors that occur during rendering. This can help prevent the entire application from crashing due to an error in a single component.

How do you apply vendor prefixes to inline styles in React?

  • Use the "autoprefixer" library with CSS-in-JS
  • Use the "postcss" library with a custom plugin
  • Use the "react-prefixer" library with inline styles
  • Use the "react-style-prefixer" library with inline styles
In React, you can apply vendor prefixes to inline styles by using the "react-style-prefixer" library. This library automatically adds vendor prefixes to CSS properties based on the browser's user agent, and can be used with inline styles or CSS-in-JS solutions like styled-components or emotion.

Is it recommended to use CSS In JS technique in React?

  • Yes, it is a best practice
  • No, it is not recommended
  • It depends on the project requirements
The decision to use CSS in JS is largely dependent on the specific project requirements and the preferences of the development team. CSS in JS can offer certain benefits, such as better modularity and encapsulation of styles, but it may not be the best choice for every project.