clauderic / clauderic/react-sortable-hoc

react-virtualized auto scrolling stops after adding a pre-render lifecycle changing my sortable-hoc list

Open
#640 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.9k
Forks
959
PR merge metrics
No merged PRs in 30d

Description

I'm using sortable-hoc with react-virtualized, and I'm having this problem when I try to change my list items with the store information.

![stopScrolling](https://user-images.githubusercontent.com/23220615/69957925-7a957100-14e2-11ea-91b0-c4aa35c84250.gif)

```javascript
import React, { useState, useEffect, memo, Suspense } from 'react'
import PropTypes from 'prop-types'
import { SortableElement } from 'react-sortable-hoc'
import { List } from 'react-virtualized'

import TaskItem, { EmptyTask } from '../../TaskItem'

const SortableItem = SortableElement(({ content, index, style, key }) => (


  • {content}

  • ))

    const VirtualListTask = memo(({ scrollToIndex, tasks: items, getRef, addTask, addSubTask }) => {
    const [defaultHeight] = useState(36)
    const [nTasks, setNTasks] = useState(items)

    useEffect(() => {
    console.log('items changed', items)
    setNTasks(items)
    }, [items])

    const rowRenderer = ({ key, index, isVisible, style }) => {
    const differentIndex = index >= nTasks.size,
    task = !differentIndex ? nTasks.valueSeq().get(index) : null,
    content = !differentIndex ? (

    ) : (

    )

    return (
    Rendering...}>


    )
    }

    const differenceLines = nTasks.size < 8 ? 8 - nTasks.size + 2 : 2

    return (

    )
    })

    VirtualListTask.defaultProps = {
    scrollToIndex: -1
    }

    VirtualListTask.propTypes = {
    tasks: PropTypes.object.isRequired,
    scrollToIndex: PropTypes.number,
    addTask: PropTypes.func.isRequired,
    getRef: PropTypes.func.isRequired,
    addSubTask: PropTypes.func.isRequired
    }

    export default VirtualListTask

    ```

    I can fix this problem commenting setNTasks, but then I stop to control my list state after any changes

    ```javascript
    useEffect(() => {
    console.log('items changed', items)
    // setNTasks(items)
    }, [items])
    ```

    ![justFine](https://user-images.githubusercontent.com/23220615/69958192-04453e80-14e3-11ea-9238-aecd39eb9fd6.gif)

    Sorry for the video quality.
    Could anybody help me?

    Contributor guide

    No contributing guide indexed for this repository

    Assessment

    This issue has not been assessed yet.

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.