Tengo un ParentComponent con este aspecto:

 const ParentComponent = () => { [product, setProduct] = useState({ name: "Test", description: "Information goes here..." }) return( <ChildComponent product={product} updateProduct={setProduct}/> ); }

y un ChildComponent de la siguiente manera:

 const ChildComponent = ({product, updateProduct}) => { // some code here return( <RichTextEditor content={product.description} update={updateProduct}/> ) } const isEqual = () => { return true; // I want to force the component to never re-render } export default React.memo(ChildComponent, isEqual)

Lo que sucede aquí es que tengo un objeto de product con una descripción que ChildComponent actualiza. El valor de la descripción se establece a través updateProduct cada vez que cambia la entrada en el componente RichTextEditor . Entiendo que debido al cambio de estado del product ChildComponent se vuelve a representar cada vez, lo cual es desafortunado porque puede causar efectos no deseados, como hacer que el campo de entrada dentro de RichTextEditor pierda el foco, por ejemplo. Así que traté de obligar a ChildComponent a que nunca se volviera a renderizar con mi función isEqual que siempre devuelve verdadero. Sin embargo, sigue volviendo a renderizarse, ¿por qué es eso?

Me doy cuenta de que hay otros diseños disponibles para evitar este problema por completo, y probablemente lo haré de todos modos, pero antes de hacerlo, quiero entender por qué no puedo obligar a ChildComponent a no volver a renderizar.