What is the difference between Flow and PropTypes?

  • Flow is a type checking tool for JavaScript, while PropTypes is a runtime type checking library
  • Flow and PropTypes are the same thing
  • PropTypes is a type checking tool for JavaScript, while Flow is a runtime type checking library
  • PropTypes is a runtime validation library for React components
The main difference between Flow and PropTypes is that Flow is a type checking tool for JavaScript that checks types at compile-time, while PropTypes is a runtime type checking library for React components that checks types at runtime. Flow is particularly useful in large codebases where it can be difficult to keep track of all the variables and function calls, while PropTypes is useful for catching errors in React components at runtime.

What is suspense component?

  • A component for handling errors in React
  • A component for delaying rendering in React
  • A component for handling lazy loading in React
  • A component for handling forms in React
The suspense component is a component for delaying rendering in React. The suspense component allows components to wait for asynchronous data to load before rendering, improving the user experience and reducing loading times. The suspense component is typically used with code splitting and lazy loading to enable on-demand loading of code.

Why ReactDOM is separated from React?

  • To improve performance and reduce bundle size
  • To provide a more modular architecture for React
  • To support different rendering targets, such as mobile devices or game engines
  • To support server-side rendering in Node.js
ReactDOM is separated from React in order to improve performance and reduce the bundle size of React applications. Separating the rendering logic from the component logic allows for more efficient updates and reduces the amount of JavaScript that needs to be downloaded by the client. This separation also allows for easier integration with other rendering targets, such as native mobile apps or desktop applications.

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.

What are Keyed Fragments?

  • A way to group elements without adding extra nodes to the DOM
  • A type of encryption used in React components
  • A method for optimizing the rendering of large lists in React
  • A component that can be used to render fragments in React
Keyed Fragments are a feature in React that allows elements to be grouped together without adding extra nodes to the DOM. This can improve performance and reduce the complexity of the component hierarchy. Keyed Fragments are created by using the element and adding a unique key prop to each child element.

What is Relay?

  • A type checking tool for JavaScript
  • A library for managing forms in React applications
  • A library for managing network requests in React applications
  • A state management library for React
Relay is a library for managing network requests in React applications. It is often used in conjunction with GraphQL APIs and provides a number of features for managing data fetching and caching, such as automatic batching, optimistic updates, and pagination. Relay also provides a way to declare data dependencies for your components, which can help to reduce unnecessary re-renders.

How to prevent component from rendering?

  • By using the shouldComponentUpdate lifecycle method
  • By using the componentDidUpdate lifecycle method
  • By using the componentWillMount lifecycle method
  • By using the componentWillReceiveProps lifecycle method
In React, components can be prevented from rendering unnecessarily by using the shouldComponentUpdate() lifecycle method. By implementing this method, components can determine whether an update is necessary before rendering. This can help improve performance by minimizing the number of unnecessary re-renders.

What are Redux selectors and why to use them?

  • Functions that transform Redux state into a more useful format
  • A feature of React that allows you to select DOM elements
  • A way to handle asynchronous actions in Redux
  • A tool for debugging Redux applications
Redux selectors are functions that transform the Redux state into a more useful format for the application. They allow you to abstract the details of the state shape and provide a simpler interface for accessing and manipulating the state. This helps to keep the code more maintainable and reduces the risk of bugs when the state shape changes.