Which of the following is NOT true regarding error boundaries?

  • Error boundaries are defined using the try...catch statement.
  • Error boundaries can be nested within other error boundaries.
  • Error boundaries can replace the entire component tree.
  • Error boundaries catch errors in child components.
The statement "Error boundaries are defined using the try...catch statement" is NOT true. Error boundaries in React are defined using special error boundary components and not the traditional try...catch statement. Error boundaries use the componentDidCatch() method to catch errors in child components and provide a graceful way to handle them. They can also replace parts of the component tree but are not defined using traditional error-handling syntax.

In which type of components can you directly use the setState method?

  • Both class-based and functional components
  • Class-based components
  • Functional components with hooks
  • Neither class-based nor functional components
You can directly use the setState method in class-based components. Functional components with hooks use the useState hook instead to manage state. So, setState is typically associated with class-based components, and using it in functional components will result in an error.

Error Boundaries in React catch errors during the rendering phase in any component below them in the tree, but they do not catch errors inside ________.

  • Asynchronous code
  • Class components
  • Event handlers
  • Function components
Error Boundaries in React are designed to catch errors during rendering but do not catch errors that occur inside asynchronous code (e.g., in setTimeout or fetch callbacks) or event handlers. It's important to understand this limitation when using Error Boundaries to handle errors in your React applications.

To ensure specificity in CSS Modules without using deep selectors, one could use the :global ______.

  • :deep
  • :not-global
  • :global-selector
  • :module
In CSS Modules, the ":global-selector" can be used to ensure specificity without resorting to deep selectors. ":global-selector" allows you to define styles that are not scoped to a specific module, making them accessible globally. The other options are not valid constructs in CSS Modules.

How would you handle reconnecting to a Websocket server in a React application if the connection drops?

  • Use the componentDidMount lifecycle method to establish a new connection.
  • Implement a reconnect mechanism using the onclose event and backoff strategies.
  • Continuously retry connecting in a loop within the render method.
  • Ask the user to refresh the page to restore the connection.
When a Websocket connection drops in a React application, it's essential to implement a reconnect mechanism. Option 2 is the correct approach, using the onclose event and backoff strategies to establish a new connection. The other options are not recommended as they can lead to suboptimal user experiences or performance issues.

The ________ method allows you to manually determine if a component should re-render in response to a change in props or state.

  • componentDidMount
  • render
  • setState
  • shouldComponentUpdate
The shouldComponentUpdate method in React allows developers to manually determine whether a component should re-render in response to changes in props or state. This method returns a Boolean value - true if the component should re-render and false if it should not. It's a critical method for optimizing React components to avoid unnecessary rendering.

While rendering a list of items, you observed that adding a new item to the top causes a re-render of the entire list. What might be the likely cause of this issue?

  • Applying shouldComponentUpdate() to the list components
  • Incorrect use of React fragments
  • Missing unique keys in the list elements
  • Using React.memo() for list components
When adding a new item to a list in React, it's essential to provide unique keys to each list item using the "key" prop. If unique keys are missing or incorrectly assigned, React cannot efficiently identify which items have changed, and it may re-render the entire list. Using React.memo() can help optimize functional components, but it's unrelated to this specific issue. React fragments and shouldComponentUpdate() do not directly address the key issue.

In MobX, which feature allows you to track changes to your state?

  • Actions.
  • Decorators.
  • Observables.
  • Promises.
In MobX, you can track changes to your state using "Observables." Observables are the fundamental building blocks that enable you to automatically detect and track changes in your application state. Actions are used to modify state, decorators are used for defining computed properties, and Promises are typically used for handling asynchronous operations but do not directly track state changes.

How does Immutable.js ensure that data remains immutable?

  • By converting all data to primitive types.
  • By disallowing any updates or modifications to the data.
  • By creating copies of data objects whenever updates are made.
  • By using structural sharing and creating new objects for changes.
Immutable.js maintains data immutability by using structural sharing. When a change is made, a new object is created with the updated data, while the original data remains unchanged. This ensures immutability without the need for deep copying, making it more memory-efficient. The other options do not accurately describe how Immutable.js achieves data immutability.

In React Testing Library, to find an element by its role, you can use the query ________.

  • findByAttribute
  • findByElement
  • findByRole
  • queryByAttribute
In React Testing Library, to find an element by its role, you can use the query findByRole(). This query is especially useful when you want to locate elements based on their accessibility roles, such as finding buttons, links, or other interactive elements. It helps ensure your tests are more accessible and accurately represent how users interact with your React components.