Tengo un componente principal con una variable de estado que se cambia por uno de sus componentes secundarios tras la interacción. El padre también contiene algunos componentes más basados en los datos de la variable de estado.
El problema es que el componente secundario se vuelve a representar cuando cambia el estado de su componente principal porque cambia la referencia a la función setState. Pero cuando uso useCallback (como se sugiere aquí ), el estado de mi padre simplemente no se actualiza en absoluto.
Esta es mi configuración actual:
function ArtistGraphContainer() { const [artistPopUps, setArtistPopUps] = useState([]) const addArtistPopUp = useCallback( (artistGeniusId, xPos, yPos) => { setArtistPopUps([{artistGeniusId, xPos, yPos}].concat(artistPopUps)) }, [], ) return ( <div className='artist-graph-container'> <ArtistGraph addArtistPopUp={addArtistPopUp} key={1}></ArtistGraph> {artistPopUps.map((popUp) => { <ArtistPopUp artistGeniusId={popUp.artistGeniusId} xPos={popUp.xPos} yPos={popUp.yPos} ></ArtistPopUp> })} </div> ) }Y el componente hijo:
function ArtistGraph({addArtistPopUp}) { // querying data if(records) { // wrangling data const events = { doubleClick: function(event) { handleNodeClick(event) } } return ( <div className='artist-graph'> <Graph graph={graph} options={options} events={events} key={uniqueId()} > </Graph> </div> ) } else{ return(<CircularProgress></CircularProgress>) } } function areEqual(prevProps, nextProps) { return true } export default React.memo(ArtistGraph, areEqual)En cualquier otro caso, la representación del componente secundario no sería un problema, pero lamentablemente hace que el gráfico se vuelva a dibujar.
Entonces, ¿cómo me las arreglo para actualizar el estado de mi componente principal sin que se vuelva a dibujar el gráfico?
¡Gracias por adelantado!
Es posible que el niño esté volviendo a representar algunas cosas, pero no es por el motivo indicado. Las funciones setState están garantizadas en su identidad, no cambian solo por una representación. Por eso es seguro excluirlos de las matrices de dependencia en useEffect , useMemo y useCallback . Si desea obtener más evidencia de esto, puede consultar este sandbox que configuré: https://codesandbox.io/s/funny-carson-sip5x
En mi ejemplo, verá que el estado de los componentes principales cambia cuando hace clic en el botón del elemento secundario, pero que el registro de la consola que se activaría si el elemento secundario se volviera a representar no está registrando.
Teniendo en cuenta lo anterior, me alejaría del enfoque usCallback que está utilizando ahora. Yo diría que es anti-patrón. Sin embargo, como advertencia, a su useCallback le faltaba una dependencia requerida, artistPopUp .
A partir de ahí, es difícil decir qué está causando que su componente se vuelva a representar porque a sus ejemplos les falta información clave, como de dónde provienen los graphs , las options o los valores de los records . Una cosa que podría conducir a renderizaciones inesperadas es si está provocando montajes y desmontajes completos del componente principal o secundario en algún momento.
Una última nota, definitivamente no necesita pasar ese segundo argumento a React.memo .