Why is a component constructor called only once?

  • The constructor is called for each new instance of the component
  • The constructor is not needed in functional components
  • The constructor is not used in React components
  • The constructor is only called when the component is first created
In React, the constructor is called only once when the component is first created. This is because the constructor is used to initialize the component state and bind event handlers, and these operations only need to be performed once. After the component has been created, subsequent updates will use the "componentDidUpdate()" method to update the state and re-render the component.

What is the stable release for hooks support?

  • React 15
  • React 16
  • React 17
React Hooks were first introduced in React 16.8, and have been a stable feature of React since React 16.8.0. React 17 is the most recent stable release of React as of September 2021.

What is the lifecycle methods order in mounting?

  • componentDidMount, componentWillMount, componentWillReceiveProps
  • componentDidMount, componentWillReceiveProps, componentWillMount
  • componentWillMount, componentDidMount, componentWillReceiveProps
  • componentWillMount, componentWillReceiveProps, componentDidMount
The lifecycle methods for mounting a component in React are as follows: componentWillMount, render, componentDidMount. The "componentWillMount" method is called before the component is mounted to the DOM, "render" is called to render the component, and "componentDidMount" is called after the component is mounted to the DOM.

What is the benefit of styles modules?

  • Styles modules allow for dynamic styling with props
  • Styles modules allow you to use CSS with React components
  • Styles modules are required for server-side rendering
  • Styles modules prevent CSS class naming collisions
Styles modules in React allow you to avoid CSS class naming collisions by generating unique class names at runtime. This helps prevent conflicts with other styles in the project, and allows you to use descriptive class names without worrying about naming conventions.

How do you memoize a component?

  • Use the "React.memo" higher-order component
  • Use the "React.useMemo" hook
  • Use the "componentDidUpdate" lifecycle method
  • Use the "shouldComponentUpdate" lifecycle method
To memoize a component in React, you can use the "React.memo" higher-order component. This will prevent the component from re-rendering if the props have not changed. You can also use the "shouldComponentUpdate" lifecycle method or the "React.useMemo" hook to achieve similar results.

How do you make sure that user remains authenticated on page refresh while using Context API State Management?

  • Use cookies to store the authentication token
  • Store the authentication token in local storage
  • Use session storage to store the authentication token
  • Use a server-side session to store the authentication token
When using the Context API for state management in a React application, it is important to ensure that the user remains authenticated even if the page is refreshed. One way to do this is to store the authentication token in local storage, which persists even after the page is refreshed. This allows the application to retrieve the authentication token from local storage and use it to authenticate the user without requiring them to log in again.

What is strict mode in React?

  • A mode that disables certain security features
  • A mode that enables the use of experimental features
  • A mode that highlights potential problems in the code
  • A mode that improves performance by reducing unnecessary updates
Strict mode in React is a mode that highlights potential problems in the code, such as deprecated lifecycle methods or unsafe practices. It can help identify issues early on and improve the overall quality of the code. Strict mode can be enabled globally or for individual components.

What is the main goal of React Fiber?

  • To improve client-side rendering performance
  • To improve server-side rendering performance
  • To improve the debugging experience in React
  • To simplify the React API
The main goal of React Fiber is to improve client-side rendering performance. It does this by introducing a new algorithm for rendering updates that is more efficient and flexible than the previous algorithm. With React Fiber, React can break up large updates into smaller chunks, prioritize updates, and pause and resume updates as needed.

What is JSX?

  • A JavaScript syntax extension
  • A design pattern
  • A new programming language
  • A testing framework
JSX is a JavaScript syntax extension that allows developers to write HTML-like code in JavaScript. JSX is not required to use React, but it is commonly used because it makes writing and managing UI components easier.

How do you create HOC using render props?

  • By passing a function as a prop to the higher-order component
  • By returning a new component from the higher-order component
  • By using the withRenderProp() method
  • By using the createRenderProp() method
Higher-Order Components (HOCs) are a powerful pattern in React that allow developers to reuse code between components. HOCs can also be implemented using render props, which involves returning a new component from the higher-order component that renders the children using a function prop. This pattern is known as "render prop HOCs" and is a flexible and powerful way to share code between components.