DEV Community: Miguel Miranda

Master React Forms with Controlled and Uncontrolled Components

Miguel Miranda — Thu, 26 Jun 2025 19:17:52 +0000

Why Should You Understand This?

When you start working with forms in React, sooner or later you face this question:

Should I use a controlled or uncontrolled component?

It might seem like a minor technical decision, but understanding this difference impacts:

How you manage form state
How easily you can validate user input
How well your application scales

Let's explore why this matters, how each type works, and when to choose one over the other.

The Problem💥

Suppose you're building a contact form. Everything works fine until you need to:

Validate the input as the user types
Reset the fields from your code
Submit the form with complex logic

That's when the key difference appears:

Do you want React to control the input or not?

🔍 Controlled Components

A controlled component is one whose value is managed by React's state.

Every time the user types, an onChange event is triggered, updating the state and causing React to re-render with the new value.

Example:

import { useState } from "react";

function FormControlled() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Name:", name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

🔑 Key Points

✅ React always knows what's in the input
✅ Ideal for real-time validation and complex forms
❌ More code, potentially slower with heavy inputs (e.g., large <textarea>)

⚡ Uncontrolled Components

An uncontrolled component uses a reference (ref) to access its value. React does not manage the value — the DOM handles it directly.

Why?

Libraries like Stripe Elements, TinyMCE, or even an embedded YouTube video player are not designed for React. They:

Render directly to the DOM (outside React's control)
Expect the DOM to be ready before they mount
Use their own internal systems to listen to events and update their content

If you try to control these kinds of inputs with React’s value and onChange, you may run into conflicts — or it may simply not work at all.

Example:

import { useRef } from "react";

function FormUncontrolled() {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Name:", nameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

🔑 Key Points

✅ Less code and faster for simple inputs
✅ Useful for integrating external libraries (e.g., DOM APIs or legacy forms)
❌ Harder to validate or control in real time

🧪 Real-World Applications

Suppose you're building a login form with real-time validation. Controlled components are perfect here:

<input
  value={email}
  onChange={(e) => {
    setEmail(e.target.value);
    setError(validateEmail(e.target.value));
  }}
/>

But if you're integrating something like Stripe Elements, where the input is rendered by their API, you’ll need to use an uncontrolled component with ref.

📸 Visual Illustration

⚔️ Side-by-Side Comparison

Aspect	Controlled	Uncontrolled
Who manages the value?	React (`useState`)	DOM (`ref`)
Real-time validation	✅ Easy	❌ Harder
Library integration	❌ Sometimes tricky	✅ More straightforward
More code required	✅ Yes	❌ No
Performance	❌ Can be slower	✅ Faster for simple inputs

✅ When to Use Each

Scenario	Best Option
Forms with validation	Controlled
Simple forms or performance concerns	Uncontrolled
Integration with external libraries	Uncontrolled
Dynamic form logic or state syncing	Controlled

🧠 Conclusion

This isn't just React trivia...
It’s key to building forms that scale, are predictable, and provide a great user experience.

💡 General Rule:

If you need validation, dynamic updates, or syncing with state → controlled.

If you need simplicity or work with external tools → uncontrolled.

👋 If you found this article interesting or want to get in touch, I’m active on X @mirchezz

React State: How It Powers Dynamic UIs 🚀

Miguel Miranda — Mon, 09 Jun 2025 00:43:02 +0000

1. The Problem: Keeping track of UI changes (analogy)

Imagine you’re managing a restaurant.

You have a whiteboard showing:

How many free tables are left.
Which dishes are available.
The current queue of orders.

If the staff forgets to update the board, customers will see incorrect information.

The same happens in a web app: the UI must stay in sync with the underlying data.

The problem in React apps

Modern UIs are event-driven: users click, type, submit, navigate.

APIs respond asynchronously.

Without a predictable way to manage state, your components can become out of sync — showing stale or incorrect data.

React’s declarative model needs state to drive re-renders correctly.

2. A Better Solution: State & `useState`

In React, State is the source of truth for a component.

When state changes → React triggers a re-render, updating the UI to reflect the current state.

How `useState` works

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Think of it as...

📝 A reactive variable:

When count changes → React automatically re-renders this component.

Key principles

✅ Declare state with useState(initialValue)

✅ Update state via the setter (setCount)

✅ State changes trigger reactive re-renders

✅ UI always reflects the current state

3. Why It Matters

Ensures UI & data stay in sync
Drives reactive UIs with automatic updates
Core to React’s model: state → UI
Enables user interactions: forms, counters, filters, modals, etc.

Common pitfalls

❌ Overusing global state when local useState would suffice

❌ Mutating state directly instead of using the setter

❌ Putting too much state in a parent → unnecessary re-renders of child components

❌ Forgetting that state updates are async (batching)

Conclusion

State is the foundation of React’s reactivity.
It allows your components to respond to user actions and external events seamlessly.

Mastering state management is key to building robust, scalable and dynamic React applications.

If your UI needs to change — you’ll be working with state!

👋 If you found this article interesting or want to get in touch, I’m active on X @mirchezz

Webhooks 101: Let the Server Notify You

Miguel Miranda — Wed, 28 May 2025 00:02:31 +0000

1. The Problem: "Are we there yet?" (Polling explained)

Last week, I was implementing authentication in a project and got stuck at a point where I couldn't save a newly logged-in user. So, I tried something that isn't considered a good practice in development: I implemented a polling system that runs every ten seconds.

What is Polling?

Polling is when your app keeps asking an API:

"Do you have anything new for me?"

The problems with this are:

Unnecessary network traffic.
Wasted server resources.
Delays in reacting to actual changes.
Not great for optimization.

2. A Better Alternative: Webhooks (Event-driven communication)

Now imagine instead of asking over and over, the server tells you the moment something happens.

That’s exactly what Webhooks do.

How Webhooks Work

Your app registers a webhook URL with the source system.
When an event occurs (e.g., a payment), the source system sends a POST request to your webhook endpoint.
Your system processes the event immediately — no delays, no questions asked.

Think of it like receiving a push notification, instead of constantly refreshing the page.

🛍️ Real-world example (eCommerce):

You can use webhooks to get notified when:

A customer completes a purchase
A cart is abandoned
Inventory is updated

3. Webhook Example in TypeScript (Next.js App Router)

Here's a simple and functional webhook endpoint using TypeScript with Next.js 13+ (App Router). This code handles incoming events like user.created and user.deleted from an external service (like Clerk or Stripe).

📁 File: `/app/api/webhook/route.ts`

import { NextRequest, NextResponse } from 'next/server';

// This function handles POST requests coming to /api/webhook
export async function POST(req: NextRequest) {
  try {
    // Parse the incoming JSON payload
    const body = await req.json();

    // Extract the event type and the actual data
    const eventType = body.event;
    const userData = body.data;

    // Log the event for debugging purposes
    console.log(`Received event: ${eventType}`, userData);

    // Handle different event types based on your provider (e.g. Clerk, Stripe)
    switch (eventType) {
      case 'user.created':
        // Save the new user to your database or take any other action
        console.log('Saving new user:', userData);
        break;

      case 'user.deleted':
        // Remove the user from your database
        console.log('Deleting user:', userData);
        break;

      default:
        // Log unhandled events for further inspection
        console.warn('Unhandled event type:', eventType);
    }

    // Return a success response
    return NextResponse.json({ message: 'Webhook received' }, { status: 200 });
  } catch (error) {
    // Catch any errors that occur during processing
    console.error('Error handling webhook:', error);
    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
  }
}

It's pretty easy to implement. This is what happens after the webhook sends information to the registered URL when an event occurs in the external service.

4. Why It Matters

Efficiency: No need for repetitive API calls.
Real-time updates: React as soon as something happens.
Scalability: Reduce load and improve performance.

Webhooks let systems communicate only when it matters, not every few seconds.

Conclusion

If you're building systems that need to react to changes from external sources, Webhooks are the modern, scalable way to do it.

They’re simple, fast, and extremely useful in today's event-driven world.

👋 If you found this article interesting or want to get in touch, I’m active on X @mirchezz

HTTP? 🤔 The Web's Unsung Hero Explained

Miguel Miranda — Sat, 17 May 2025 21:46:22 +0000

🌍 A Bit of History — Where HTTP Came From

Back in 1989, Tim Berners-Lee invented the World Wide Web (WWW). But it wasn’t just websites — it was a system of protocols, and one of them was HTTP: the HyperText Transfer Protocol.

HTTP was designed as a simple way to send hypertext (HTML) documents between computers. This allowed the user to experience a more dynamic and interactive way to access information.

Since then, HTTP has evolved (currently at HTTP/3), but its core idea hasn’t changed:

"Let the client ask, and let the server answer."

That basic principle powers nearly every web app today. Without HTTP, the internet would not look, feel, or behave as it does.

Request vs response:

📡 What Is an HTTP Request and Response?

When your browser opens a website, it sends an HTTP request.

The server replies with an HTTP response.

🟦 Request Structure

An HTTP request typically includes:

Start line: Method (GET, POST, PUT, DELETE), path, protocol version
Headers: Info like content type, length, user-agent, tokens.
Body: Optional — used in methods like POST or PUT to send information to the server.

🟨 Response Structure

A server sends back:

Start line: Protocol version + status code like so:

1xx - Informational

2xx – Success

3xx – Redirection

4xx – Client Error

5xx – Server Error

Headers: Metadata like content-type, caching rules
Body: Often contains the HTML or JSON payload

📸 Request vs Response diagram:

💻 Example: Making an HTTP Request in TypeScript

Let’s say we want to send a POST request with JSON to an API:

async function sendData() {
  const response = await fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
  });

  if (!response.ok) {
    console.error("Request failed with status:", response.status);
    return;
  }

  const data = await response.json();
  console.log("Response data:", data);
}

As we can see the fetch sent a Post Request:

{
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name: "Miguel", email: "miguel@example.com" }),
  }

This includes, of course the three main parts of a HTTP request.

📶 TCP/IP Model (Where’s HTTP?)

HTTP sits at the Application layer of the TCP/IP model:

Application ← HTTP lives here 🌐
Transport ← TCP handles the delivery 📦
Internet ← IP takes care of addresses 📮
Link ← Ethernet/WiFi physically connects ⚡

Key Things to Keep in Mind:

HTTP is a stateless protocol.

Each request is independent. The server doesn’t remember the last thing you asked.
The connection is not bidirectional meaning the server cannot send request by himself to the client.
If you want persistent connections, you need tools like WebSockets, which are also another type of protocol we use daily, like in videogames, videocalls or chats.

🧠 Final Thoughts
HTTP may feel invisible, but it’s everywhere. It silently handles the exchange of information between browser and server.

📚 References

MDN Web Docs – HTTP Overview – The most complete and reliable documentation for web protocols.
MDN Web Docs – fetch() API – Official reference for making HTTP requests in JavaScript and TypeScript.

👋 If you found this article interesting or want to get in touch, I’m active on X @mirchezz

DEV Community: Miguel Miranda

Master React Forms with Controlled and Uncontrolled Components

Why Should You Understand This?

The Problem💥

🔍 Controlled Components

Example:

🔑 Key Points

⚡ Uncontrolled Components

Example:

🔑 Key Points

🧪 Real-World Applications

📸 Visual Illustration

⚔️ Side-by-Side Comparison

✅ When to Use Each

🧠 Conclusion

React State: How It Powers Dynamic UIs 🚀

1. The Problem: Keeping track of UI changes (analogy)

The problem in React apps

2. A Better Solution: State & useState

How useState works

Key principles

3. Why It Matters

Common pitfalls

Conclusion

Webhooks 101: Let the Server Notify You

1. The Problem: "Are we there yet?" (Polling explained)

What is Polling?

2. A Better Alternative: Webhooks (Event-driven communication)

How Webhooks Work

3. Webhook Example in TypeScript (Next.js App Router)

📁 File: /app/api/webhook/route.ts

4. Why It Matters

Conclusion

HTTP? 🤔 The Web's Unsung Hero Explained

🌍 A Bit of History — Where HTTP Came From

📡 What Is an HTTP Request and Response?

🟦 Request Structure

🟨 Response Structure

💻 Example: Making an HTTP Request in TypeScript

📶 TCP/IP Model (Where’s HTTP?)

Key Things to Keep in Mind:

📚 References

2. A Better Solution: State & `useState`

How `useState` works

📁 File: `/app/api/webhook/route.ts`