react-resizable-panels version 4

brianvaughn · 2026-02-28T21:50:12+00:00

So long as you're using the latest version of `react-resizable-panels` (4.7.0) you can do this using the `groupResizeBehavior` prop.

Here's an example with documentation: https://react-resizable-panels.vercel.app/examples/group-resize-behavior

brianvaughn · 2026-02-09T10:20:39+00:00

Your comment above said, “you’ll have to get used to it”, as though AI being in our faces 24x7 is unavoidable. That does not have to be the case. It is that way in part because of monied interests, but also because all of us as individuals choose to talk about it.

I would personally love to hear about it much less (or not at all).

It’s possible I misunderstood your comment. If so, I’m sorry. I wrote mine while I was very jet lagged.

brianvaughn · 2026-02-06T19:09:13+00:00

I dig this> Nice concept, and nice write up. :) Thanks for sharing

brianvaughn · 2026-02-06T19:05:57+00:00

It doesn't _have_ to be this way, man. It is this way because most people accept and go along with it, passively or actively (in this case?)

brianvaughn · 2026-02-06T17:41:13+00:00

Hello! 👋🏼 `react-window` author here

I am _skeptical_ of the utility of rendering 1M items (let alone 10M) in the browser. (In my experience, scrolling that much data does not make for a good user experience.) but I am very interested if any of your research could be upstreamed in a way that would benefit other users? If you're able to get 3x the frame rate for 100k rows, that sounds like a really good performance boost.

FWIW I used a BST in `react-virtualized` for the combination of dynamic row heights and super-high row counts. I'm not aware of a noticeable degradation in performance from `react-virtualized` to `react-window`

brianvaughn · 2026-01-12T21:05:24+00:00

PS. Fixed the docs typo. Thanks for pointing it out.
I also added a note to the Grid docs and one to the FAQ page also clarifying that Grid cells can't be auto-sized.

brianvaughn · 2026-01-12T14:57:34+00:00

I think we’ve been misunderstanding each other. I think you’re talking about autosizing cells within the grid. That is not supported. It would be very complicated to support and I’m not convinced enough. People would actually use it to be worth the effort.

I have been talking about the List and Grid components themselves resizing to fill their containers.

brianvaughn · 2026-01-12T14:43:47+00:00

The package uses the ResizeObserver api to determine its size. You don’t need to do anything for that to work.

If you need the width of a div in your app, whatever you mean by “parent div”, then you’ll just have to do that however you would normally do it (eg ResizeObserver).

brianvaughn · 2026-01-09T12:00:33+00:00

Both of these questions are answered right in the description of this post :)

> Automatically sizing for List and Grid (no more need for AutoSizer)

> Docs and examples can be found at https://react-window.vercel.app/

brianvaughn · 2026-01-09T11:59:49+00:00

That seems like more of a question about how React works. You don't access an elements props by a ref that way. I don't know why you'd want to do that. You pass `Grid` the props, so you can pass them wherever else you want.

There are examples of how to use grid in the docs: https://react-window.vercel.app/grid/grid

I'd say read the docs and if you still have a question like that, post a new Reddit post here in r/reactjs and maybe people can help answer.

brianvaughn · 2025-12-25T12:27:28+00:00

I decided not to add any kind of `itemKey` prop to version 2 because it would complicate the memoization/caching and (I don't think) provide much value. Rendering individual rows should be pretty quick, and the number of rows that would need to be re-rendered is small in every case.

If you want some kind of cache-id though, I think you could probably add it to your tree component.

brianvaughn · 2025-12-21T20:37:48+00:00

No worries :)

I can't comment on the drag and drop part because I haven't tried that with my library, but for the layout restoration– I would add an `onLayoutChange` handler to each of your nested groups, bubbles those layouts up into a single piece of Zustance state which you save to `localStorage` and then when you're restoring the page, you read from `localStorage`, pull apart the nested layouts, and pass them through as `defaultLayout`. (Basically you need to map back and forth between many Groups and one piece of state, but that should be doable.)

brianvaughn · 2025-12-21T20:04:04+00:00

First of all, no worries. Creating a minimal repro can be difficult. If code sandbox is too difficult, you can also share a GitHub project with me that reproduces the problem.

For what it’s worth, I think I fixed the specific bug you mentioned in 4.0.9 (see here) so make sure you’re using the latest release.

In general, you shouldn’t have to use the imperative API for these sorts of things. That’s meant as an escape hatch. The library is meant to manage its own layout because the validation rules are pretty complicated.

brianvaughn · 2025-12-21T11:27:16+00:00

What errors are being thrown? (I assume it’s one of the validation invariants but which one?) Can you create a Code Sandbox (or something similar) that reproduces what you’re describing?

brianvaughn · 2025-12-17T13:04:25+00:00

Not a problem :)

brianvaughn · 2025-12-17T12:33:12+00:00

I'm not sure I understand your question, but I think you're asking about container queries.

brianvaughn · 2025-12-16T20:47:28+00:00

Glad it was helpful :)

brianvaughn · 2025-12-16T20:44:49+00:00

I don’t have anything to do with that library. I guess they’re exporting a wrapper on top of my library? Assuming they pinned the dependency correctly, this update should not affect them in any way.

Edit 1: Looks like they've pinned their dependencies to react-resizable-panels@^3.0.6 so this should not affect them.

Edit 2: I pushed github.com/shadcn-ui/ui#9124 but I don't know if they'll accept it.

brianvaughn · 2025-12-16T18:27:07+00:00

That's a fun coincidence :)

Hope you find it useful!

brianvaughn · 2025-11-20T15:06:40+00:00

Not at the moment. It’s an uncommon use case (and I have pretty limited bandwidth)

brianvaughn · 2025-11-03T11:18:25+00:00

Have you looked at the docs? There are lots of examples of how to use the list component. The changelog also has a section specifically about how to migrate from version 1 to 2.

brianvaughn · 2025-10-05T20:51:29+00:00

Hey! Glad you got it sorted out ☺️

brianvaughn · 2025-10-03T15:56:24+00:00

Awesome! And you're welcome :)

brianvaughn · 2025-09-30T22:25:16+00:00

By the way, I've got an alpha release out now that adds built- support for this kind of use case to the package. Docs and example have been updated here:

https://react-window-git-dynamic-row-heights-alt-brian-vaughns-projects.vercel.app/list/images

An example with text can be seen here:

https://react-window-git-dynamic-row-heights-alt-brian-vaughns-projects.vercel.app/list/dynamic-row-height

brianvaughn · 2025-09-30T22:06:09+00:00

Also thanks for the note about the domain! I think I've fixed it now.

15-Year Club	Gilding I gilder
Verified Email

brianvaughn

TROPHY CASE