Реагируйте на проблемы с производительностью с увеличением количества компонентов

Оказывается, проблема была в моем компьютере. Однако Джеймс сделал несколько хороших замечаний о том, как изолировать проблему и использовать useCallback и useMemo для оптимизации.

У меня проблемы с производительностью моего реагирующего приложения. На данный момент я исключаю код, потому что чувствую, что могут быть некоторые ответы на здравый смысл.

Это демонстрационное видео

Вот несколько указателей

• У меня нет ненужных повторных рендеров. При наведении на них отображаются только отдельные компоненты.
• Анимации ограничены контейнером div зависшего элемента, поэтому при наведении курсора на странице за пределами этого контейнера не происходит перерисовки.
• Я не использую какой-либо тяжелый код для эффекта наведения или обнаружения.

Мне интересно, что еще может быть причиной таких проблем с производительностью. Насколько я понимаю, количество компонентов не должно иметь значения, если они просто лежат, а не ререндерятся.

Вот код компонента карточки, который анимируется. Я не совсем был уверен, что здесь важно показать. Родительский компонент, показывающий все карточки, не перерисовывается.

export default function CardFile(props) {

    // Input field
    const input = useRef(null)

    //Input state
    const [inputActive, setInputActive] = useState(false);
    const [title, setTitle] = useState(props.file.name)
    const [menuActive, setMenuActive] = useState(false)

    const [draggable, setDraggable] = useState(true)
    const [isDragged, setIsDragged] = useState(false)

    // counter > 0 = is hovered
    const [dragCounter, setDragCounter] = useState(0)
    



    //_________________ FUNCTIONS _________________//
    
    // Handle file delete
    const handleDelete = (e) => {
        firebase.firestore().collection('users').doc(props.file.owner).collection('files').doc(props.file.id).delete().then(() => {
            console.info('Deleted')
        }).catch((err) => console.err(err))
    }

    // Prevent default if necessary
    const preventDefault = (e) => {
        e.preventDefault()
        e.stopPropagation()
    }

    // Handle rename
    const handleRename = (e) => {
        e.stopPropagation()
        setMenuActive(false)
        setInputActive(true)
    }

    // Handle change
    const handleChangeEvent = () => {
        setTitle(input.current.value)
    }

    // Handle focus loss
    const handleFocusLoss = (e) => {
        e.stopPropagation()
        setInputActive(false)
        firebase.firestore().collection('users').doc(props.file.owner).collection('files').doc(props.file.id).update({ name: title })
            .then(() => {
                console.info('Updated title')
            }).catch((err) => console.error(err))
    }

    // Handle title submit
    const handleKeyPress = (e) => {
        console.info('key')
        if (e.code === "Enter") {
            e.preventDefault();

            setInputActive(false)
            firebase.firestore().collection('users').doc(props.file.owner).collection('files').doc(props.file.id).update({ name: title })
                .then(() => {
                    console.info('Submitted title')
                }).catch((err) => console.error(err))
        }
    }

    // Set input focus
    useEffect(() => {
        if (inputActive) {
            input.current.focus()
            input.current.select()
        }
    }, [inputActive])


    //_____________________________DRAGGING___________________________//
    //Handle drag start
    const onDragStartFunctions = () => {
        props.onDragStart(props.file.id)
        setIsDragged(true)
    }
    // Handle drag enter
    const handleDragEnter = (e) => {
        // Only set as target if not equal to source
        if (!isDragged) {
            setDragCounter(dragCounter => dragCounter + 1)
        }
    }
    //Handle drag end
    const handleDragEnd = (e) => {
        e.preventDefault()
        setIsDragged(false)
    }
    // Handle drag exit
    const handleDragLeave = () => {
        // Only remove as target if not equal to source
        if (!isDragged) {
            setDragCounter(dragCounter => dragCounter - 1)
        }
    }
    // Handle drag over
    const handleDragOver = (e) => {
        e.preventDefault()
    }
    // Handle drag drop
    const onDragDropFunctions = (e) => {
        setDragCounter(0)
        // Only trigger when target if not equal to source
        if (!isDragged) {
            props.onDrop({
                id: props.file.id,
                display_type: 'file'
            })
        }
    }



    return (
        <div
            className = {`${styles.card} ${dragCounter !== 0 && styles.is_hovered} ${isDragged && styles.is_dragged}`}
            test = {console.info('render')}
            draggable = {draggable}
            onDragStart = {onDragStartFunctions}
            onDragEnter = {handleDragEnter}
            onDragOver = {handleDragOver}
            onDragEnd = {handleDragEnd}
            onDragLeave = {handleDragLeave}
            onDrop = {onDragDropFunctions}
        >
            <div className = {styles.cardInner}>
                <div className = {styles.videoContainer} onClick = {() => props.handleActiveMedia(props.file, 'show')}>
                    {props.file.thumbnail_url && props.file.type === 'video' &&
                        <MdPlayCircleFilled className = {styles.playButton} />
                    }
                    {!props.file.thumbnail_url && props.file.type === 'image' &&
                        <MdImage className = {styles.processingButton} />
                    }
                    {!props.file.thumbnail_url && props.file.type === 'video' &&
                        <FaVideo className = {styles.processingButton} />
                    }
                    <div className = {styles.image} style = {props.file.thumbnail_url && { backgroundImage: `url(${props.file.thumbnail_url})` }}></div>
                </div>
                <div className = {styles.body}>
                    <div className = {styles.main}>

                        {!inputActive ?
                            <p className = {styles.title}>{title}</p>
                            :
                            <input
                                ref = {input}
                                className = {styles.titleInput}
                                type = "text"
                                onKeyPress = {handleKeyPress}
                                onChange = {handleChangeEvent}
                                onBlur = {handleFocusLoss}
                                defaultValue = {title}
                            />
                        }
                    </div>

                    <ToggleContext onClick = {() => setMenuActive(prevMenuActive => !prevMenuActive)}>
                        {
                            menuActive && <div className = {styles.menuBackground} />
                        }
                        <Dropdown top small active = {menuActive}>
                            <ButtonLight title = {'Rename'} icon = {<MdTitle />} onClick = {handleRename} />
                            <ButtonLight title = {'Label'} icon = {<MdLabel />} onClick = {() => props.handleActiveMedia(props.file, 'label')} />
                            <ButtonLight title = {'Share'} icon = {<MdShare />} onClick = {() => window.alert("Sharing is not yet supported. Stay put.")} />
                            {/*props.file.type === 'video' && <ButtonLight title = {'Split'} icon = {<RiScissorsFill />} />*/}
                            <ButtonLightConfirm
                                danger
                                title = {'Delete'}
                                icon = {<MdDelete />}
                                onClick = {(e) => preventDefault(e)}
                                confirmAction = {handleDelete}
                                preventDrag = {() => setDraggable(false)}
                                enableDrag = {() => setDraggable(true)}
                            />
                        </Dropdown>
                    </ToggleContext>

                </div>
            </div>

        </div>
    );
}

А вот css для анимации:

.is_hovered {
    box-shadow: 0 0 0 3px var(--blue);
}
.is_hovered > div {
    transform: scale(0.9);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
    transition: .1s;
}

Обновлено: добавлен код

Edit2: обновлен пример видео, чтобы показать повторный рендеринг.