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.
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.
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 { ... }.
Does React support all HTML attributes?
- Yes, React supports all HTML attributes
- No, React only supports a subset of HTML attributes
React supports a subset of HTML attributes, as not all attributes are applicable or relevant to React components. Some HTML attributes, such as "class" and "for", are reserved words in JavaScript and cannot be used directly in JSX. Instead, React uses the "className" and "htmlFor" attributes, respectively. Additionally, some HTML attributes may have different names or syntax in React, such as "tabindex" being spelled "tabIndex" in React.
What is the purpose of ReactTestUtils package?
- To generate test data
- To mock HTTP requests
- To simulate component rendering without deep rendering
- To test React components
The ReactTestUtils package provides a set of utilities for testing React components. It allows developers to simulate events, perform component rendering, and find components in the rendered output. It is commonly used in combination with Jest or another testing framework.
What is "key" prop and what is the benefit of using it in arrays of elements?
- A prop that determines the order of elements in an array
- A prop that provides a unique identifier for each element in an array
- A prop that specifies the position of an element in an array
- A prop that specifies the type of each element in an array
The "key" prop in React is a special prop that provides a unique identifier for each element in an array of elements. It is used to optimize the performance of rendering by allowing React to identify which elements have changed, and to update only those elements instead of re-rendering the entire list. The "key" prop should be a unique and stable identifier for each element, such as an ID or index.
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 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 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 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.
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.
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.