What are loadable components?

  • A component that loads data asynchronously
  • A component that loads other components asynchronously
  • A component that loads itself asynchronously
  • A component that loads CSS stylesheets asynchronously
Loadable components are a way to load other components asynchronously in React. Loadable components allow components to be split into smaller chunks and loaded on-demand, improving performance and reducing initial load times. Loadable components are typically used with dynamic imports to enable asynchronous loading of code.

What are Higher-Order components?

  • Components that are used for server-side rendering
  • Components that enhance the behavior of other components
  • Components that render other components
  • Components that use the shouldComponentUpdate() method
Higher-Order components (HOCs) are components that enhance the behavior of other components by adding additional functionality or props. HOCs take a component as input and return a new component that includes the additional behavior. This allows developers to reuse code and separate concerns in their applications.

What is redux-saga?

  • A middleware library for Redux
  • A tool for code splitting in React
  • A data visualization library for Redux
redux-saga is a middleware library for Redux that allows you to handle side effects, such as asynchronous data fetching or complex state updates, in a declarative and testable way. It uses ES6 Generators to provide a more readable and maintainable way to handle complex logic in your Redux application.

What are forward refs?

  • A way to declare and initialize a component's state
  • A way to forward refs from parent components to child components
  • A way to pass props down to child components
  • A way to pass state up to parent components
Forward refs are a way to pass a ref from a parent component to a child component. This allows the parent component to access and manipulate the child component's DOM node. Forward refs are created using the React.forwardRef() function.

Is it mandatory to define constructor for React component?

  • Yes, it is mandatory for all React components
  • No, it is only necessary if the component needs to set its initial state or bind methods to the component
  • No, it is only necessary if the component has props
It is not mandatory to define a constructor for a React component. If the component does not need to set its initial state or bind methods to the component, the constructor can be omitted. Additionally, if the component does not have any props, a constructor is not necessary.

How to import and export components using react and ES6?

  • Use the "export" keyword to export components
  • Use the "import" keyword to import components
  • Use the "module.exports" object to export components
  • Use the "require" keyword to import components
In React and ES6, you can import and export components using the "import" and "export" keywords. To import a component, you can use the "import" keyword followed by the component name and file path. To export a component, you can use the "export" keyword before the component declaration. For example: import React from 'react'; export class MyComponent extends React.Component { ... }.

Why is isMounted() an anti-pattern and what is the proper solution?

  • It can lead to race conditions and bugs
  • It causes performance issues
  • It is not needed in modern versions of React
  • It is not supported in React v16
The "isMounted" method in React is considered an anti-pattern because it can lead to race conditions and bugs. This method checks if the component is mounted to the DOM, but it can return a false positive if it is called during the unmounting phase. The proper solution is to use the "componentDidMount" and "componentWillUnmount" lifecycle methods to manage component state and cleanup.

Why should component names start with capital letter?

  • It ensures proper scoping of the component
  • It improves the performance of the component
  • It is a convention that makes the code easier to read
  • It is a requirement of the React compiler
In React, component names should start with a capital letter in order to distinguish them from regular HTML tags and make the code easier to read. This is a convention that is widely used in the React community and helps developers understand the purpose and scope of different parts of the code.

How to set state with a dynamic key name?

  • By using the setState() method with a variable key name
  • By using the this.context object with a variable key name
  • By using the this.props object with a variable key name
  • By using the this.state object with a variable key name
To set state with a dynamic key name, you can use the setState() method with a variable key name. This allows you to create new state keys based on user input or other dynamic data.

Why do you not require to use inheritance?

  • React components use composition
  • Inheritance is not supported in React
  • React components use mixins instead
  • Inheritance is deprecated in React
React components use composition rather than inheritance to build complex UI components. Composition allows components to be composed of multiple smaller components, each with their own logic and behavior. This makes components more reusable and easier to manage than inheritance-based approaches.