Tengo el siguiente código de reacción de muestra
const A = () => { const [value1, setValue1] = React.useState(true); const [value2, setValue2] = React.useState(true); return ( <div> <div class="first-comp"> <FirstComponent data1={value1} data2={value2} /> </div> <div class="second-comp"> <SecondComponent onChange={() => {setValue1(false); setValue2(false);}} /> </div> </div> ) } Cuando SecondComponent llama a onChange , tanto "first-comp" como "second-comp" se vuelven a representar en la pantalla.
Dado que al volver a renderizar SecondComponent , mi desplazamiento se reinicia (es decir, si hubiera desplazado la barra de desplazamiento interna hacia abajo en SecondComponent, al volver a renderizar SecondComponent se muestra en la parte superior y no en el punto al que me había desplazado por última vez)
¿Hay alguna manera de que, cuando onChange cambie las variables de estado, el <SecondComponent /> no se vuelva a renderizar o el pergamino no se altere en el Segundo Componente o de alguna manera se conserve el pergamino?
El problema era que al cambiar el estado usando setValue, reaccionar estaba ejecutando la interfaz de usuario del segundo componente.
Usando shouldComponentUpdate() como se menciona aquí https://www.geeksforgeeks.org/reactjs-shouldcomponentupdate-method/ o use React.memo para evitar que se vuelva a renderizar
Configuré para no actualizar cuando cambia el valor 1 y el valor 2