DEV Community: Kazi Tajnur Islam

React 19 for the Power Users

Kazi Tajnur Islam — Tue, 18 Nov 2025 11:42:14 +0000

React 19 marks a new chapter for advanced developers. Beyond the flashy features, it redefines how we approach performance optimization and state management through modern hooks.

In this post, we’ll dissect these improvements and walk through practical examples you can drop straight into production.

🧠 Why React 19 Matters for Advanced Developers

React 19 isn’t just another incremental update.

It introduces:

A compiler that automates memoization.
Server Components that streamline hydration.
New hooks (useActionState, useOptimistic, useFormStatus) for cleaner async and form logic.
Internal scheduling improvements for faster, smoother rendering.

⚡ Smarter Performance with the React 19 Compiler

React 19’s compiler reduces the need for useMemo and useCallback micro-optimizations.

// Before (React 18)
const Price = ({ value }) => {
  const formattedValue = useMemo(() => formatCurrency(value), [value]);
  return <span>{formattedValue}</span>;
};

// Now (React 19)
const Price = ({ value }) => <span>{formatCurrency(value)}</span>;

The compiler automatically memoizes pure computations.
✅ Less boilerplate
✅ Fewer dependency bugs
✅ Smaller bundles

🔍 Tip: Still use manual memoization when your function isn’t pure or depends on external state.

🧩 New Hooks for Real-World Power Users

`useActionState`

This hook handles asynchronous actions (submissions, updates) with built-in loading and error tracking.

import { useActionState } from 'react';

async function action(_, formData) {
  const email = formData.get('email');
  return await sendEmail(email);
}

const initState = { success: false };

function EmailForm() {
  const [state, submit, isPending] = useActionState(action, initState);

  const handleSubmission = (e) => {
    e.preventDefault();
    submit(new FormData(e.target));
  };

  return (
    <form onSubmit={handleSubmission}>
      <input name="email" type="email" required />
      <button disabled={isPending}>Subscribe</button>
      {state.success && <p>Subscribed!</p>}
    </form>
  );
}

`useOptimistic`

Perfect for instant feedback on slow network actions.

import { useOptimistic } from 'react';

function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useOptimistic(() => initialLikes);

  async function like() {
    setLikes(likes + 1);
    try {
      await fetch(`/api/like/${postId}`, { method: 'POST' });
    } catch {
      setLikes(likes - 1); // rollback
    }
  }

  return <button onClick={like}>👍 {likes}</button>;
}

🔄 Combining Hooks for Complex Workflows

Hooks in React 19 compose beautifully.
Here’s how to combine useTransition + useActionState for concurrent updates.

import { useTransition, useActionState } from 'react';

async function action(_, id) {
  await updateDashboard(id);
  return { current: id };
}

const initState = { current: 'sales' };

function DashboardSwitcher() {
  const [pending, startTransition] = useTransition();
  const [state, switchDashboard] = useActionState(action, initState);

  return (
    <div>
      <button
        disabled={pending}
        onClick={() => startTransition(() => switchDashboard('engineering'))}>
        Switch to Engineering
      </button>
      <p>Current: {state.current}</p>
    </div>
  );
}

🚀 Server Components and Rendering Wins

React 19 improves Time-to-Interactive by letting you render most logic on the server.

// UserList.server.jsx
export default async function UserList() {
  const users = await getUsers();
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Move fetch logic server-side → fewer client bundles → faster hydration.
Result: less JS on the client, more stable performance.

🧰 Migration & Best Practices

✅ Upgrade incrementally — React 19 is mostly backward-compatible.
🧮 Profile your renders with React Profiler.
🪶 Push logic to Server Components when possible.
🔄 Use useOptimistic for UI speed, but handle rollbacks gracefully.
🧱 Keep your hooks pure and predictable.

📊 Measuring Performance Gains

Benchmark before and after migration:

Lighthouse – check TTI, FID, CLS
React Profiler – visualize renders
Bundle Analyzer – confirm size reduction

You’ll typically see:

30–40% fewer client renders
Smaller bundle sizes
Lower hydration time

🧭 Final Thoughts

React 19 is a game-changer for teams that care about speed, scalability, and code clarity.
By combining the new compiler with modern hooks and smarter rendering boundaries, you’ll build apps that feel faster — without sacrificing maintainability.

Next Steps:

Experiment with one feature (like useOptimistic).

Measure.

Scale it to production.

Why React Uses State Instead of Plain JavaScript Variables

Kazi Tajnur Islam — Wed, 29 Oct 2025 09:39:16 +0000

When you’re starting out with React, one of the first concepts you encounter is state. At first glance, you might wonder: Why can’t I just use a regular JavaScript variable to store my data? After all, JavaScript variables can hold values, and you can update them anytime. So why does React introduce this extra concept called state?

Let’s break it down in a simple, developer-friendly way.

1. JavaScript Variables Don’t Trigger UI Updates

In vanilla JavaScript, if you store a value in a variable and change it, the browser won’t magically update the UI. For example:

let count = 0;
count = count + 1;
console.log(count); // 1

The value changes in memory, but nothing in the UI changes unless you manually select DOM elements and update them yourself (e.g., using document.getElementById().innerText = count).

React, however, is designed around the concept of declarative UI. You describe what the UI should look like based on data, and React takes care of updating the DOM when that data changes. That’s where state comes in.

2. State Triggers React’s Re-render Cycle

When you update a state variable in React using setState, React knows that something has changed. It then re-renders the component and updates the UI.

Example with useState:

import { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Here’s the magic:

count is tied to the UI ({count} inside the <p> tag).
When you call setCount, React re-runs the Counter function, calculates the new UI, and updates the DOM automatically.

If you tried this with a plain JavaScript variable, the UI would never re-render unless you forced it.

3. React’s Virtual DOM Needs State Awareness

React uses a concept called the Virtual DOM to optimize rendering. Instead of updating the real DOM directly on every change (which is slow), React:

Keeps a lightweight copy of the DOM in memory (the Virtual DOM).
Recomputes what the UI should look like when state changes.
Efficiently updates only the parts of the real DOM that changed.

Without state, React wouldn’t know when it needs to re-run this process.

4. State Is Persistent Across Re-renders

One subtle but important difference is that React preserves state across renders. When a component re-renders, local JavaScript variables reset. For example:

function Counter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return (
    <div>
      <p>Count is: {count}</p>
      <button onClick={increment}>Click Me</button>
    </div>
  );
}

Every time the component re-renders, count resets back to 0. That means the UI never reflects the real value. With useState, React keeps the value safe between renders.

So Why Not Just Variables?

To summarize:

Variables change values, but React won’t notice.
State changes tell React: “Hey, something changed—re-render the UI.”
State values persist across renders, unlike plain variables.
React’s Virtual DOM system depends on state to know when to update.

Without state, React would just be a fancy templating engine. State is what gives React its power and efficiency.

Using state instead of plain variables might feel unnecessary at first, but once you understand how React’s re-render cycle works, it makes total sense. State is the bridge between your data and your UI. It ensures your app stays predictable, maintainable, and reactive.

So next time you’re tempted to use a plain variable, ask yourself: Will this value affect the UI? If the answer is yes, put it in React state.

Modern JavaScript Operators You Should Be Using in 2025

Kazi Tajnur Islam — Tue, 27 May 2025 14:15:57 +0000

JavaScript has always been a flexible language, but recent updates have made it more powerful and expressive than ever. If you're still using workarounds for set operations, verbose promise control, or awkward chaining, it's time to update your toolbox.

In this post, we’ll explore some of the most useful new operators and built-in methods introduced in recent ECMAScript releases that every modern JavaScript developer should know.

1. `Set.prototype.intersection()` and `Set.prototype.difference()`

Performing set operations in JavaScript used to be a pain. You had to loop manually or use libraries like Lodash. But not anymore.

const first = new Set([1, 2, 3]);
const second = new Set([2, 3, 4]);

const intersectionResult = first.intersection(second); // Set {2, 3}
const differenceResult = first.difference(second); // Set {1}

These are now native methods (in ES2024+), and they make your code more readable and concise.

2. `Promise.withResolvers()` – Total Control Over Promises

Ever wanted to manually resolve or reject a promise outside of its constructor? This pattern was messy until now.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
  resolve('Done!');
}, 2000);

promise.then(console.log); // Output: Done!

It’s especially handy in testing, queue management, and advanced async flows. No more messy new Promise hacks.

3. Logical Assignment Operators (`&&=`, `||=`, `??=`)

A more elegant way to write conditional assignments.

let user = { isActive: false };

// Instead of:
if (!user.isActive) user.isActive = true;

// Use:
user.isActive ||= true;

Works similarly for &&= (only assign if truthy) and ??= (only assign if nullish).

These improve code brevity and are especially useful for assigning objects' properties.

4. Numeric Separators for Readability

Not a new operator per se, but a quality-of-life improvement you should definitely use.

const budget = 1_000_000;
const byteSize = 64_000_000;

console.log(budget); // 1000000

Your future self (and teammates) will thank you.

5. The Pipeline Operator (`|>`) – Cleaner Functional Chaining

The pipeline operator |> is a proposed (still in Stage 2) JavaScript syntax that allows for chaining function calls in a more readable way. It takes the result of an expression and passes it as an argument to the next function in the chain. This can help to avoid deeply nested function calls and make code easier to read and maintain.

const appendWorld = (str) => str + ' world';
const toUpperCase = (str) => str.toUpperCase();
const splitString = (str) => str.split(' ');

Before

const result = splitString(toUpperCase(appendWorld('hello'))); 
// Output: ["HELLO", "WORLD"]

After (`|>` pipeline operator)

const result = 'hello'
  |> appendWorld
  |> toUpperCase
  |> splitString;
// Output: ["HELLO", "WORLD"]

Much easier to read — especially when transformations get long. It’s inspired by Unix-style piping and functional programming.

NOTE: The pipeline operator is still a proposal and is not yet supported by all browsers. To use it, you may need to use a transpiler such as Babel.

JavaScript in 2025 is more expressive, readable, and developer-friendly than ever. Embracing these new operators isn't just about cleaner code — it's about writing code that's easier to debug, easier to teach, and easier to love.

Start using them in your projects or refactor parts of legacy code where it makes sense. And if you're preparing for interviews or working on open-source, these features can give you a solid edge.

Loved it? React, comment, and share!

What’s your favorite modern JavaScript feature that saved you time or simplified logic? Let’s discuss in the comments!