“NotFoundError: Failed to execute ‘removeChild’ on ‘Node'” when using React.Fragment <> with Chrome extension which does not modify the DOM tree below the root div of the React app in Facebook React
Explanation of the problem
The current behavior of the system is that when using the Chrome extension TransOver (https://chrome.google.com/webstore/detail/transover/aggiiclaiamajehmlfpkjmlbadmkledi?hl=en) to translate text on hover, an error is encountered when using React fragments. The error “NotFoundError: Failed to execute ‘removeChild’ on ‘Node'” is logged in the browser’s console when hovering over the “Loading…” text in a minimal example of a movie app that utilizes React fragments. This can be observed in the code sandbox “magical-grass-016kc” (https://codesandbox.io/s/magical-grass-016kc) and is demonstrated in a streamable video (https://streamable.com/4gxua).
The expected behavior is for the system to function as it does in the code sandbox “heuristic-lake-exxvu” (https://codesandbox.io/s/heuristic-lake-exxvu), where the TransOver extension works as expected and does not cause any errors. In this example, a div element is used instead of a React fragment. The TransOver extension appends to the body element and does not modify the React’s root div nor does it append elements below it. Therefore, it is expected that the code in the React fragment example (magical-grass-016kc) should behave the same and work as in “heuristic-lake-exxvu”.
Troubleshooting with the Lightrun Developer Observability Platform
Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
- Instantly add logs to, set metrics in, and take snapshots of live applications
- Insights delivered straight to your IDE or CLI
- Works where you do: dev, QA, staging, CI/CD, and production
Start for free today
Problem solution for “NotFoundError: Failed to execute ‘removeChild’ on ‘Node'” when using React.Fragment <></> with Chrome extension which does not modify the DOM tree below the root div of the React app in Facebook React
The problem being discussed is that an issue has occurred in a project that involves the use of a t() function. It is not specified what the exact issue is, but it is suggested that it might be related to the t() function. This issue is caused by using Google Translate from Chrome, which causes unexpected errors to occur.
One possible cause of this issue is that the Chrome browser is modifying the DOM of the web page and causing conflicts with the t() function. Google Translate uses machine learning algorithms to translate the text on a web page, and it does so by modifying the DOM of the web page and replacing the original text with the translated text. This modification of the DOM can cause conflicts with the t() function in the project and lead to unexpected errors.
The proposed solution is to disable the translation feature of Google Translate by setting the “translate” attribute of the HTML element to “no”. This can be done by adding the following code to the HTML file: <html translate="no">. This will prevent the Chrome browser from modifying the DOM and causing conflicts with the t() function. This solution also allows the user to use the t() function without any interference from the Chrome browser.
Other popular problems with React
Problem: Handling state updates in complex components
One of the most common problems faced when working with React is handling state updates in complex components. This can occur when a component has a large number of child components that depend on a particular state, and updating that state can cause a large number of re-renders.
Solution:
One solution to this problem is to use the useMemo hook to memoize the state, which prevents unnecessary re-renders. The following code block shows an example of how to use the useMemo hook to memoize a state:
const memoizedState = useMemo(() => myState, [myState])
Problem: Managing the lifecycle of a component
Another problem that can occur when working with React is managing the lifecycle of a component. This can be especially difficult when working with components that need to fetch data or perform other tasks before they are rendered.
Solution:
One solution to this problem is to use the componentDidMount lifecycle method to perform these tasks, as shown in the following code block:
class MyComponent extends React.Component {
componentDidMount() {
// fetch data or perform other tasks
}
render() {
// render component
}
}
Problem: Handling errors in a component
React components can throw errors during their lifecycle, and it is important to handle these errors properly to ensure that the application does not break.
Solution:
One way to handle errors in a React component is to use the componentDidCatch lifecycle method, as shown in the following code block:
class MyComponent extends React.Component {
componentDidCatch(error, info) {
// handle error
}
render() {
// render component
}
}
This method allows you to catch errors that are thrown during the rendering of a component and its children, and handle them accordingly. It is important to handle errors in a way that will not cause the application to crash and will provide an appropriate fallback.
It’s worth noting that React has evolved since its launch and most of the above solutions are not the recommended approach anymore and they are replaced by other methods such as useEffect, useContext, useReducer and others. It is always a good idea to check the official documentation of React for the best practices and solutions.
A brief introduction to React
Facebook React is a JavaScript library for building user interfaces. It allows developers to build reusable components that can be easily composed to create complex user interfaces. React uses a virtual DOM (Document Object Model) which optimizes the performance by minimizing the amount of changes made to the actual DOM. This allows for efficient updates and re-renders of components, making it particularly well-suited for building large, complex web applications. React also provides a number of hooks, which are functions that allow developers to use state and lifecycle methods in functional components, making it easier to manage component state and behavior.
React uses a component-based architecture, where each component represents a small, self-contained piece of the user interface. This makes it easy to understand and reason about the structure of a React application. React also allows for easy integration with other libraries and frameworks through its component-based approach. This allows developers to use React in a variety of different environments and to easily integrate with other technologies such as webpack, babel, and Redux. Additionally, React supports server-side rendering, which improves the performance and SEO of the application.
Most popular use cases for React
- Building complex web applications: React is a powerful tool for building large, complex web applications. It allows developers to create reusable components that can be easily composed to create complex user interfaces. React’s virtual DOM provides efficient updates and re-renders, making it well-suited for building high-performance applications. The following code block shows an example of a simple React component that displays a list of items:
function ItemList({ items }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
- Building reusable and maintainable components: React is designed to encourage the development of reusable and maintainable components. By breaking down an application into small, self-contained components, it becomes easier to understand and reason about the structure of the application. This makes it easy to add new features, fix bugs, and make changes to the application, making it easier to maintain in the long term.
- Building cross-platform applications: React can be used to build cross-platform applications that run on web, mobile, and desktop. React Native allows developers to use React to build native mobile applications for iOS and Android. React Native uses the same concepts as React, but it uses native components instead of web components. Additionally, React can be used with Electron to build cross-platform desktop applications. This allows developers to share the same codebase across different platforms and reduces the development time and effort
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.