question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`VariableSizeGrid` does not respond to `columnWidth` prop changes

See original GitHub issue

I have a need for VariableSizeGrid to update cell styles when I change the columnWidth function (there’s a chance this also affects rowHeight, but I have not explored that yet). Right now, the width remains the same despite props changing because of https://github.com/bvaughn/react-window/blob/d80bef25fe706d0c73fc801674c086f681811190/src/VariableSizeGrid.js#L484

I have a codesandbox demonstrating the issue here: https://codesandbox.io/s/sweet-ellis-0ot7p

So far, my workaround is to add a key to VariableSizeGrid and make the key change with the props that affect columnWidth to force an update.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7

github_iconTop GitHub Comments

4reactions
kyleshevlincommented, Nov 30, 2020

A colleague and I have found another workaround that makes use of the resetAfter* methods. Here’s a sandbox with a solution for Grids: https://codesandbox.io/s/laughing-noyce-sigw9?file=/src/App.js

The gist is you track the props that will change the item’s size, and force a reset of the cache based on those props. You can put that into a hook that returns a ref, such as I have in the sandbox above.

I still think that it’s odd that I have to be responsible for forcing a cache update on something that seems like it should bust the cache by default. I’m not sure whether this issue should remain open based on the facts that:

  • This is a deliberate design choice, and
  • Clearly these resetAfter* methods are the intended work around
0reactions
jameskerrcommented, Dec 1, 2022

I’d think the cache should bust when the itemData prop changes.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React - Update 2d array in local state without ...
I am using the VariableSizeGrid of react-window to display a grid. ... That part does not seem to work well on CodeSandbox, but...
Read more >
How to virtualize large lists using react-window
Here's how React Window's virtualization can efficiently display large data sets to meet your DOM performance targets.
Read more >
React Data Grid: Column Sizing
The first column is fixed width (i.e. suppressSizeToFit = true ), which means its size does not change when sizeColumnsToFit is called. The...
Read more >
Virtualizing Large Data Lists with react-window
VariableSizeGrid — This component is as FixedSizeGrid , with additional props: columnWidth & rowHeight which accepts functions as their prop ...
Read more >
Virtual Scrolling and How It Can Enhance Your React ...
Required props include columnCount, columnWidth, rowCount, rowWidth, height & width. VariableSizeGrid — same as FixedSizeGrid, with the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found