DEV Community: Asad Ullah

React Amazing Facts

Asad Ullah — Fri, 05 Jun 2026 12:49:46 +0000

My last week's research and knowledge about ReactJS

React server components are changing the way web apps are built. But a lot of conversation, and your reality is way more complicated than they really are. After this, my documentation will be read to you completely. You can say this is easier, and best practices for your code structure, and your coding level boost as an experience level.

So, think of it...!
React sends JavaScript to the browser, and then the browser builds your UI. Now, with the server component, React builds part of the UI on the server first, then sends the resulting pieces. So, it's kind of like getting a partially assembled IKEA furniture instead of just a piece and instructions

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");

  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div>
      <h1>Users List</h1>

      {users.slice(0, 3).map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

Example Explanation:
React Server Components fetch data on the server first, build the UI there, and then send ready-made HTML to the browser — just like receiving partially assembled IKEA furniture instead of building everything yourself in the browser.

Now, let's look at the Server Components

Now we are building the same thing as a server component, and notice it's an asynchronous function.
You can read the code below:

import db from "@/lib/db";

export default async function UsersPage() {
  // Data fetched directly from database
  const users = await db.user.findMany();

  return (
    <div>
      <h1>Users List</h1>

      {users.slice(0, 3).map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}

const db = {
  user: {
    findMany: async () => {
      return [
        {
          id: 1,
          name: "Asad Ullah",
          email: "developerfrontend786@gmail.com",
        },
        {
          id: 2,
          name: "Johnas Schmedtmann",
          email: "jonas@johnas.io",
        },
        {
          id: 3,
          name: "Brad Traversy",
          email: "bradtraversy@mail.com",
        },
      ];
    },
  },
};

export default db;

Now I hope this code example makes good sense for you.

You can see in this image and code that I'm hitting the database directly. There is no hook; I'm using just await, no API calls, no client-side data fetching. So the component runs on the server, grabs the data, and then sends the finished HTML to the browser.

Now you can see there are three big wins here:

You have a smaller JavaScript Bundle **Smaller JavaScript **bundle because server logic doesn't ship to the browser.
Direct Database access Direct Database access, which means faster data fetching
SEO Faster and Better Now we can a extra benefit with our browser behavior and better work is SEO. Because the content is rendered on the server.

I've seen the app reduse there bundle size 30% just by moving data fetching to the server components. Now, one thing to remember is that server components can't use hooks and handleEventFunctions. So there are for the data fetching and rendering. This does not mean you should leave regular client components. You still need to use regular client components for interactive stuff like buttons, form handling, and other features like a CRUD system

ReactJS Facts & Tricks That 90% Developers Learn Too Late

Asad Ullah — Wed, 20 May 2026 09:37:51 +0000

Most developers think! React is based on any UI library

Most developers think React becomes powerful because of UI libraries like MUI, Ant Design, or Chakra UI.
But the truth is the opposite.
React becomes truly powerful when you understand how to build scalable UI systems without depending entirely on heavy abstractions. Libraries can speed up development. But they can also hide React’s real capabilities. And many developers, even with 5+ years of experience, never fully discover them.

1. React’s Biggest Power Is Component Composition

Most developers use React like this:

<Button />
<Card />
<Modal />

But React’s real superpower is composition.
Example:

<Modal>
  <Modal.Header />
  <Modal.Body />
  <Modal.Footer />
</Modal>

This pattern allows you to** build your own design systems instead of depending** on external UI libraries. Most developers use components. Very few build component architectures.

2. You Don’t Need MUI to Build Enterprise-Level UI

This surprises many developers.

A properly structured React app with:

reusable primitives
composition
utility classes
design tokens
custom hooks can scale more cleanly than many heavy UI-library-based projects. **

Why?

Because you fully control:

rendering
styling
bundle size
architecture
accessibility
performance

Heavy UI libraries often introduce:

unnecessary abstractions
large bundle sizes
styling conflicts
difficult overrides
deep dependency chains

3. Most Developers Never Learn Headless UI Architecture

This is one of React’s hidden powers.
Instead of coupling:
logic + styles + markup
Advanced React systems separate them.

const { open, toggle } = useDropdown()

Now the UI can be anything:

Tailwind
CSS Modules
Styled Components
Vanilla CSS
completely custom design systems

> This is called headless architecture. Many senior developers still never learn this pattern deeply.

4. React Components Can Behave Like XML-Based Systems

This is where React becomes extremely powerful.
Example:

<Table>
  <Table.Header />
  <Table.Body />
  <Table.Row />
</Table>

This looks almost like a custom XML language, and that’s the hidden beauty of React. You are not just building pages. You are designing your own UI language. This is how advanced systems and design frameworks are created internally at large companies.

5. Compound Components Are One of React’s Most Advanced Patterns

Most developers never master this.
Example

<Tabs>
  <Tabs.List />
  <Tabs.Tab />
  <Tabs.Panels />
</Tabs>

This Creates:

clean APIs
scalable UI systems
reusable architectures
flexible component control MUI internally uses many of these architectural ideas. But most developers use the library without understanding the pattern underneath it.

6. React Is More Powerful Without Over-Abstraction

Many developers become trapped inside UI ecosystems.
Eventually:

Customization becomes difficult
Performance becomes harder to optimize
Styling becomes inconsistent
Components become dependent on library APIs

But when you deeply understand:

Composition
State architecture
Render control
Reusable primitives
You can build systems that are:
Lighter
Faster
Cleaner
Easier to scale

7. Most Developers Never Build Their Own UI Primitives

This is a huge missed opportunity.
Instead of importing:

<Button />

Advanced React engineers often build:

<BaseButton />
<IconButton />
<PrimaryButton />
<DangerButton />

From small reusable primitives.
This gives:

Total design control
Consistency
Scalability
Maintainability

8. React’s Real Power Is Separation of Concerns

Most beginners mix:

UI
API logic
Permissions
Validation
State management Inside components. Advanced React systems separate everything. Example structure:

/features
  /auth
    auth.api.js
    auth.store.js
    auth.hooks.js
    AuthModal.jsx

This architecture matters far more than which UI library you use.

9. Most React Developers Never Understand Render Control

React is not just rendering components.
It is managing:

Identity
Reconciliation
State preservation
Tree comparison
Dependency tracking Example:

<Component key={id} />

This can completely recreate a component instance.
That single line can:

Reset forms
Restart animations
Clear internal state
Force fresh lifecycle behavior Most developers never intentionally use this power.

10. The Best React Developers Build Systems, Not Screens

Junior developers build pages. Senior developers build reusable systems.
Elite React engineers build:

Design systems
Component APIs
Render architectures
Reusable primitives
Scalable frontend ecosystems And that is where React becomes more powerful than most developers ever realize. Final Thought Most developers use React to consume UI libraries. Very few learn how React itself can become the UI system. That is the hidden difference between using React… and mastering it.

JavaScript more efficient and readable code for make a calculator with only 20 lines with

Asad Ullah — Sat, 21 Jan 2023 17:46:02 +0000

Eval Function for a Calculator

Click Here for visit the calculator and its code
This is very very best way to improve and make efficient for our code. The eval() function is very helpful to make efficient, readable and maintainable. As we know about eval() function the eval() is a function property of the global object. The argument of the eval() function is a string. It will evaluate the source string as a script body, which means both statements and expressions are allowed. It returns the completion value of the code. For expressions, it's the value the expression evaluates to.

Comment me if you have impressive by this calculator.

Click Here for visit the calculator and its code

JavaScript Tips and Tricks: difference between VAR and LET variables Concept.

Asad Ullah — Tue, 13 Sep 2022 11:49:52 +0000

Difference between `VAR and LET`

As we know in order to declare a variable in JavaScript we have two options either declare with var or declare with let. Now the question is when to use var and when to use let. What are the major difference between both.

The main difference between let and var is that scope of a variable defined with let is limited to the block in which it is declared while variable declared with var has the global scope. So we can say that var is rather a keyword which defines a variable globally regardless of block scope.

The scope of let not only limited to the block in which it is defined but variable with let also do not get added with global window object even if it get declared outside of any block. But we can access variable with var from window object if it is defined globally.

Due to limited scope let variables are usually used when there is limited use of those variables such as in for loops, while loops or inside the scope of if conditions etc while var variable is used when value of variable need to be less change and used to accessed globally.

Follow this code to check the differentiate between VAR and LET

let a = 'hello'; // globally scoped
var b = 'world'; // globally scoped
console.log(window.a); // undefined
console.log(window.b); // 'world'
var a = 'hello';
var a = 'world'; // No problem, 'hello' is replaced.
let b = 'hello';
let b = 'world'; // SyntaxError: Identifier 'b' has already been declared

JavaScript Const re-assignment in Array with full Concepts

Asad Ullah — Thu, 01 Sep 2022 19:40:36 +0000

Variable `Const`

As we know that the "const" keyword was included in ES6(2016). The const variable cannot be reassign the value. JavaScript const variables must be assigned a value when they are declared like this...

const firstName = "Sayyed Asad";

But this is a general rule, always declare a variable with const unless you know that the value will change.
Use const when you declare...

New Array
New Object
New Function
New Regexp

How would be re-assignment of const in an array and what's the reason about that behind the concept of this topic?

const developers = ['Sayyed Asad', 'Nisar', 'Toqeer'];
developers[2] = 'Jonas';

So, first of all as a good experience in the JavaScript. I should be inform you here is const is manipulate. But I was still able to change one element of the Array here from Toqeer to Jonas.That is only primitive value. But an Array is not a primitive value. And so we can actually always change it so we can mutate it.

If you have some knowledge from my article. So, please follow me and share this post and like and comment on bellow this post.

HTML Tips And Trick For Everyone

Asad Ullah — Wed, 24 Aug 2022 17:38:26 +0000

Title Bar `Add Icon`

The many beginners have no any idea to about title bar's icon. But this is vary simple trick to add any icon on title bar just download any letter image for practice and do follow my code.

<head>
  <title>Sayyed Asad Ullah</title>
  <link rel="icon" href="letter-A.png">
</head>

Add Video in Website `Video Tag`

When we need to add a video in our site. So then we need to use video element. But in HTML 5 we can add a video using with video element. But in this case we apply using with source element and source attribute. Because the reason is about that to add a video we need both these mark code.

`html

video and audio `controls attribute`

We can control our audio and video volume as low or high as we want with using controls attribute.In addition, we can also pause or play our video and audio with using controls attribute.