Creé una aplicación de chat y estoy usando un useEffect para escuchar messages.length , para desplazarme hacia abajo cuando llega un nuevo mensaje, un increment en messages.length .
Sin embargo, también existe el caso en el que elimino un mensaje, una decrement en la longitud de messages.length . Es decir, también me desplazan hacia abajo al eliminarlo, y me gustaría evitar ese tipo de comportamiento. Los mensajes se almacenan en mi tienda redux y se puede acceder a ellos como accesorio.

¿Hay alguna manera de que useEffect escuche solo en un incremento?
¿Hay alguna forma de tener acceso al estado anterior de los mensajes?
¿O es inevitable almacenar una variable prevLength ?

Aquí está la parte de mi código que necesita revisión:

 // Scroll to bottom upon new message: useEffect(() => { scrollDown(); }, [messages.length]);

Este es el código completo:

 import { useState, useEffect} from 'react'; //Components: import ChatBubble from './ChatBubble'; import ScrollButton from './ScrollButton'; export default function MessagesBoard({ messages }) { //useState: const [showScrollButton, setShowScrollButton] = useState(false); //Event: Scroll to bottom upon new message useEffect(() => { scrollDown(); }, [messages.length]); const scrollDown = () => { .... }; return ( <div className='chatMessagesBlock'> <div className='messagesCanvas'> {messages.map((chatMessage) => { return ( <ChatBubble key={msgID} msgID={msgID} sender={sender} msgContent={msgContent} /> ); })} </div> <ScrollButton showScrollButton={showScrollButton} scrollDown={scrollDown} /> </div> ); }