Mientras investigaba un problema de rendimiento, descubrí que al desestructurar accesorios dentro de un componente, en realidad estoy activando una nueva representación. Esto no sucede si estoy usando props.propName o si estoy desestructurando el objeto props directamente en los parámetros del componente:

 // Rerendering const StatefulLayout = (props) => { const {isLoading, requestFn, initializationArray} = props useEffect(() => { requestFn(initializationArray); }, [initializationArray]); if (isLoading) { return <PageLoading />; } return ( <Layout> <React.Fragment>{children}</React.Fragment> </Layout> );

 // Not rerendering const StatefulLayout = ({ isLoading, requestFn, initializationArray }) => { useEffect(() => { requestFn(initializationArray); }, [initializationArray]); if (isLoading) { return <PageLoading />; } return ( <Layout> <React.Fragment>{children}</React.Fragment> </Layout> );

¿Qué pasa esto? ¿Cuál sería el patrón correcto?