React 18 great features and... some issues
How the new major version of React went to the production build...and the workarounds to fix some problems. This week, it'll be about automatic batching!
There's no doubt that React 18 brought some nice changes to the frontend world. There are plenty of videos, articles, and posts about the new features.
But what about the real production use? I'm talking about projects using the good and old Create React App (CRA). Most of the new parts created no problems… but there were some adjustments to do!
Let's first talk, in this newsletter issue, about one feature I used and some of the issues I encountered.
Automatic batching is great, but there's one pitfall
One of the main new things of React 18 is automatic batching. React will now try to batch together the state updates to re-render only once, instead of doing it every time.
There are plenty of articles on how this works, for example, this one on the topic.
That is great for memory consumption, and performance. Yet, it requires a little rethinking of state management in an application.
When I upgraded React in my applications (using CRA - Create React Application), I didn't find any big issues. Except for one case.
I have to say that, although React developers are bringing us away from that, CRA is still widely used in the industry.
In one application, I have a dashboard with many cards, and each one has a button and inputs to perform some actions.
But it also has a countdown timer. And, it turned out that it messed up a little the state and the rendering. At least that much that the action buttons had the wrong state and were not showing correctly.
I needed some time to understand why (a couple of days) and it led me to downgrade the React version.
After some investigation, I understood that it had to do with the dependencies. Formik, especially, was creating the real issue.
Unfortunately, Formik hasn't been updated for a big while. It's not been maintained anymore for one year or so. Somehow when a form triggers a state change, because of the inside timer, it's mixing all up and the components don't behave properly.
The solution? I will have to abandon Formik and change it with, possibly React Hook Form.
Conclusion
Sometimes those breaking changes will force you to change completely the structure of the project because of one thing not working.
The increasing layers of complexity in React are interesting, but tiring at the same time. Bugs happen and it's difficult to understand why. Especially for somebody starting to learn it just now.
The next time I'll talk about the completely reworked rendering, from client-side to SSR! That'll include all the new ways of fetching JS and data, hydration, and rendering on the screen!
Other articles I posted
I love React Testing Library (RTL) and I published a couple of posts about it!
Make reusable get methods in RTL
Make a reusable test with React Testing Library
Let's connect on Twitter or Mastodon!