RD#486 (React) Things I Regret Not Knowing Earlier

Hello, 👋

This is the last newsletter in 2024. I’m going to take a couple of weeks off and I’ll be back on January 6th. There’s a few exciting things planned for the next year already.

Early in the year, I’m going to move the newsletter back to my home brewed email service provider. This will give me more control over the deliverability, the looks and it should improve my curation and publishing processes. In the end, the newsletter should be nicer and should reach your inbox reliably (sounds simple, but it’s not easy).

Secondly, I’d like to focus on the content itself. Let me know what you’d like to read about and if you’d like to see some other areas of front-end development covered.

And lastly, I’d like to reach as many React developers as possible. If you like the newsletter please share it with your (programmer) friends and colleagues. It’ll help a lot.

Tests are dead. Meticulous AI is here.
sponsored by Meticulous

Meticulous AI is a tool which automatically creates and maintains a continuously evolving e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Backed by CTO of GitHub, Guillermo Rauch (next.js author), yc and others, it's built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.

Things I Regret Not Knowing Earlier
7 minutes by Ndeye Fatou Diop

Mastering React takes time. But these lessons will save you from my early mistakes. Keep coding, stay curious, and remember—you’ve got this!

React 19 and Web Component Examples
2 minutes by Chris Coyier

There is lots of news of React 19. It now fully supports Web Components, with clear rules for handling props in both Server Side and Client Side Rendering. Props with primitive values are rendered as attributes, while non-primitive types are handled as properties. The update enables seamless integration between React and Web Components.

Use React 19 form features to refactor a Newsletter Subscribe form
20 minutes by Corina Udrescu

Corina talks about React 19 significant form handling improvements through the new useActionState hook demonstrated in a "Newsletter Subscribe" form example. The update simplifies form submission, error handling, success states, and form clearing, resulting in more concise code.

Tips to effectively optimize INP in React
9 minutes by Michal Matuška

The main recommendations include reducing DOM size (keeping it under 2,500 elements), splitting components into simple and extended versions, utilizing React's tag for selective rendering, avoiding hydration errors during server-side rendering, and carefully managing useEffect() hooks.

You might not need a React Form Library
9 minutes by Robin Wieruch

How to implement form validation in React without using external form libraries, focusing on both server-side and client-side validation. It demonstrates a practical approach using React Server Actions, Zod for schema validation, and native form handling.

Thank you for your support in 2024. Have a lovely Christmas break and I’ll see you again in January.

Jakub 🎄🎅🏻

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.