DEV Community: Hugo Naili

What is the global object in JavaScript? A practical guide for developers

Hugo Naili — Wed, 29 Apr 2026 01:27:05 +0000

The JavaScript global object and scope are a key part of building apps with JavaScript. Unfortunately, they are easy to misunderstand and misuse, leading to negative impacts on your application's functionality, performance, and security.

This guide covers what the global object is, how JavaScript scopes work, and how to safely create and access global variables and functions across different environments.

What is the global object in JavaScript?

The global object in JavaScript is available to all parts of your code. Any variables or functions inside it are in the global scope, meaning they can be used in functions, nested callbacks, and modules — wherever they are.

The global object has a different name depending on your environment:

Environment	Global object
Browser	`window`
Node.js	`global`
Web Worker	`self` (or `this`)

Because of this inconsistency, globalThis was introduced to provide a single, standardized way to access the global object in any environment. More on that later.

The JavaScript global scope

JavaScript scopes (also called contexts) determine where a declared variable or function is accessible. Each scope has access to variables and functions declared in its parent scopes.

When JavaScript resolves a variable name, it starts at the current scope and works upward toward the global scope. The first match it finds wins.

Scope	Description
Global scope	Variables and functions declared outside any module, function, or block
Module scope	Variables and functions inside a module — isolated, not accessible from other modules
Function scope	Variables and functions declared inside a function — only accessible within that function
Block scope	Variables declared with `let` or `const` inside `{}` — only accessible within that block

Note on local scope: "Local scope" is an informal term that refers to either function scope or module scope, depending on context. A variable declared inside a function is local to that function; a variable declared inside a module is local to that module.

When you should (and shouldn't) use the global object

Each JavaScript environment comes with its own built-in globals:

Browser — window exposes the DOM, alert popups, console, localStorage, geometry info, base64 utilities, and more.
Node.js — global exposes module imports, process.env for environment variables, timers, and more.
Workers — additional globals for shared scope access between the window and other workers.

These built-in globals are safe and intended to be used. Where you need to be careful is when adding your own variables to the global scope. Avoid:

Naming a variable the same as an existing built-in global
Storing sensitive data (like user credentials or API tokens) in globals where they could be unintentionally exposed
Reusing variable names across scopes, which can cause a function to silently read a global instead of a local value

Over-relying on globals also has long-term costs:

Harder to debug — globals can be modified from anywhere, making it difficult to trace unexpected values
Memory overhead — globals persist for the lifetime of the page or process
Namespace pollution — too many globals increases the risk of naming conflicts

The best practice is to use globals as strategically and sparingly as possible.

How to create and access global variables in JavaScript

Scope Set a global variable from this scope Access a global variable from this scope

Scope	Set a global variable from this scope	Access a global variable from this scope
Global Declared variables and functions are automatically global	Browser: `var myVariable = 'foo';` Node.js: `var myVariable = 'foo';` Worker: `var myVariable = 'foo';`	Browser: `console.log(myVariable)` Node.js: `console.log(myVariable)` Worker: `console.log(myVariable)`
Function/local/block Global variables/functions must be declared in the global object	Browser: `window.myVariable = 'foo';` Node.js: `global.myVariable = 'foo';` Worker: `this.myVariable = 'foo';`	Browser: `console.log(window.myVariable)` Node.js: `console.log(global.myVariable)` Worker: `console.log(this.myVariable)`
Module Each module has its own global scope, so global variables declared in one module will not be present in another	Within modules, global, function, and block scopes behave the same way as in other environments. Functions inside modules have their own function scope and must access the module's global scope through `window`, `global`, or `this`.

Global

Declared variables and functions are automatically global

Browser: var myVariable = 'foo';

Node.js: var myVariable = 'foo';

Worker: var myVariable = 'foo';

Browser:

console.log(myVariable)

Node.js:

console.log(myVariable)

Worker:

console.log(myVariable)

Function/local/block

Global variables/functions must be declared in the global object

Browser: window.myVariable = 'foo';

Node.js: global.myVariable = 'foo';

Worker: this.myVariable = 'foo';

Browser:

console.log(window.myVariable)

Node.js:

console.log(global.myVariable)

Worker:

console.log(this.myVariable)

Module

Each module has its own global scope, so global variables declared in one module will not be present in another

Within modules, global, function, and block scopes behave the same way as in other environments. Functions inside modules have their own function scope and must access the module's global scope through window, global, or this.

How to create and access global functions in JavaScript

The process for global functions mirrors global variables. Declare a function at the top level and it is automatically global:

// Declared at the top level — automatically in the global scope
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('world')); // Hello, world!

If you are inside a function or block scope, you must explicitly attach the function to the global object:

// Browser
function setup() {
  window.greet = function(name) {
    return `Hello, ${name}!`;
  };
}

setup();
console.log(greet('world')); // Hello, world!

// Node.js
function setup() {
  global.greet = function(name) {
    return `Hello, ${name}!`;
  };
}

setup();
console.log(greet('world')); // Hello, world!

Watch out: Variable names and function names share the same namespace in the global scope. A var myFunction = ... will silently overwrite a function myFunction() {} if they share the same name.

How to use `globalThis` to access the global object from anywhere

With multiple JavaScript environments in play — browser windows, Node.js, web workers — accessing the global object the old way required environment-sniffing code:

// The old way — fragile and verbose
const globalObj =
  typeof window !== 'undefined' ? window :
  typeof global !== 'undefined' ? global :
  this;

globalThis solves this by always returning the global object, regardless of where you call it from. It is now supported in all modern browsers and recent versions of Node.js.

Setting a global variable with globalThis:

// Works in browser, Node.js, and workers
globalThis.myVariable = 'foo';

Accessing a global variable with globalThis:

console.log(globalThis.myVariable); // 'foo'

Setting a global function with globalThis:

globalThis.greet = function(name) {
  return `Hello, ${name}!`;
};

Accessing a global function with globalThis:

console.log(globalThis.greet('world')); // Hello, world!

globalThis works by calling this from the global scope, which always returns the global object — even when you're inside a function, a module, or a worker.

Key takeaways

The global object (window, global, self) holds all globally scoped variables and functions and is accessible throughout your entire codebase.
JavaScript resolves variable names by walking up the scope chain — the first match wins.
Use built-in environment globals freely, but be strategic when adding your own.
Over-relying on globals leads to debugging difficulties, memory overhead, and naming conflicts.
Use globalThis as the universal, environment-agnostic way to read and write globals.
When possible, prefer modules for sharing code rather than adding to the global scope.

Vue vs. React: Which JavaScript UI framework is best?

Hugo Naili — Tue, 28 Apr 2026 23:20:16 +0000

Choosing the right UI framework can make a big difference to your project's success. Vue and React are two of the most popular frameworks for UI development, and both offer huge improvements in development speed and useful functionality over vanilla JavaScript. Both are lightweight and modular with a component-based architecture and rely on a virtual DOM to improve performance. But which is best?

The truth is that there isn't one clear winner for all possible use cases, but it's likely that one will be better than another for your specific project. So, to understand which framework will work best for you, you'll need to consider which is the best fit for the developers in your team, and for the type and size of your particular application.

This post provides detailed, practical comparisons between React and Vue that will help you make an informed decision about leveraging either for your project's specific needs.

What is Vue?

Vue.js is a front-end framework for building UIs, developed by Evan You (a former Google engineer) in 2014, and is particularly well suited for building single-page applications (SPAs). It's a progressive framework, which means you can adopt it incrementally, starting by plugging just one part of it into an existing application. This incremental approach makes it easy to integrate into existing projects as well as new ones.

Vue is known for having a gentle learning curve. One reason behind this is its HTML-based template syntax, which is easier to get started with than learning a new syntax from scratch. Another reason is its use of single file components — files with a .vue suffix that contain HTML, CSS, and JavaScript all together. An example of the template syntax within a single file component is shown below.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button v-on:click="changeMessage">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
        message: 'Hello, World!'
    };
  },
  methods: {
    changeMessage() {
        this.message = 'You clicked the button!';
    }
  }
}
</script>
<style scoped>
  h1 { color: blue; }
</style>

In the example above, you'll notice the use of one of Vue's directives.

Directives tell Vue to do something to a DOM element, and are prefixed with a v-. In the above example, the v-on:click directive handles the button being clicked. There are a wide variety of directives for different use cases, ranging from v-bind (which allows you to dynamically bind a variable to an HTML element) to v-for (which allows you to iterate over a list).

As well as the standard HTML-based components like <div> and <img>, Vue has its own built-in components, such as for managing animation effects like fading a component in or out.

The project structure of a Vue app looks like this:

The public directory is for static assets that are not processed by Webpack (like index.html — the main HTML template), whereas assets processed by Webpack (such as images and fonts) live in the assets directory.

The main.js file is the entry point for your application and App.vue is the root Vue component. All child components go in the components directory except page components, which go in views. The router directory is for your Vue router configuration and store is for state management. Finally, vue.config.js is an optional configuration file for the Vue CLI.

What is React?

React is a JavaScript library, originally developed by Facebook in 2013. Like Vue, it's also used for building UIs and SPAs, as well as more complex web applications.

Although React is technically considered to be more of a library than a full-fledged framework, this distinction doesn't mean that it's less comprehensive than Vue, as the extra features that make Vue a framework (such as routing and state management) are still available to be used with React; they’re just not part of the core library. Instead, you could use Redux for state management and React Router for routing.

Like Vue, React has a component-based architecture and uses a virtual DOM to improve performance. It also uses declarative syntax, however, instead of templating it uses JSX, a syntax extension of JavaScript allowing you to describe UI elements in React.

The code example from Vue above would look like this in React:

import React, { useState } from 'react';
import './MyComponent.css'; // Import the CSS file for styling

const MyComponent = () => {
  const [message, setMessage] = useState('Hello, World!');

  const changeMessage = () => {
    setMessage('You clicked the button!');
  };

  return (
    <div>
    <h1>{message}</h1>
    <button onClick={changeMessage}>Click me</button>
    </div>
  );
};

export default MyComponent;

/* MyComponent.css */
h1 {
  color: blue;
}

As we can see above, the HTML tags are included as part of JSX, but the CSS is separate. (There are alternative approaches to this, such as styled-components, a library that allows you to add CSS as part of your React code, but this isn’t part of the core React library.)

You can also create custom components in React:

//Greeting.jsx
import React from 'react';

Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};

export default Greeting;

And then refer to them in another JSX file:

<Greeting name={name} /> React projects typically have this structure:

The public directory is for static assets (like index.html or the favicon). The index.js file is the entry point for your application, and App.js is the root React component. All child components go in the components directory and pages go in pages. Finally, the services directory is for service logic such as API calls and the store directory is for state management (e.g. Redux).

How do Vue and React differ?

Vue.js	React
More opinionated Vue offers a single integrated solution with libraries that work together seamlessly. It has its own built-in tools for things like state management and routing.	More customizable It's a library, not a framework — with a massive ecosystem of third-party libraries to choose from. React uses these third-party libraries to handle state management and routing.
HTML templates React uses HTML templating syntax with directives (by default). It's possible to configure Vue to use JSX but this is less common.	JSX This is essentially just JavaScript, so you have the full power of JavaScript in your application. Dynamic rendering is easier in JSX.
Less commonly used In terms of market share, Vue is used by 1.1% of all JavaScript websites.	More commonly used React is used by 5.1% of all JavaScript websites. While it might not sound like a lot, this is 5x the usage of Vue.
Less community support and backing Vue has a decent amount of community support but not as much as React. It doesn't have a huge corporate backer like Meta in React's case, but does have sponsorship from some medium-sized companies. Notable users: Alibaba, GitLab, Upwork, Wizz Air	More community support and backing React is supported by a massive community and has corporate backing from Meta. Notable users: Instagram, Reddit, Airbnb, Netflix
A combination of one-way and two-way data binding v-model, a directive for form input fields, does two-way data binding, which simplifies the handling of form inputs. The v-bind directive does one-way data binding.	One-way data binding Data flows in one direction — from parent to child via props. You can still implement things that require bi-directional data flows, such as with forms, but such functionality requires managing state, which adds some complexity to your application.

Vue.js

React

More opinionated

Vue offers a single integrated solution with libraries that work together seamlessly.

It has its own built-in tools for things like state management and routing.

More customizable

It's a library, not a framework — with a massive ecosystem of third-party libraries to choose from.

React uses these third-party libraries to handle state management and routing.

HTML templates

React uses HTML templating syntax with directives (by default).

It's possible to configure Vue to use JSX but this is less common.

JSX

This is essentially just JavaScript, so you have the full power of JavaScript in your application.

Dynamic rendering is easier in JSX.

Less commonly used

In terms of market share, Vue is used by 1.1% of all JavaScript websites.

More commonly used

React is used by 5.1% of all JavaScript websites. While it might not sound like a lot, this is 5x the usage of Vue.

Less community support and backing

Vue has a decent amount of community support but not as much as React. It doesn't have a huge corporate backer like Meta in React's case, but does have sponsorship from some medium-sized companies.

Notable users: Alibaba, GitLab, Upwork, Wizz Air

More community support and backing

React is supported by a massive community and has corporate backing from Meta.

Notable users: Instagram, Reddit, Airbnb, Netflix

A combination of one-way and two-way data binding

v-model, a directive for form input fields, does two-way data binding, which simplifies the handling of form inputs.

The v-bind directive does one-way data binding.

One-way data binding

Data flows in one direction — from parent to child via props.

You can still implement things that require bi-directional data flows, such as with forms, but such functionality requires managing state, which adds some complexity to your application.

How to choose: React vs. Vue for your project

You need to make informed framework selection decisions to avoid wasting time and resources and introducing technical debt. Thorough understanding of your needs (as much as that’s possible up front) and planning for them makes app development more straightforward and predictable.

For new projects

React is best for large complex projects: Complex and large projects usually benefit from flexible tooling, so that, over time, development teams can adapt the tooling to fit their needs and their scale exactly. React is a good fit for such projects because it has a smaller amount of built-in functionality in its core library. Teams can pick and choose additional tooling to suit their own needs. React also has an extensive ecosystem, making it more flexible, which is often required with larger or more complex projects.

Vue is easier to learn: For smaller projects that don't require the flexibility of React, Vue is the better choice as it's simpler and easier to learn. If you're not familiar with either framework you'll probably find Vue easier.

For existing projects

Vue is easier to integrate: As Vue is a progressive framework, you can just add one small part to your application at a time, making it easy to start integrating into your existing JavaScript projects. It's fairly easy to add a single file component to an existing project.

Compare this to React, where you have to create many more files and import a root component into your code. It's often simpler to start from scratch and create a whole new React project, migrating all the old code from your old project into the new one.

For rapid prototyping

Vue is easier to learn: If you already have experience with either React or Vue, stick with the one you know, but otherwise use Vue as it has the simplest learning curve.

For server-side rendering (SSR)

It's a tie: Both have adequate solutions for SSR. You can either use React with Next.js or Vue with Nuxt.js. So, it really comes down to other considerations that you might care about — such as whether you're looking for a more opinionated or a more flexible framework.

For long-term reliability

React has more support and backing: Most importantly, it has corporate backing from one of the big tech giants (Meta), but it's also used more, by some of the biggest companies in the world, and has a bigger community of support.

How to create a Vue project

You can use the Vue CLI to create a new Vue project:

Install Node and NPM.
Install the Vue CLI: npm install -g @vue/cli
Use the Vue CLI to create your new project: vue create my-vue-app
Enter your new project directory: cd my-vue-app
Start the Vue development server: npm run serve
Navigate to http://localhost:8080/ in your browser.

How to create a React project

The simplest way to create a React project is to use the Create React App.

Install Node and NPM.
Use Create React App to create your new project: npx create-react-app my-react-app
Enter your new project directory: cd my-react-app
Start the React development server: npm start

Navigate to http://localhost:3000/ in your browser.

Best practices for Vue and React development and maintenance

TypeScript: Whether you're using React or Vue, there are some best practices that are relevant for both. For example, we recommend using TypeScript instead of JavaScript for all React and Vue projects as its static typing will help catch many errors early (at compile time) and will also give you features like improved automatic code completion that will speed up your development.

GraphQL: A potentially helpful practice for both types of projects is to use GraphQL. GraphQL enables you to fetch all the data you need from a single endpoint, which is much more efficient than having to use multiple REST queries to get the same data. Using GraphQL for fetching data can massively increase your performance, although there is a learning curve.

Vue best practices

Use the key attribute with lists: When it comes to using listing items, Vue uses the v-for directive, and as this isn't plain JavaScript, it can be harder to understand exactly what it's doing, which can lead to unintended side effects. For example, items in a list can lose their state when they're updated, as their order isn't necessarily preserved. To avoid this, add a key attribute to your list. React also has a similar key property for dealing with lists.

<template>
  <!--Don't do this-->
  <div v-for="item in items">{{ item }}</div>

  <!--Do this-->
  <div v-for="item in items" :key="item.id">{{ item }}</div>
</template>

Don't use `v-if` with `v-for`:

If you want to filter a list or array, don't use the v-if directive with v-for, as this is very inefficient. Vue gives priority to v-for over v-if, meaning that every single element will be looped over before the v-if conditional is checked.

<!--Don't do this-->
<div
   v-for='item in items'
   v-if='item.available'
>

Instead, extract this logic to your JavaScript code and use a filter within there.

<!--Do this-->
<template>
  <div v-for="item in availableItems">{{ item }}</div>
</template>

<script>
export default {
  computed: {
    availableItems() {
      return this.items.filter(item => item.available);
    },
  },
}
</script>

React best practices

React hooks: Using hooks allows you to simplify your code by managing state, side effects, and context all from within functional components. Without this, you'd have to use class components, which contain a lot more boilerplate code and are less performant.

The most common React hooks are useState and useEffect, but you can also create your own custom hooks. useState is responsible for managing state, and it returns the current state value along with a function to update it.

import React, { 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>
  );
}

useEffect focuses on separating side effects from your main code logic, which makes your code more modular, readable, and maintainable. The code below runs useEffect after every render, and the side effect is that it updates the title of the web page.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Optional cleanup function
    return () => {
      console.log('Cleanup on unmount or before next effect');
    };
  }, [count]); 

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

React Suspense: This allows you to display a fallback component when waiting for your main components to load. Suspense is particularly useful when your components rely on data that you're fetching from an API that may not have loaded yet.

StrictMode: Wrapping a component (or your entire application) in StrictMode will add extra checks and warnings to that component and its descendents, allowing you to identify potential problems and catch them early on.

<React.StrictMode>
    <App />
</React.StrictMode>

React vs. React Native: The difference, and which is best for you

Hugo Naili — Tue, 28 Apr 2026 21:45:12 +0000

Choosing between React vs. React Native for your project can be confusing. Both JavaScript user interface (UI) libraries serve similar purposes and use the same syntax, but their differences are important. React is designed for building user interfaces for web front ends, while React Native helps you build native mobile apps for Android and iOS.

This article explains what React and React Native are and their differences, and provides context and information so that you can decide which to use for a particular project.

React and React Native are not the same thing

React and React Native are two distinct JavaScript libraries for developing user interfaces. While React serves as the foundation for React Native, they are not the same thing, and serve different purposes when developing user interfaces:

React is intended for building user interfaces for web applications that run in the browser. It lets you create reusable UI components using your own designs implemented using CSS, or using a pre-built user interface library.
React Native lets you use React to build mobile applications that look and behave like native applications. Rather than defining your own look and feel, it adopts the appearance of the native UI elements of the operating system (like buttons, lists, and inputs), while still letting you develop your own broader design using familiar React concepts and syntax.

Both libraries use the same core React syntax and component-based architecture.

Before deciding which JavaScript UI library to adopt for a project, it's worth understanding each in detail. As React Native is built on React, the programming knowledge is transferable, so it's less a matter of deciding which you will invest your time learning, and more about learning React and then identifying when it would be better to use React Native on a per-project basis.

What is React?

React is an open-source frontend JavaScript library that is developed specifically for building user interfaces for applications that run in a web browser. It lets you create reusable UI components (known as a component-based architecture), reducing the code you need to write and providing a consistent and efficient codebase.

React uses JSX, an extension to JavaScript that lets you include the HTML for your reusable UI components alongside their JavaScript in the same file, which some developers prefer as it makes your codebase easier to understand and navigate.

Another major feature of React is the virtual DOM: a representation of the HTML document displayed in the browser that you can manipulate programmatically, and that React then automatically syncs to the real DOM as shown to the user. This feature lets you use React to make dynamic pages that don't have to reload to change their contents, with much less code than would be required if working from scratch.

Due to React’s lightweight nature, you can use it to provide as little or as much interactivity in a web page as needed, and you can add it to existing projects. Alternatives to React for web development include Vue.js and Angular. React is used by websites like Facebook, Instagram, and Netflix to power their user interfaces.

Below is an example of an HTML list rendered in React using JSX syntax:

// Import the React module
import React from 'react';

// Create the React component 
const App = () => {
    const items = ['Apple', 'Banana', 'Cherry']; // List data

    return (
        <div>
            <h1>Fruit List</h1>
            <ul> 
                {items.map((item) => (
                <li key={item}>{item}</li> /* Item names in the example array are unique strings, so they can be used as the key */
                ))}
            </ul>
        </div>
    );
};

export default App;

What is React Native?

React Native was developed so that React developers could create mobile apps with their existing React skill sets. It allows for efficient app development, as you can share much of your code between all of your web and native applications (Windows, iOS/iPadOS, and Android).

In addition to letting you leverage existing React skills, tools, and techniques to cover cross-platform native app development, React Native lets you build applications that look and feel like they were designed for each platform from the ground up.

Rather than building your own UI elements and interacting with a virtual DOM, you use React Native's buttons, lists, panels, and other included components to create applications that look like, animate like, and conform to the host’s design system. Apps built with React Native include Discord, Uber, and Skype.

Below is an example of the same list as above, but implemented using React Native user interface elements:

// Import the React module as well as the React Native UI element modules for View, Text, and FlatList
import React from 'react';
import { View, Text, FlatList } from 'react-native';

// Create the React Component
const App = () => {
    const items = ['Apple', 'Banana', 'Cherry']; // Sample list data

    return (
        <View> 
        <Text style={{ fontSize: 24 }}>Fruit List</Text> 
        <FlatList 
            data={items}
            keyExtractor={(item, index) => item} // Item names in the example array are unique strings, so they can be used as the key
            renderItem={({ item }) => (
            <Text style={{ fontSize: 18 }}>{item}</Text> 
            )}
        />
        </View>
    );
};

export default App;

You'll notice that while React and JSX syntax is used in both the React and React Native examples, the React example uses HTML elements like

and

The behavior of each example is the same, but the UI provided by React will require CSS to style it, whereas the React Native UI elements will automatically adopt the appearance of the mobile platform they are run on (it's worth noting that you can alter the appearance of React Native components).

What is React Native for Web?

Web browsers don't include native UI components for React Native to display. React Native for Web makes it possible to deploy React Native apps for delivery to web browsers by providing a set of web-compatible HTML UI components to use in place of the missing native components.

This allows you to use React Native to build both mobile and web applications, and while React Native for Web isn't a core part of React Native, it is widely supported and used by the React community, and is actively maintained.

React Native for macOS and Windows

It’s also possible to use it to develop desktop applications using React Native for Windows and React Native for macOS.

When should you use React?

You should use React to build user interfaces for your web development projects when you:

Want to benefit from the component-based architecture and interactivity React provides.

Are building web applications that will run in a web browser.

Need to design bespoke interfaces with unique visual elements that differ from the visual style of the host operating system.

When should you use React Native?

You should use React Native when you:

Want to take your React skills and use them to build native mobile or desktop apps.
Require a consistent user interface that adopts the appearance of the host operating system.
Are building native apps that you will publish to the Apple App Store, Google Play, and Microsoft Store.
Are developing an application that doesn't rely on HTML — React Native has no DOM, so everything must be constructed with React Native UI components.

Choosing the best tools for your project

React is a powerful user interface development tool, greatly streamlining the frontend development process. React Native builds on this by letting you use React to build native mobile apps as well as web apps, for full platform coverage using the same language and tools.

However, that doesn't mean React (or React Native) is necessarily right for your project: there are a number of other user interface libraries and technologies, each with their own use cases and advantages. In some cases, a full application framework may accelerate your development process by providing a code foundation and boilerplate functionality for your apps.

Designing Demos That Don’t Lie: A Demo Engineer’s Guide

Hugo Naili — Tue, 28 Apr 2026 21:19:33 +0000

There’s a special kind of dread that comes from watching a demo you know will never survive first contact with a real codebase.

On the surface, it looks slick: perfect sample data, pixel‑polished UI, a happy path that always works. Under the hood, it’s a one‑off build, stitched together just well enough to impress for 30 minutes and impossible to evolve into anything useful afterward.

As a software engineer, my job is to avoid that trap.

In this post, I’ll share how I think about building “honest demos” or demos that are realistic, technically sound, and close enough to production patterns that developers can actually build on them later, no matter which CMS, framework, or hosting platform they prefer.

What makes a demo “honest”?

To me, an honest demo has three properties:

The architecture resembles what a real team would build. Same patterns: API‑first, composable services, framework choices that match the audience.
The content model is production‑minded. References, localization, slugs, images, authors, not just a single “blob of text” field.
The handoff doesn’t feel like starting from scratch. The code, content model, and workflows are structured enough that a dev team could fork it and ship something real.

You don’t need a specific vendor to do this. Any modern stack that combines:

a headless CMS or content API,
a frontend framework (React, Vue, Svelte, etc.), and
a CI/CD + hosting setup

can support honest demos if you design with production in mind from the start.

1. Start from a real architecture, not a slide

Before I open a CMS or write a line of code, I write down three things:

Target audience: Frontend devs? Full‑stack? Marketers with some dev support?
Primary job to be done: “Spin up a blog,” “launch a campaign page,” “localize product content,” etc.
Likely stack: React + Next.js, Vue + Nuxt, a static site generator, or something else.

Then I map the architecture they’d recognize:

Content layer: a headless CMS or content API that stores structured content and media.
Frontend layer: the framework handling routing, data fetching (SSR/SSG/ISR), and UI components.
Delivery layer: hosting/CDN where builds run and pages are served.
Optional integrations: search, analytics, commerce, personalization, and so on.

The key is that nothing in the diagram feels like “demo‑only magic.” If a developer can’t imagine deploying a variant of what you’ve drawn, it’s the wrong architecture for the demo.

2. Model content like a real product, not a JSON blob

The fastest way to make a demo feel fake is to dump everything into a single “body” field.

Instead, aim for the smallest content model that still feels like production.

For a blog‑style experience, that might be:

Post
- title (short text)
- slug (short text, used in the URL)
- excerpt (long text)
- body (Rich Text or Markdown)
- coverImage (media)
- author (reference to Author)
- tags (short text or references)
- publishedDate (date/time)
Author
- name
- bio
- avatar

If localization matters to the audience, enable locales on key fields and actually show what it looks like to manage multiple languages from a single content model.

This does two things in a demo:

It builds trust with developers, because they recognize patterns they already use.
It gives you natural opportunities to show the strengths of a structured content approach: references, localization, content reuse, and preview.

3. Stand on the shoulders of starters and the community

You don’t get extra points for hand‑rolling everything.

Most ecosystems now offer:

Official starters and templates for frameworks like Next.js, Gatsby, Nuxt, Remix, etc.
Open‑source example apps on GitHub that wire a frontend to a headless CMS or content API.
Starter kits from hosting providers that cover routing, deployment, and environment variables.

As a demo engineer, treat these as scaffolding:

Use a starter to bootstrap content types, basic pages, and wiring to your content API.
Swap in your own components, design system, and story.
Prune anything that doesn’t support the narrative you’re trying to tell.

The win: you spend less time on boilerplate and more time on the aspects that make your demo unique to the prospect such as their vertical, their channels, their workflows.

4. Seed content that tells a believable story

Even with a strong content model, your demo will fall flat if the content itself feels like lorem ipsum in disguise.

Think in tiny narratives:

For each page type, what’s the story? A launch announcement, a seasonal campaign, an educational series, etc.
For each persona in the room (developer, marketer, product manager), what do they care about seeing?

Then seed content that reflects that:

Posts that look like something a real company in that industry would write.
Images and assets that match the brand and channel (hero images, thumbnails, icons).
A few intentional edge cases: long titles, missing images, quirky tags — so you can show validation or fallback behavior.

AI tools can help generate this seed content quickly, as long as you:

Review it for accuracy and tone.
Avoid inserting any real customer, personal, or internal data into prompts.
Treat it as a draft that you refine, not as a source of truth.

5. Design the demo as a workflow, not a tour

The most compelling demos are guided workflows, not feature checklists.

Instead of “here’s the content model, here’s the API, here’s the app,” frame the demo around a task that matches the audience:

“Let’s launch a new campaign page globally in under 10 minutes.”
“Let’s create a new blog post and send it to production without touching code.”
“Let’s add a new content component and expose it safely to authors.”

Then walk through:

Content modeling

Add or tweak a field, explain why it’s structured that way, and how it avoids future rework.
Authoring & preview

Create/edit content in the CMS, show live preview in the frontend, highlight validation and governance.
Developer experience

Jump into the codebase, show how content is fetched via the content API, and how components map cleanly to content types.
Deployment or publishing

Either trigger a deploy or a publish flow, depending on the story you’re telling.

By the end, the audience hasn’t just watched features, they’ve followed a realistic workflow from idea to live experience.

6. Leave behind something developers can actually use

A good demo answers “Can this work?”

A great demo also answers “What happens after we sign?”

Whenever possible, make sure the demo assets can become a starter kit:

A repo with:
- A clear README (how to run locally, how to connect to a CMS, how to deploy).
- A minimal but realistic folder structure (pages/routes, components, a small library for API access, etc.).
A content setup that:
- Uses content types you’d be comfortable extending in production.
- Avoids one‑off hacks that only exist to make the demo look good.

If the demo is just a lightly customized version of an existing starter or template, the path from proof‑of‑concept to MVP is much shorter for the prospect’s team.

7. Guardrails: what not to show

Finally, a few things to consciously avoid in demos, especially when they’re recorded or public:

No confidential customer data. Use synthetic or anonymized data that can’t be traced back to real people, companies, or contracts.
No internal‑only metrics, roadmaps, or legal details. If it’s not already public, it doesn’t belong in a public demo.
No “black box” shortcuts. If you can’t explain how something works in terms a developer would accept, it’s better to simplify than to hand‑wave.

These constraints are good discipline. They force you to rely on documented capabilities and well‑understood patterns which happens to be exactly what your audience wants to see.

Wrapping up

As demo engineers, we live in the space between aspiration and implementation. Our job isn’t to build the final product, it’s to prove that a real product could exist, on a realistic timeline, using tools the audience trusts.

You don’t need a specific vendor or stack for that. You need:

A realistic architecture your audience recognizes.
A thoughtful content model and believable data.
A workflow‑driven narrative that starts with a problem and ends with a live experience.
A handoff that feels like a starting point, not a magic trick.

If you treat your next demo as a small, honest product, instead of a disposable prototype, you’ll not only earn more trust in the room, you’ll also give the dev team something they can actually build on when the meeting ends.

What is React memo? How to improve React performance

Hugo Naili — Tue, 28 Apr 2026 04:35:57 +0000

React memo is a powerful feature that improves the performance of your React applications by letting you skip the re-rendering of components that haven't changed.

This article explains how React memo works and how to use it. It also includes use cases and code examples that you can adapt for use in your own React code to make sure that your applications are as fast and efficient as possible.

What is React memo?

Memoization is a programming technique that improves performance by caching the results of a function. Code that implements memoization checks the result of a function each time it is called to see if it can serve the cached result and avoid recomputation.

In the context of React, this means storing the results of rendering a component to avoid excessive re-renders. React memo is a component that allows you to wrap React components and memoize them based on their properties (props). This means that components wrapped in a memo will not be re-rendered if their properties have not changed.

How React memo works

Typically in React, when the state is updated in a parent component, this will trigger a re-render of that component along with any of its child components, even if only some of them rely on the updated state. This can lead to poor performance, especially if some of those components make API calls or perform complex calculations.

This is solved by using React memo: When you wrap one of your components with a memo component, it will shallowly compare its current props to its previous ones, and if there is no change in the props, React will skip re-rendering that component and continue to use the existing result (as it was in the previous virtual DOM).

For example, if you have a React parent component that displays the value of the U.S. dollar in different currencies (each currency conversion being in its own child component), each time the state of the parent component is updated with new currency data, every child component is re-drawn — even if the conversion rate hasn't changed. By wrapping each child component with memo, only those where the calculated value has actually changed will be redrawn, improving performance.

Shallow vs. deep comparison

Shallow comparison – If a prop is a primitive (string or number), React memo will check if the new value is different from the old one. If a prop is an object or an array, React memo will only compare the memory reference; even if the contents are the same but the reference has changed, it will consider them different and trigger a re-render.

Deep comparison – If a prop is complex, such as an array or object, comparison would require checking every nested value within to ensure all properties are equal to the old values. While this would provide an exact match, it’s computationally expensive and can be slower than the actual re-renders you are trying to prevent. Deep comparison should be avoided by using composition-based patterns to move the state closer to where it’s needed, minimizing the need for complex prop comparisons.

The benefits of using React memo to optimize your components include:

Preventing unnecessary re-renders and avoiding redundant updates.
Improving performance.
Optimizing expensive and complex components.
Enhancing the user experience.

As memo is simple to implement by wrapping your existing React components, it is an effective way to improve the efficiency of your apps without significantly reworking them.

How to use React memo (demo)

Now that you know what React memo is and how it works, let's take a look at some code and how you can use it in an application.

In your React project, create a parent component:

import React, { useState, useEffect } from "react";
import ChildComponent from './ChildComponent.jsx'

const ParentComponent = () => {
  const [cardData, setCardData] = useState();
  const [clicked, setClicked] = useState([]);

  useEffect(() => {
    const data = Array.from({ length: 5000 }, (_, index) => ({
      id: index + 1,
      name: `Card ${index + 1}`,
    }));

    setCardData(data);
  }, []);

  const pushItem = (id) => {
    setClicked(() => [{ id }]);
  };

  const renderWithoutMemo = () => {
    const renderedComponents = cardData?.map((card, index) => {
      return (
        <ChildComponent
          key={index}
          name={card.name}
          onClick={pushItem}
          id={card.id}
          handleClick={pushItem}
          isClicked={clicked.some((click) => click.id === card.id)}
        />
      );
    });

    return renderedComponents;
  };

  return (
    <div>
      <div
        style={{
          display: "flex",
          boxSizing: "border-box",
          flexWrap: "wrap",
        }}
      >
        {renderWithoutMemo()}
      </div>
    </div>
  );
};

export default ParentComponent;

Here the component is initialized by creating some mock data, which will render out a list of child components. With 5,000 components, other optimization techniques could be used here (pagination, for example), but this is just to demonstrate a clearly noticeable performance lag.

This component also includes some functionality that allows the user to click a child component from the list that will add its id to an array. This is checked later to decide if it has been clicked or not.

Next, create a child component:

import React, { useState, useEffect } from "react";

const ChildComponent = ({ name, handleClick, isClicked, id }) => {
  console.log("rendering - ", name);

  const calculatePrimes = (num) => {
    const primes = [];

    for (let i = 2; primes.length < num; i++) {
      let isPrime = true;
      for (let j = 2; j < i; j++) {
        if (i % j === 0) {
          isPrime = false;
          break;
        }
      }
      if (isPrime) {
        primes.push(i);
      }
    }
    return primes;
  };

  const primeNumbers = calculatePrimes(5);

  return (
    <div
      style={{
        backgroundColor: isClicked ? "green" : "#f9f9f9",
        border: "1px solid black",
        padding: "5px",
        margin: "5px",
        cursor: "pointer"
      }}
      onClick={() => handleClick(id)}
    >
      <h2 className="name">{name}</h2>
      <div>
        <ul>
          {primeNumbers.map((prime) => (
            <li style={{listStyle: "none"}} key={prime}>{prime}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ChildComponent;

This is just a simple card component with some code to simulate some sort of expensive computation in each list item.

Now, if you run the application, you will be able to see a noticeable delay in performance when you click a card to change its color. If you open up the console window in your browser, you will also be able to see that each child component logs a message every time you click, showing that updating one component is triggering a re-render for all children.

Now let's add the fix with React memo. Add the below code in App.js above the ParentComponent.

const MemoizedChildComponent = React.memo(
  ChildComponent,
  (prevProps, nextProps) => {
    return prevProps.isClicked === nextProps.isClicked;
  },
);

Create a React memo component by wrapping the child in the React.memo component. By default, React.memo does a shallow comparison of props. This would normally be sufficient, but because the prop isClicked is generated dynamically (by using .some to generate a boolean), you have to pass a second argument to React.memo with an equality check function, allowing you to customize the way properties are checked. This function opens up the possibility to check objects deeply.

This is one of the common pitfalls with using React memo. The bottom line should be to either ensure that comparison props are simple values such as numbers or strings, or use a custom equality check for complex props.

Now add the following function above the renderWithoutMemo function:

const renderWithMemo = () => {
  const renderedComponents = cardData?.map((card, index) => (
    <MemoizedChildComponent
      key={index}
      name={card.name}
      onClick={pushItem}
      id={card.id}
      handleClick={pushItem}
      isClicked={clicked.some((click) => click.id === card.id)}
    />
  ));

  return renderedComponents;
};

In the return statement, remove the current renderwithoutMemo() and replace it with renderWithMemo(). Now, if you refresh the application, you should see a notable improvement in the load speed when you click on a card. Also, in the console, you will only see logs from the cards you click on, showing that the other child components have been memoized. The only components being re-rendered now are the components whose props have changed.

Here you can access a working demo of the application where you can switch between renderWithMemo() and renderWithoutMemo() to see the performance lag.

When to use React memo

It is considered best practice to use React memo in the following scenarios:

Frequent prop changes: If the props of a parent component change frequently but the output of a child component stays the same.
Expensive rendering: If you have some complex calculation going on inside a component.
Large list of components: If you have a large list of components, especially if the props are changing frequently in a parent component or you have expensive computation inside each child component.
Pure function components: Components that render often and rely solely on the input props to determine their rendering output and have no internal state or side effects.

If none of the above scenarios are true, React memo will have negligible benefits and may add unnecessary complexity to your application. To take one of the examples above, if you use React memo on a component that usually renders with different props, React will do two jobs; it will invoke the comparison function to determine whether the previous and next props are equal, and because the props comparison will always return false in this scenario, React will re-render the component anyway. So, you will get no performance benefits, and this will actually result in more overhead than benefit.

You should use the profiler tool provided by React to identify any performance issues. The Profiler tool allows you to measure how often a component renders and how long these renders take, helping you determine if memoization would provide actual performance improvements. By profiling first, you can make informed decisions about when React memo is truly beneficial, avoiding needless optimizations.

React provides a couple of other related performance optimization tools. While React memo focuses on optimizing whole component re-renders, these two are a little more granular as they require you to optimize specific parts of your components:

useMemo(): In React, useMemo is a hook that can wrap computationally heavy functions to memoize the result, so if the function is called again with the same arguments, the result doesn't need to be recalculated each time.

useCallback(): This hook can be used to wrap a function to memoize its reference. It takes a set of dependencies that determine whether the function should be redefined; if the dependencies remain the same, the memoized function can be reused. It's used to prevent unnecessary re-creation of functions that are passed down as props.

Performance matters in React applications
According to the Doherty threshold, applications that respond in 400 ms or under keep a user's attention and increase engagement, and anything over that causes frustration and may result in users leaving your application altogether.

As your React application scales and grows in complexity, you may find that it starts to slow down as you add more functionality and complex components. This is why it is advisable to employ optimization strategies such as memoization with React memo, pagination, or lazy loading from the beginning of your project, so that it always performs as well as possible.

DEV Community: Hugo Naili

What is the global object in JavaScript? A practical guide for developers

What is the global object in JavaScript?

The JavaScript global scope

When you should (and shouldn't) use the global object

How to create and access global variables in JavaScript

How to create and access global functions in JavaScript

How to use globalThis to access the global object from anywhere

Key takeaways

Vue vs. React: Which JavaScript UI framework is best?

What is Vue?

What is React?

How do Vue and React differ?

How to choose: React vs. Vue for your project

For new projects

For existing projects

For rapid prototyping

For server-side rendering (SSR)

For long-term reliability

How to create a Vue project

How to create a React project

Best practices for Vue and React development and maintenance

Vue best practices

Don't use v-if with v-for:

React best practices

React vs. React Native: The difference, and which is best for you

React and React Native are not the same thing

What is React?

What is React Native?

What is React Native for Web?

React Native for macOS and Windows

When should you use React?

When should you use React Native?

Choosing the best tools for your project

Designing Demos That Don’t Lie: A Demo Engineer’s Guide

What makes a demo “honest”?

1. Start from a real architecture, not a slide

2. Model content like a real product, not a JSON blob

3. Stand on the shoulders of starters and the community

4. Seed content that tells a believable story

5. Design the demo as a workflow, not a tour

6. Leave behind something developers can actually use

7. Guardrails: what not to show

Wrapping up

What is React memo? How to improve React performance

What is React memo?

How React memo works

Shallow vs. deep comparison

How to use React memo (demo)

When to use React memo

How to use `globalThis` to access the global object from anywhere

Don't use `v-if` with `v-for`: