Make React resilient to DOM mutations from Google Translate
Problem
Coming from search? See workaround here: https://github.com/facebook/react/issues/11538#issuecomment-417504600. And star this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=872770. *Do you want to request a feature or report a bug? Bug, though there's a decent chance it's a Chrome/Google Translate one What is the current behavior? When using Google Translate on a page using React 16, a certain code pattern produces a Javascript error (`Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.`) when the rendered content changes. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/). (This has only been checked on macOS 10.13.1) 1. Navigate to https://qq49kwjynj.codesandbox.io/ in a Chrome browser set to some language other than Japanese. 2. Right click the page and select "Translate to English" 3. Click the checkbox, and the error will show. The source of the example can be found at https://codesandbox.io/s/qq49kwjynj The part of the code that seems to cause it is the following two lines: [code block] Changing this to the following fixes the behavior with Google Translate: [code block] What is the expected behavior? It should not produce an error. Which versions of React, and which browser / OS are affected b
Error Output
error (`Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.`) when the rendered content changes.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix React DOM Mutation Error with Google Translate
The error occurs due to Google Translate modifying the DOM in a way that conflicts with React's reconciliation process. Specifically, when React attempts to remove a child node that has already been altered or removed by Google Translate, it throws an error because the node is no longer a child of the expected parent. This is exacerbated by the timing of updates and the way Google Translate interacts with the DOM.
Awaiting Verification
Be the first to verify this fix
- 1
Identify the problematic code
Locate the section of your React component where the error is triggered. This typically involves state updates that lead to re-renders and DOM manipulations.
javascriptconst [data, setData] = useState(initialData); - 2
Implement a cleanup function
Add a cleanup function in the useEffect hook to ensure that any DOM nodes are properly handled before the component unmounts or updates. This helps to prevent React from trying to manipulate nodes that may have been altered by Google Translate.
javascriptuseEffect(() => { return () => { /* cleanup logic here */ }; }, [data]); - 3
Use a key prop for dynamic elements
Ensure that any dynamically rendered elements have a unique key prop. This helps React identify which items have changed, are added, or are removed, reducing the chances of DOM conflicts.
javascript<div key={item.id}>{item.content}</div> - 4
Debounce state updates
Implement debouncing for state updates that trigger re-renders. This can help mitigate rapid changes in the DOM that may lead to conflicts with Google Translate's modifications.
javascriptconst debouncedSetData = useCallback(debounce(setData, 300), []); - 5
Test the changes
After implementing the above changes, test the application by navigating to the page, using Google Translate, and ensuring that no errors occur during the translation process.
javascriptconsole.log('Testing completed, no errors should appear.');
Validation
Confirm that the error no longer appears when using Google Translate on the page. Additionally, check that the application behaves as expected without any visual glitches or performance issues.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep