How to update only specific rows in v7

[thefaded]

I'm using Redux, and for table I'm compute derived data using reselect, after this assign it from props to state.

const [data, setData] = useState(() => props.rowData)
const columns         = useMemo(generatedColumns, [props.projectionsMonthsNumber])

// Update rowData externally
useEffect(() => setData(props.rowData), [props.rowData])

In the 2nd column I have input, so on each onChange I should recalculate data for just one row, I'm doing it this way

      Cell: ({
        row: { index },
        column: { id },
        cell: { row: { values: { sales, sku } } },
        updateMyData
      }) => {
        const [value, setValue] = React.useState(sales)
  
        // If the initialValue is changed external, sync it up with our state
        useEffect(() => {
          setValue(sales)
        }, [sales])
    
        const onChange = e => {
          setValue(e.target.value)
          updateMyData(index, id, e.target.value)
        }

        return <input value={value} onChange={onChange} />
      }

And here I'm generating new table's body

      <Table.Body {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return bodyRowRenderer(row)
        })}
      </Table.Body>

But the problem is what after updating only single row I have the whole table re-rendering and it's pretty slow, how can avoid it? So just single row must be re-rendered

[dbertella]

Did you check this section in FAQ? https://github.com/tannerlinsley/react-table/blob/master/docs/faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

[robgwin]

Every post I can find about this issue leads to that FAQ link, which is a 404. Any clue where it went?

[cavvon]

It's now here https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

[divmgl]

Lol It's 404ing again.

[leahlang4d]

It's here now https://react-table-v7.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

[muroa96]

I think docs/faq.md in the repo might be same with above link.

[thefaded]

Generally, I would say only React.memo with custom equalityCheck function works, nothing else. I found solution here – #1496

But the main problem I think is that there are a lot of useless posts/comments/articles about that React is fast and you don't have to optimise anything in your components, as we can see reference to Kent C. Dodds article in the link above. If I'm saying it's slow, it mens it's slow and don't say that it's fast.
Why my table with 2k cells must be re-rendered if only single row is changed? I should go and optimise render function/component? Hell no, react must re-render only single row/cells what really updated, not everything, it's React job.
With re-rendering whole table we can just go on and omit using react and just use CMR + R, cool solution 😎 ?

It would be cool if you update docs, covering this topic, because I pretty often see discussions on this problem

[tannerlinsley]

What if that single change results in filters, grouping or sorting becoming out of sync?

[arichiardi]

FWIW relying on row index would not work in case of grouping.

[User6531]

@thefaded Hey there, could you please share a solution for this? I'm dealing with the same issue of having to rerender the entire table when just one row gets updated.

Do you think using React.memo with td might help in this case?

[AshutoshSajan]

I am having the same issue, I have cell input and whenever I am updating a single cell it re-renders the whole table

[boldwade]

I have the same problem on v8...
I'm trying to understand, what's the purpose of this library at all if I have to manually handle everything myself regarding updating data in place? Just seems like there are plenty of other libraries out there that handle this better?

[dcmwong]

Can you name some better libraries please.