Soy nuevo en React y estoy tratando de animar algunos elementos de una matriz usando la biblioteca ReShake.js. Aquí está mi código:

 import { ShakeHorizontal } from 'reshake' const state = { invalidWordSubmitted: true, } const isInvalidWordSubmitted = () => { return state.invalidWordSubmitted ? '.invalidWordSubmitted' : ''

}

// aquí está la parte que creo que está causando el problema:

 <div id="gameBoard" className="gameBoard"> {board.map((row, rowNumber) => row.map((letter, colNumber) => ( <span key={colNumber} > <ShakeHorizontal trigger={`${isInvalidWordSubmitted()}`}> {letter} </ShakeHorizontal> </span> )) )} </div>

Funciona bien, pero hay un retraso grave en el navegador y la consola me muestra la siguiente advertencia: react_devtools_backend.js:4045 Over 200 classes were generated for component styled.div with the id of "sc-bdvvtL"

¿Debería agregar identificadores únicos a cada uno de los componentes <ShakeHorizontal> ? No pude encontrar nada en los documentos: https://github.com/elrumordelaluz/reshake/tree/master/src