🚀 GraphQL vs REST: Why Modern Apps Are Moving to GraphQL

fasil Zaman — Thu, 31 Jul 2025 17:50:54 +0000

APIs are the bridge between frontend and backend — and two approaches dominate the landscape: REST and GraphQL. While REST has been the industry standard for years, GraphQL is quickly becoming the favorite for modern developers.

In this blog, we’ll break down the key differences, advantages of GraphQL, and when to use each.

🌐 What is REST?

REST (Representational State Transfer) is an architecture that exposes multiple endpoints via standard HTTP methods (GET, POST, PUT, DELETE) to perform CRUD operations.

✅ Benefits of REST:

Simple and familiar
Easy to implement and debug
HTTP caching support
Widespread tooling support (Postman, Swagger)

But as frontend apps get more dynamic and complex, REST’s rigid structure can become a bottleneck.

⚡ What is GraphQL?

GraphQL, developed by Facebook, is a query language for APIs that allows clients to request exactly the data they need via one unified endpoint.

🔥 Benefits of GraphQL:

🎯 1. Precise Data Fetching

Request exactly what your UI needs — no more, no less.

⚡ 2. Fewer Network Requests

Fetch nested and related data in one request instead of chaining multiple REST calls.

📚 3. Strongly Typed Schema

GraphQL APIs are self-documenting and easily introspected. Tools like GraphQL Playground and Apollo DevTools make exploration fun.

🤝 4. Better Frontend-Backend Collaboration

Frontend developers can change queries without waiting for backend adjustments.

🔄 5. Real-Time with Subscriptions

Built-in support for real-time data via WebSockets.

🔍 REST vs GraphQL: Key Differences

Feature	REST	GraphQL
Endpoints	Multiple endpoints per resource	Single endpoint
Data Fetching	Predefined server response	Client-defined structure
Over/Under-fetching	Common	Avoided
Versioning	URL-based versioning (`/v1/users`)	Schema evolves without breaking clients
Tooling	Mature (Swagger, Postman)	Modern (Apollo, GraphQL Playground)
Caching	Easy with HTTP headers	More complex, requires custom strategies
Real-time	Requires third-party setups	Built-in with subscriptions

🛠️ When to Use What?

✅ Use REST if:

Your app is simple or legacy-based
You prioritize browser caching or CDN support
Your team is more comfortable with RESTful patterns

🚀 Use GraphQL if:

Your frontend is dynamic (e.g., React, Vue, mobile apps)
You want to reduce over-fetching and under-fetching
Your app has complex or nested data
You need faster frontend iteration without backend changes

🧠 Final Thoughts

GraphQL isn’t here to replace REST — it’s here to offer more flexibility, efficiency, and developer freedom.

If you’re building modern, data-rich UIs that evolve fast, GraphQL might just be your API superpower.

💬 Got thoughts or questions about REST vs GraphQL? Let’s discuss in the comments!

📌 Follow me for more dev blogs on frontend, APIs, and web performance.

Escaping the DOM with React Portals: Practical UI Rendering Techniques

fasil Zaman — Fri, 09 May 2025 18:07:18 +0000

Modern web apps often include dynamic elements like modals, tooltips, dropdowns, and popovers. These UI components need to float above everything else, but positioning them correctly can get tricky, especially when they're deeply nested in the DOM.

That’s where React Portals come in.

React Portals let you render components outside the normal DOM hierarchy, making it easier to handle z-index, positioning, and layering—without complicating your component logic.

In this guide, you’ll learn what React Portals are, why they matter, and how to use them to build cleaner, more flexible UIs.

🧠 What Are React Portals?

React Portals let you render a component outside its parent DOM node—perfect for things like modals or tooltips that need to break out of the usual layout, while still staying in the same React tree.

You create one using ReactDOM.createPortal.

ReactDOM.createPortal(child, container)

child is the JSX you want to render.
container is the DOM element you want to render into.

🔥 Why Use Portals?

Here are common situations where portals solve real-world problems:

Modals that must appear above all content
Tooltips that escape overflow: hidden on parent containers
Dropdowns that aren't clipped or misaligned
Sidebars or overlays that need consistent stacking and z-index behavior

Portals bypass CSS constraints like position, z-index, and overflow by rendering outside their logical parent containers, while keeping access to props, context, and state.

🛠️ Building a Modal with React Portals

Let’s walk through creating a simple modal component using a portal.

Step 1: Add a Modal Target to index.html
In public/index.html:

<div id="root"></div>
<div id="modal-root"></div>

The #modal-root is where the portal will mount its content.

Step 2: Create the Modal Component

// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
};

export default Modal;

The backdrop closes the modal when clicked
e.stopPropagation() prevents the inner modal from closing when clicked.

Step 3: Use the Modal in Your App

// App.js
import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <h1>React Portals in Action</h1>
      <button onClick={() => setOpen(true)}>Open Modal</button>

      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Hello from the Portal!</h2>
        <p>This modal is rendered outside the root DOM hierarchy.</p>
        <button onClick={() => setOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

And that’s it! 🎉 You've now successfully implemented a modal using portals and integrated it into your app.

🧩 React Portals and Context

A common concern is whether components rendered through portals lose access to React context or state.

Good news: They don't. A portal maintains the React tree structure, so your modal can still use context, hooks, and any inherited state logic just like any other component.

⚠️ Tips and Common Pitfalls

Accessibility & Keyboard Navigation: Make sure users can navigate modals with a keyboard. Use tools like focus-trap-react to manage focus properly when a portal is open.
Clean Up Side Effects: If your portal sets up event listeners, timers, or intervals, be sure to clean them up when the component unmounts to avoid memory leaks.
Server-Side Rendering (SSR): Portals rely on the document object, which doesn’t exist during SSR. Always check that document is available before using ReactDOM.createPortal in environments like Next.js.

🧠 When Not to Use Portals

Portals are not always necessary. If your modal, tooltip, or overlay works fine inside the current DOM flow, you may not need one. Use portals when layout constraints demand rendering outside.

✅ Final Thoughts

React Portals are a handy feature that lets you control exactly where elements are rendered in the DOM, while still keeping all the benefits of React—like component structure, state management, and reactivity.

They're perfect for things like modals, dropdowns, or tooltips, letting you render content outside of the usual component hierarchy without losing the power of React. If you need precise control over where something appears, *portals are the way to go!
*

Forem: fasil Zaman