星期日 07 晚上 十二月 22o 2024
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 🎄🎅🏻
[读在线](https://link.mail.beehiiv.com/ss/c/u001.3mTwTBe\_1W4fLvRj4unk8hErXB2vrDHg5DYaj51xP1XYEuFVChJelSuJ5XoBpKBQBv-WSogMBcQBH pVQzmJwNCxa6jGTbadJe_7aLWLbdXQGlpGh2zapkaosvs_YDh90duACnGsj3toBb6DCBgY1unmGSA0gd0nRwdwPGp2lIFYK7ou_VWmIVaKx863ESxHgiJfAtCuZkz 0ZtfkziymMN8aPj_rlgdv7BBrPd3Z3FybY2Iio_CSTPHEgAFVH2DWKAVu_o2sCo4PC07I6-MpJ3XMD-ValrwBQEdJD6d3guMs8TLYx3YVuTBkJLx7TnCSNFmY28OW A6cqfqH0CWEemtvmfhdNRk_WZMCBOMCzb2KJc9stQIn-LSyN_3_PeThWbjlPPcQK1f1o1M_TS1sevMKSTsyA1wAvS1px0uvb5axcI6r-qbWRyPFMn8eN4WQV3q_xeU xo_UcRp7zdupmecYXNcLJHofBRkRatXv_oi1sQMHZoHpKsTmoFrlpOL5OvyjQ5R04JkUbAClDbeVvYgSJEh7BnqCW46z-HKuOniBAQEstxvdLDDgV0wCUK2iWqn4N c48sVDsfT4rFHYk8K_8yNX338gaXQn966G6_BqUDD2t7b8tYMcMKmaAOOHhDmQK81AoLYX-cQ6Ar7AVQttT0lOkf4Nhbc1j45VgkLPMpH5hwiSIOV_NY8vkvEVSYAVR 5bQnP71tWnDjgi7JatV8qP3fddWxTTA55DEO5nnXk9pSjWGXEZyds2z7rr3KfD6TgCNCuwyyHSu3BvUI-6q-5GeODJEPvh8OlFr78JdoVeT54CufIb7FJfI34AWBh xlzIt9ck_zL8P0ZvCTyNA-IBfof5YVEfQ2KJyRiUdcnLBo/4ci/4Se23ohGSK-4z8GSycWJsg/h0/h001.NlHy4yWcr2Mjy5HmcOo5MUSnWsYxtbA_YoXBzoGU0yQ)
你好,👋
这是 2024 年最后一份时事通讯。我将休假几周,将于 1 月 6 日回来。明年已经计划了一些令人兴奋的事情。
今年年初,我打算将时事通讯移回我自己制作的电子邮件服务提供商。这将使我能够更好地控制交付能力、外观,并且应该改善我的策展和发布流程。最后,时事通讯应该更好,并且应该可靠地到达您的收件箱(听起来很简单,但并不容易)。
其次,我想重点关注内容本身。让我知道您想阅读哪些内容,以及您是否想了解前端开发的其他一些领域。
最后,我希望接触到尽可能多的 React 开发人员。如果您喜欢这份时事通讯,请与您的(程序员)朋友和同事分享。这会有很大帮助。
[测试已死。细致的AI是在这里。](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqa3JwGFc7SR4VfYwt4lGl6BqJbWmR8Zr6peVAmAulyzAx6j18FNSq9WHzwlFlFYko39HgeM2 WqroLgOnA-NgNKtuzp4tf-DgVOEWVwRvFa5DXLsOCNqCDWRtzYUUGTVsKQ/4ci/4Se23ohGSK-4z8GSycWJsg/h1/h001.ei5T4-ERbc3jIsHGr8pIKOLTQiZ3zIJu8ajF1MH0RgQ)
由精心赞助
Meticulous AI 是一款自动创建和维护不断发展的 e2e UI 测试套件的工具,该套件涵盖应用程序的每个角落 - 无需开发人员进行任何干预。在 GitHub 首席技术官 Guillermo Rauch(next.js 作者)、yc 和其他人的支持下,它是从 Chromium 级别构建的,具有确定性调度引擎 - 使其成为唯一消除碎片的测试工具。
【我后悔不知道的事情较早](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqQtZUvbjz4EL00G6RqzzLjMH3fnchAx6UJqcCaTW5xEOMj-wK DEtbW_4mqrRqxuaTVjwOb9TRt-qaIS0iR3k_—dyzLGTKGyaGqtLckwNXbfFesjXFvx31QLbpcmQNwhzs82CRA1UtrKUSVQ_NZF85Qi0g6-vatGjRhO_M9 HSBXgB7MHqq68j8KpvCzFx7V1oHIQDWiOui3dtOFl5_O8Sx6UyI1_8sg6KBYiUX5WEBr2cexMLCjKcWcDla5XpCxBAyTzrzO8D8f843v1ypwJBE5VCHR0 1jK1tE31z4poF2mHksCILnn11SQpG0PbFH9nw/4ci/4Se23ohGSK-4z8GSycWJsg/h2/h001.rtbTf-c3Nsps_IaAeKGf4_whzNLuISXC01QQlj3vfvw)
7 分钟 Ndeye Fatou Diop
掌握 React 需要时间。但这些教训将使你避免我早期所犯的错误。继续编码,保持好奇心,并记住——你已经做到了!
[React 19 和 Web 组件示例](https://link.mail.beehiiv.com/ss/c/u001.KaMW3WmNMB7SepvbqFCmfaSOFJc2XPJZaMvVYObtcgO82reZ6TukooUk9hKejF mFRCKVBWwOS4Jh3vfqH5rOl2nc6gWBdZavokRAf_tYaMEHShhLbI5ut3Y05edibjxezKHuassEB6Pqp9Nz-Gag6CcPLnkIm65UuJ1yB3_oTLuA4zA peptZD-JceUSEHoMsITzaUo1UMg1DYsar8fETw19UuD4xvtAX7E2t-NPQ0mQJ6cPwsdoM5ERMex06e3ZeVe_BhOih1GYWtLDL091r8UL_JQSYWPEV XogI8jehvcHp3g5oYr2yzm-O6l1jBYlR/4ci/4Se23ohGSK-4z8GSycWJsg/h3/h001.pB2ZLgQLj0QvnnzloXF8SjsW_KagNNsMXAsLDkRsRPA)
2 分钟 Chris Coyier
React 19 有很多消息。它现在完全支持 Web 组件,在服务器端和客户端渲染中处理 props 都有明确的规则。具有原始值的 props 被渲染为属性,而非原始类型则被处理为属性。该更新实现了 React 和 Web Components 之间的无缝集成。
[使用 React 19 表单功能重构新闻通讯订阅表格](https://link.mail.beehiiv.com/ss/c/u001.UBh74i5ibvpiWu-3SxqXvmT1tfMGfxA3v\_DxMTfUzLX7uU9T39Xv282M7FB8iNPYKphU8l\_icsi7Y3\_lX r_BSltDC2n-pt4Wc_te8Rl3x-NxZN-yaUSDA9UZBsJ1vqpXD4Amt5DrOQaPQwsU8Mhwn0Bg8MSTUa3QXqmMQ1Hx7jhLU2nDnK9QXIRq9IkeiYlINitqzYyre2jp-DDMq IFMhCKq1Zexf5W0TRscCAABBV4r2hWyFnbscw5y5V0OnDLz23ETJvc9gOXLix7YIhpFqtAXYGDPkiZqxt7-7kWPsmYf2GUbmBtjGbpbW5AoI_MfjZW7k3OjGWvEAl0OE 7VuVgJ1sxstBZL_tKQERL49Rmu-BBXA5tM6F6p8N6K2DEUc/4ci/4Se23ohGSK-4z8GSycWJsg/h4/h001.P00I7RT-XGDHtLYuaIBWPViaYZXKptpGr5BQjQEIYHo)
20 分钟 Corina Udrescu
Corina 谈论了 React 19 通过“Newsletter Subscribe”表单示例中演示的新 useActionState 钩子实现的重大表单处理改进。此更新简化了表单提交、错误处理、成功状态和表单清除,从而使代码更加简洁。
[有效优化 INP 的技巧反应](https://link.mail.beehiiv.com/ss/c/u001.H7TV3nVHQvyVqifzthtBOQsPoSRdI-81EfXldG07AwZOFwDGBhdT\_EFTmyVOz4PIF2j4Qc uO42k9MDzi87fogNLaFMTdaDiOQmKBN9OY2M8WJCFGKuRams4P6lOnJVw54ZkHmBL_O6-20faGnmR78fdpWASNtoMbT0hry1fGL-fxyznDUGb0D6zbMOaj a-2qD3TYpbhZyDokuALFbERunxo_E2pCyFwgCOTGyAXuWGRXIG3ck4Mc28TDs_WlTp12TYpQv96rXRFEg3XdVR7JhO7qpJOtk7qoFOxSJHrAAW-ghwacn qz-I0m8wjysxBEPJr6RQFRDGd-EJpxKod1vTA/4ci/4Se23ohGSK-4z8GSycWJsg/h5/h001.atVS0ADVryWo9AEg-_m-OPkWVYZnLCMu0WPsBcieVhs)
9 分钟 米哈尔·马图什卡 (Michal Matuška)
主要建议包括减少 DOM 大小(使其保持在 2,500 个元素以下)、将组件拆分为简单版本和扩展版本、利用 React 标签进行选择性渲染、避免服务器端渲染期间的水合错误,以及仔细管理 useEffect() 挂钩。
[您可能不需要 React Form库](https://link.mail.beehiiv.com/ss/c/u001.96pnkUdR2Et9YTtP31beqfQAf\_qUprM09yoMPtF27zIaU2ypwQCX\_03Aa1 UJ9ogORgGNsrQhHskW2OFSiZhW_2KWPKdMGBFvWohJupDAkqm39QGxf9XW8jE7RNMm-Ywg-io37nhiNJsJpjU_-vblTejc33OOfl5VDXvo0 PEw7MtPL6b421EaHF6A7xoeNzoZdJXFFwDP_OPlJo6zHFQoNAoo6fPJIBQbysCSzej9kShEaWKU6QGMj01JxdBZxZTJrjpAQD0HJJJsl794 O69NNMO0buQ5TAd1DS7dqUy0Kc4/4ci/4Se23ohGSK-4z8GSycWJsg/h6/h001.Lm67Inuh7_JgNrrt_BzXG50bzm2eoaXM9e5vHDG75R4)
9 分钟 罗宾·维鲁奇 (Robin Wieruch)
如何在不使用外部表单库的情况下在 React 中实现表单验证,重点关注服务器端和客户端验证。它演示了使用 React Server Actions、Zod 进行模式验证和本机表单处理的实用方法。
感谢您在 2024 年的支持。祝您圣诞假期愉快,一月再见。
雅库布🎄🎅🏻
发布者