Featured Issues

Real-world insights for sharper web dev decisions Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } WebDevPro #100 🎉 Form Submission in React 19: A Game-Changer for Developers Real-world insights for sharper web dev decisions Hi , Before we jump in, THANK YOU ! Every click, reply, and bit of feedback over the past 99 issues helped us build WebDevPro into what it is today. We’re incredibly proud to bring you issue #100. 🎯 To mark the milestone, we’re diving into a topic that reflects the kind of shift we love covering: quietly released, deeply impactful, and immediately relevant. React has evolved a lot over the years, but form handling? It’s long been a source of friction, even for seasoned developers. You needed boilerplate, custom handlers, and third-party libraries just to submit a form. React 19 changes that. To unpack one of its most impactful updates, we sat down with Daniel Bugl, React community contributor and author of Learn React Hooks. His book explores hook-based development in React 18 and 19, and in this special edition, Daniel offers a deep dive into Form Actions, a new feature that brings native simplicity to form submission. With hands-on insights from his work across startups, public sector platforms, and his own company TouchLay, he shows how React 19 is shifting the landscape for frontend developers. In this article, you’ll specifically learn: Why form handling in React has traditionally required workarounds and third-party tools How Form Actions in React 19 simplify submissions with zero dependencies What the useActionState hook does and how to use it effectively How React’s embrace of web standards enhances both developer ergonomics and performance When to skip third-party form libraries and when to keep them The role of FormData Why this shift marks a turning point in how we build UIs in React Before you jump in, here are some highlights from our recent WebDevPro coverage: 👉 Introducing Figma’s Dev Mode MCP Server 👉 Most RESTful APIs Are Not Really RESTful – Florian Kraemer 👉 The Accessibility Pipeline for Frontend Teams – Storybook 👉 The Angular Custom Profiling Track Is Now Available 👉 Introducing Gemini CLI – Google Blog Now let's get straight to the good stuff! Cheers! Your editor-in-chief, Kinnari Chohan Advertise with us Interested in reaching our audience? Reply to this email or write to kinnaric@packt.com. Learn more about our sponsorship opportunities here. Meet the expert Daniel Bugl is a full-stack developer, product designer, and entrepreneur focusing on web technologies. He has a Bachelor of Science degree in business informatics and information systems and a Master of Science degree in data science from the Vienna University of Technology (TU Wien). He is a contributor to many open source projects and a member of the React community. He also founded and runs his own hardware/software start-up, TouchLay, which helps other companies present their products and services. At his company, he constantly works with web technologies, particularly making use of React and Next.js. In the past couple of years, he has worked as a technical advisor and full-stack developer for large enterprises and the public sector, among other things working on citizen services for the Austrian government. Take the Survey Now Why Form Submissions Have Always Been a Headache Up until now, crafting a reliable form in React meant cobbling together multiple moving parts. Loading indicators. Error states. Async logic. Validation rules. Libraries like Formik and React Hook Form promised to help, but came at the cost of extra weight and complexity. The problem wasn’t just technical; it was philosophical. Building a form shouldn’t feel like spinning up a mini state machine. A New Native: Enter Form Actions React 19 introduces Form Actions, a fresh, built-in mechanism that makes form submissions not just manageable, but almost effortless. Instead of inventing a new model, Form Actions extends the standards that browsers have supported for years, combining them with React’s declarative philosophy. The result is a native-feeling form experience that removes the need for custom onSubmit handlers, spinners, or manually tracked errors. What Makes It So Different? Let’s break down what developers gain by using Form Actions: No More Loading State Juggling: Submissions automatically reflect their pending state. Automatic Error Boundaries: Errors are caught and handled gracefully without extra wiring. Minimal Code, Maximum Clarity: You write what matters: input fields and business logic. Standards-First: It builds on FormData, making it interoperable with native HTML and APIs. No Extra Packages Needed: For simple forms, Form Actions eliminate the need for additional libraries. A Look at the Code Here's a simple ContactForm component using useActionState -- React 19's hook for handling form actions: import { useActionState } from 'react'; function ContactForm() { const [state, submitAction, isPending] = useActionState( async (prevState, formData) => { try { const response = await fetch('/api/contact', { method: 'POST', body: formData, }); if (!response.ok) { throw new Error('Failed to submit form'); } return { success: true, message: 'Form submitted successfully!' }; } catch (error) { return { success: false, error: error.message }; } }, { success: false, message: '' } ); return ( <form action={submitAction}> <input name="email" type="email" required /> <textarea name="message" required /> <button type="submit" disabled={isPending}> {isPending ? 'Submitting...' : 'Submit'} </button> {state.success && <p style={{ color: 'green' }}>{state.message}</p>} {state.error && <p style={{ color: 'red' }}>Error: {state.error}</p>} </form> ); } What used to demand state hooks, custom handlers, and error tracking now fits cleanly into a single hook pattern. The behavior stays predictable, and the code remains focused. Demystifying useActionState The useActionState hook is the engine behind the simplicity. It accepts two key inputs: Action Function: This handles submission logic and returns updated state. Initial State: The shape of your form’s state before any interaction. Its return includes: Current State: A state object reflecting success, error, or pending state. Submit Function: Passed directly to the form's action attribute. Pending Indicator: A boolean that tells you whether the action is still being processed. It’s not magic, it’s just better design. The Role of FormData Under the hood, React 19 uses the standard FormData API. This means your form data integrates smoothly with fetch() and server APIs. It’s iterable, lightweight, and supports native browser behaviors without needing a JSON transformation step. Want to learn more? Here’s the MDN reference for FormData. Do Form Libraries Still Matter? React 19’s Form Actions offer a compelling default for handling simple to moderately complex forms, especially those with linear input flows, basic validation, and limited state dependencies. For many use cases, that’s more than enough. But there are still valid reasons to reach for a library: Complex Field Logic: Dynamic forms with conditional field rendering, field-level validation rules, and deeply nested structures still benefit from libraries like Formik or React Hook Form. Custom Validation Systems: When you need schema-based validation (e.g., with Zod or Yup) tightly integrated with your form, third-party libraries provide more granular control and extensibility. Reusable Field Components: If you're managing dozens of input types with shared behaviors (debouncing, formatting, etc.), external libraries help abstract and standardize those patterns. Multi-Step or Wizard Flows: For forms spread across steps or pages, with persistent data across transitions, external form state management may offer cleaner separation and more control. React 19 narrows the gap significantly, but doesn't aim to replace every form tool. Instead, it raises the baseline, giving you a built-in option that handles the fundamentals exceptionally well. You may still choose external libraries, but now, it's a deliberate choice rather than a necessity. What This Means for the Future of React Development The addition of Form Actions in React 19 is more than a convenience feature: it signals a broader shift in how React aligns with the platform. In earlier versions, React often abstracted away browser behavior: it replaced native form mechanics with its own event system, encouraged state-driven rendering over traditional form submissions, and nudged developers toward controlled inputs. While powerful, this approach also created friction, especially for developers working closely with web APIs or server-side logic. Form Actions mark a shift in the opposite direction. React now leverages: The native FormData API, which integrates smoothly with server endpoints Progressive enhancement, letting forms degrade gracefully in environments without JavaScript Async-friendly patterns, like useActionState, that reduce complexity in managing submission flow By embracing standards and minimizing the need for scaffolding, React is moving closer to a model where simple things are truly simple, and complexity is opt-in, not baked in. For developers, this means: Less time writing glue code and handling edge cases More focus on user experience and business logic Cleaner mental models for state transitions and UI feedback React 19 doesn’t remove flexibility. It just gives you a stronger default. And that’s exactly what modern frontend development needs: guardrails that don’t get in your way. Go Deeper Want to dig further into React 19 and its new hooks pattern? Learn React Hooks by Daniel Bugl walks through this and more, covering everything from useEffect fundamentals to advanced composable logic. This change in form handling is more than just a new feature; it’s a sign that React is growing up. And for developers, that means less scaffolding and more building. Got 60 seconds? Tell us what clicked (or didn’t) SUBSCRIBE FOR MORE AND SHARE IT WITH A FRIEND! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Moving up the Cyber Kill ChainNeed something to read?Develop foundational skills in ethical hacking and penetration testing while getting ready to pass the certification exam. With cyber threats continually evolving, understanding the trends and using the tools deployed by attackers to determine vulnerabilities in your system can help secure your applications, networks, and devices. To outmatch attacks, developing an attacker's mindset is a necessary skill, which you can hone with the help of the Certified Ethical Hacker 312-50 Exam Guide.- Learn how to look at technology from the standpoint of an attacker- Understand the methods that attackers use to infiltrate networks- Prepare to take and pass the exam in one attempt with the help of hands-on examples and mock testsCheck it out today!#207: Child Cyber-Soldiers?A look at the issuesWelcome to another_secpro!Newsflash for those who missed it: Scattered Spider, the group that has been tied to a series of high-profile intrusions, raising fresh concerns about identity-based attacks and how fast threat actors are adapting, has been linked to a number of arrests in the UK. A number of young people have allegedly been involved with the cyber-gang, leading to arrests of 18, 19, and 21 year olds throughout England. As with the LAPSUS$ gang from yesteryear, it seems like another case of "innovative" young people turning to quick and dirty tactics and techniques to cause maximal damage.To get my fuller reflections on the case as it unfolds, check out this week's premium issue in the link below.Check out _secpro premiumBut, before we get bogged down in that, there's a whole newsletter still to go! Check out this week's articles, news, academic insights, and a few other little treats. If you want more, you know what you need to do - sign up to the premium and get access to everything we have on offer. Click the link above to visit our Substack and sign up there!Cheers!Austin MillerEditor-in-ChiefTime for a surveyWe're hoping to roll out some new features in the next few weeks, but we need your input. Check out the survey below and win afree month of _secpro premium!Check out the survey!This week's articlesWeaponization in the Cyber Kill ChainBefore attackers can steal data, lock up systems, or pivot through a network, they need to get their malicious code to a target. That step is delivery. It’s the moment the payload—often malware or a malicious script—is moved from the attacker’s infrastructure into the environment of the target.Read the rest here!How AI Is Changing the Ethical Hacking GameCybersecurity has always been a race between hackers and defenders. With AI in the mix, that race just got a whole lot faster.Today's hackers are using artificial intelligence to speed up their attacks, identify new vulnerabilities, and automate decision-making. That means defenders have to be just as smart—if not smarter. In CEH v13, AI is no longer a side note. It's now a core part of the modern ethical hacker's toolkit.In the new edition of theCertified Ethical Hacker (CEH) v13: Exam 312-50 Guide, we've added entire sections in each chapter on AI-assisted hacking. You'll learn how hackers are training AI models to spot weak configurations, build deepfakes for social engineering, and evade detection tools. You'll also see how defenders can use AI to turn the tables—automating log analysis, simulating attacks, and identifying threats faster than ever before.Here's just a glimpse of what's inside:- How ShellGPT helps automate information gathering and vulnerability detection- Real-world examples of AI being used in phishing, malware development, and evasion- What tools like Microsoft Security Copilot and other AI models are doing to reshape defensive securityThis isn't just some guess about what might happen in the future; it's happening right now. The book helps you understand how to use these tools responsibly and ethically, all while staying within the CEH framework. Plus, it gets you ready for the CEH Exam.Want to read the rest? Sign up for the premiumNews Bytes“NVIDIAScape” – Critical Privilege Escalation in NVIDIA Container Toolkit: A container escape flaw (CVE‑2025‑23266, dubbed NVIDIAScape) affects NVIDIA Container Toolkit ≤ 1.17.7 and GPU Operator ≤ 25.3.0. Attackers exploiting this could elevate privileges inside AI cloud environments, potentially enabling data tampering, info-leakage, or DoS.This is a high-severity vulnerability (CVSS 9.0) for Kubernetes/AI inference workloads—patching should be prioritized across GPU-enabled clusters.CERT‑UA Details “LAMEHUG” Malware Using LLM‑Driven Phishing (APT28): Ukraine’s CERT‑UA uncovered LAMEHUG, a phishing-delivery malware using LLM-generated commands based on description-based prompts. The toolkit is linked to Russian-nexus APT28. Phishing kits empowered by LLMs allow dynamic payload generation, complicating detection and expanding spearphish campaign sophistication.Matanbuchus 3.0 Advancing Through Microsoft Teams Vector: Morphisec researchers dissected Matanbuchus 3.0 loader using Teams-based command-and-control delivery. The updated loader shows improved evasion tactics and stealth functionality as a step towards further payloads like Cobalt Strike. A MaaS loader delivered via collaboration tools signals growing risk to hybrid workplaces—detecting lateral movement is critical.BlackSuit Ransomware: Hybrid Exfiltration & Encryption TTPs: Cybereason’s July 11 BlackSuit report reveals a ransomware operation employing dual tactics: data exfiltration followed by encryption. The post includes infection chain, C2 communications, and IoCs. This hybrid tactic means defenders must prepare for both extortion and data breach contingencies—and deploy faster detection on exfiltration.WordPress‑to‑NetSupport RAT Campaign via ClickFix Plugin: Another Cybereason alert (July 7) shows threat actors delivering NetSupport RAT through compromised WordPress sites using the “ClickFix” plugin. Their chain includes SQL injection and automated dropper. Highlights growing exploitation of third-party CMS plugins to automate RAT installs, emphasizing patching/whitelisting need.Qantas Breach Deep Dive + Patch Tuesday Zero‑Day Trends: CISO Platform’s July 9 internal report examines the Qantas breach (~5.7M users via third-party compromise), connecting it to Scattered Spider activity. It also analyzes Microsoft’s Patch Tuesday, including 1 zero-day and 14 critical CVEs. Includes IoCs and recommended defense tactics. Offers high-level view of supply chain risk (third-party breaches) and insight into patch handling strategies post-zero-day patch Tuesday.This week's academia“Certified Ethical Hacker Online Course – a Case Study” by Tam N. Nguyen: This study examines the instructional design of the CEH v10 online self-study course. It evaluates how well the course aligns with national instructional standards and peer-reviewed research on online education. The author highlights key design principles—such as community engagement, frequent quizzing, and feedback mechanisms—that are critical to learner success in preparing for the CEH exam. While it doesn’t present raw pass-rate numbers, it focuses on educational best practices that improve learning outcomes and thereby CEH exam performance.“An empirical analysis of ethical hacking” by S. Rafiq: This empirical study analyzes the role of Certified Ethical Hacker certification in professionalizing ethical hacking. It traces the historical establishment of CEH, its legitimacy-building efforts, and the interplay between technical skill and ethical accreditation. The authors argue that CEH aims to systematize “thinking like a hacker” and to formalize the reputation of ethical hackers in organizations. Though concrete pass-rate data isn’t central, the paper provides context on how CEH functions as both a credential and a professional benchmark.Upcoming events for _secpros this yearHere are the five conferences we're looking forward to the most this year (in no particular order...) and how you can get involved to boost your posture!DSEI (9th-12th September): DSEI stands out as a global platform that bridges defence, security, and cybersecurity. With its broad focus on cutting-edge technologies, this event is critical for those involved in national defence, law enforcement, and private security. Cybersecurity is a prominent theme, with sessions addressing both offensive and defensive cyber strategies.Defcon (7th-10th August): Defcon is a legendary event in the hacker and cybersecurity communities. Known for its hands-on approach, Defcon offers interactive workshops, capture-the-flag contests, and discussions on emerging threats. The conference is ideal for those looking to immerse themselves in technical aspects of cybersecurity.Black Hat (2nd-7th August): Black Hat USA is synonymous with advanced security training and research. This premier event features technical briefings, hands-on workshops, and sessions led by global security experts. Attendees can explore the latest trends in penetration testing, malware analysis, and defensive techniques, making it a must-attend for cybersecurity professionals.Check out the survey!*{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}}