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.

What is the purpose of render method of react-dom?

  • To render a React component to a canvas
  • To render a React component to a file
  • To render a React component to the client
  • To render a React component to the server
The render method of the react-dom package is used to render a React component to the client-side DOM. The render method takes two arguments: the component to render and the DOM element to render it to.

Give a simple example of Jest test case

  • testing a Redux reducer
  • testing an API call
  • testing a component's render method
A simple example of a Jest test case would be testing a component's render method. For example, you could test that a component renders a specific HTML element or that it correctly sets a state variable.

What is the purpose of forward ref in HOCs?

  • To forward props to child components
  • To forward the ref to child components
  • To wrap child components with additional functionality
  • To wrap child components with a higher-order component
Forwarding refs in Higher-Order Components (HOCs) is a technique for passing a ref from a parent component to its child components. This allows the child components to access the DOM node or React element that the ref is attached to. To forward a ref in an HOC, the HOC component should use the forwardRef() method to create a new component that can receive a ref. The new component can then be used to wrap the child components and pass the ref through to the child components.

How to conditionally apply class attributes?

  • Using the "class" attribute and a ternary operator
  • Using the "class" attribute and an if statement
  • Using the "className" attribute and a ternary operator
  • Using the "className" attribute and an if statement
In React, you can conditionally apply class attributes by using the "className" attribute and a ternary operator. This allows you to add or remove classes based on some condition, such as the state of the component. The "className" attribute is used instead of the "class" attribute in React, because "class" is a reserved keyword in JavaScript.

How Redux Form initialValues get updated from state?

  • initialValues are automatically synced with the Redux store
  • You need to manually update initialValues in the form component
  • initialValues are passed in as a prop to the form component
The initialValues prop in Redux Form is used to set the initial values for the form fields. You can pass in an object of initial values as the initialValues prop, which will be used to populate the form fields when the form is first rendered. The initialValues can be sourced from the Redux store, and can be updated by dispatching an action that updates the relevant values in the store. The form component will automatically update when the initialValues prop changes.

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(); }.