What does HackerNews think of mui-rff?

MUI 5 / Material UI + React Final Form

Language: TypeScript

#32 in React
#54 in TypeScript
Building forms in React is a pain in the ass and requires a lot of little details with strange edge cases.

I built a simple wrapper between two popular libraries, MUI and React Final Form called aptly mui-rff [1]. I've been maintaining this library for years now. It gets ~40k downloads a month off of NPM.

It still isn't perfect, some of the widgets have weird edgecase failures. It took a long time to get it to the point where it is now. The saving grace over time has been that I wrote a decent amount of unit tests right from the start. This has thankfully allowed me to upgrade the library safely over time but wow... just wow... I've spent so much time just fixing things that break because of random bits of code rot.

The fact that this is a ~10 page blog post and still doesn't cover all the edge cases says so much about what is wrong with React and forms. It shouldn't be this hard.

[1] https://github.com/lookfirst/mui-rff

> We solved the test flakiness issue by getting rid of all of our frontend tests, which means we spend more time manually testing our product.

This is a terrible idea. Getting rid of testing doesn't make the problem (flakiness) go away, it just moves it to another part of workflow (manually testing). So, now instead of having tests, you have more humans (or because you're a small company, instead of building features which grow the company, you spend time manually testing and fixing regressions that your end users embarrassingly find for you). Never mind that it just doesn't scale as your codebase increases.

Even a basic level of (snapshot) testing react components is not difficult. I wrote a library [1] that intentionally has a ton of tests and over the years, I've been able to do new releases that upgrade to new versions of the underlying dependencies, without worry.

Seriously, write tests for the frontend.

[1] https://github.com/lookfirst/mui-rff

After ~25 years of open source and regretting a lot of my earlier behaviors as a younger human, a couple years ago I created another open source project [0].

I made a point of setting it up right from the beginning. Easy build system, fully unit tested, code of conduct, automated CLA signing, examples, good documentation and most importantly, I am excessively kind to anyone who comments or gives feedback. This took an inordinate amount of time up front, but was worth it.

I'd say the result of this is that I've gotten a couple high quality contributions, zero stress and very very little feedback. It has been a pleasure to maintain this project because it causes me no pain at all.

I'd say that maintaining 200+ projects is just insane really. You've overdone it. It is impossible to do any of them extremely well and of course you're just going to invite 200x more drama. Don't do that.

[0] https://github.com/lookfirst/mui-rff

> Our reasoning for skipping frontend tests: Most of the frontend code is visual. Tests can't tell you if the result is aesthetically satisfying, so you have to look at it no matter what. Since the backend diligently enforces data sanity, the frontend can't really get into too much trouble, and a page reload fixes almost anything. Frontend testing seems to be high-effort low-reward.

This is an example front-end react component project that I wrote that benefits heavily from tests: https://github.com/lookfirst/mui-rff

Why? Because it is a wrapper around two other frameworks (React Final Form and Material-UI). Any time those two frameworks change something in a way that I didn't expect, I want test failures.

Throwing my thin wrapper around Material-UI and Final Form into the mix. I personally prefer RFF over Formik because of RFF's ability to control renders.

https://github.com/lookfirst/mui-rff

You certainly do not need to use a form library, but it does make it easier to deal with complicated issues such as render counts. I built a thin wrapper around material-ui and react final form (what I would suggest over formik) [1] and a little demo [2] that visually demonstrates this.

[1] https://github.com/lookfirst/mui-rff

[2] https://lookfirst.github.io/mui-rff/

I ran into that myself while working on a form heavy project. You can use various react form libraries to help make things easier, but then you need to figure out how to wrap your favorite visual component library. Passing all the properties between the two is really really confusing.

I'm a fan of the Material-UI project which provides the visual components and ability to style them however you want. React Final Form is terrific with managing forms (and easily made very performant).

imho, these form components become really nice to work with...

Demo: https://lookfirst.github.io/mui-rff/

Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-exampl...

Code: https://github.com/lookfirst/mui-rff