React 19 / Server components support

[edhollinghurst]

Thanks for maintaining such a useful library!

I just wondered whether this React Data Driven Forms is compatible with React 19 and/or being used in Server components?

If there's anything I can do in terms of this (testing etc.) I'd be happy to help.

[Hyperkid123]

@edhollinghurst thanks for your kind works.

because React 19 is still in pre-release (lats time I checked) we did not release a compatible version. However, it is planned.

Currently, SSR is supported provided the component mapper you are using is compatible (components are not directly accessing browser API within initial render, etc).

When it comes to Server components. AFAIK that all depends on your project build configuration. We are not planning the use-client directive or anything directly within this library. The only thing I am aware of as of now is adding an additional export condition documented here: https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md#react-server-conditional-exports. But I'd have to look at additional requirements.

In other words, you should be able to use the current version of DDF in React 19 with server components as long as you write your component with the FormRenderer as a server component and follow the export guide.

We have not tested this yet, but is something we will explore. I'd be happy for any experiments from your side as it will definitely help us. Both @rvsia and I have packed schedules with our "real work" so we welcome any help we can get 🙂 .

[edhollinghurst]

Thanks @Hyperkid123! It's good to hear that support for React 19 is planned.

I've created a very simple demo using Data Driven forms with React 19 and NextJS Canary, and deployed this to https://data-driven-forms-react-19.vercel.app/. The code is at https://github.com/edhollinghurst/ddf-react-19.

It's working okay, however I did need to use the use-client directive on my Form component, otherwise this error was shown:

I take it this is more an issue with React Final Form rather than Date Driven Forms?

[edhollinghurst]

I can confirm that using a plain React Final Form displays the same error.

Again, using the use-client directive fixes it.

Interesting that you have started to look at custom state management. Would this remove the dependency on React Final Form altogether? I think this could be a good direction to go in as it no longer seems to be actively maintained. I'd be happy to help in any way I can.

[rvsia]

@edhollinghurst Yes, that solution would remove final from the library.

You can check that branch at https://github.com/data-driven-forms/react-forms/tree/state-manager.

We basically made everything working, but as I left the company maintaining the library and it wasn't a priority enough, we never made it to release, as we are afraid of a lot of edge cases and performance issues we weren't able to cover by our limited testing.

With unmaintained Final Form it makes sense to continue working on that branch, otherwise one day it will block us anyway.

[Hyperkid123]

Hmm. If the context is the issue, it makes this problematic. Most of the form depends on context. From validation to conditionals fields. I don't think we can wire the thing to be completely independent off Context.

Even the new state management requires context to work. We would have to switch to something like signals, but I don't have time to do such a drastic change. And I don't really know if it is worth it when DDF is working with the use client directive. Client components will never go away and I don't think they should. I also don't think we should go above and beyond and try to make everything as a server component.

@edhollinghurst what is your use case? How is your UI benefiting from a form being a server component? (I should not say this 😄 ) Maybe DDF is not the solution here?

[edhollinghurst]

Hi @Hyperkid123. Thanks for the additional information on the dependency on Context. I don't have a specific use case, was just interested in the extent to which there are plans to continue to evolve DDF given the changes that are coming in React 19. For the project where we have successfully used DDF for the past few years, once we upgrade to React 19, we'll likely simply make use for the use client directive for the time being.

It is a bit disappointing to see that React Final Form is no longer actively maintained. I can see it affecting the adoption of this library while there is still the dependency on it.

[Hyperkid123]

I can see it affecting the adoption of this library while there is still the dependency on it.

Yes, I agree. Hopefully, I'll have a bit more 🧠 power at my disposal soon to get on with the custom state manager. If anything it is very interesting coding exercise.

I think now is the perfect time to revisit it due to the form actions. There is now a native way of handling forms. It will shake things up and allow us to not depend so heavily on context. Maybe leave it behind completely.