Scaling Systems: Bigger Machine or More Machines?

Shubham Kant — Sat, 09 May 2026 18:05:50 +0000

What is Scalability?

The ability to handle more requests by buying a bigger machine or buying more machines is called scalability.

Vertical Scaling

Vertical scaling refers to using a bigger machine and adding more power (like CPU, RAM, network bandwidth or storage) to handle requests much faster.

For example, let’s say your current system has an 8-core server capacity limit. You can upgrade it to a 32-core server with faster SSD storage.

Pros

It is easier to implement.
Upgrading hardware is easier than setting up brand-new servers.
Easier maintenance.
No load balancer is required because there is only a single machine.
Data consistency is easier to maintain.
Communication is inter-process, which is faster.

Cons

We cannot keep making the machine bigger and bigger. Hardware limits come into the picture.
Single point of failure - if one machine goes down, the entire website/app goes down.

Horizontal Scaling

Horizontal scaling means buying more machines. Requests can be sent to any of these machines, and the workload can be distributed across them.

Here, you can add four 8-core servers instead of one 32-core server.

A load balancer is required here.

Pros

If one server/machine fails, requests can be redirected to another machine.
We can add as many machines as needed, so it scales very well.
Better for unknown or peak workloads.
More resilient and fault tolerant.
Can be more cost-effective in the long term.

Cons

Maintenance is difficult because setting up and managing a distributed system is more complex than managing a single server.
Maintaining data consistency across multiple servers is harder.
Servers communicate with one another over the network, and that communication is comparatively slower.
Inconsistency can arise when multiple servers try to handle and update the same data.

Which One Should You Choose?

It depends on your use case.

Choose vertical scaling if you want:

better data consistency
faster inter-process communication
simpler setup and maintenance

Choose horizontal scaling if you want:

better scalability
resilience and fault tolerance
support for unknown or peak workloads

In the real world, we mostly use both and try to get the best of both worlds.

Vertical scaling is usually cheaper in the short term, while horizontal scaling can be more cost-effective in the long term.

“Scaling is a journey, not a destination.” - Sahn Lam

Got any doubt or wanna chat? Reach out to me on linkedIn

Why we need State variables in react

Shubham Kant — Mon, 28 Aug 2023 10:45:04 +0000

So I got stuck on a very interesting problem today.
Then got to know about state variables in react. So I thought I should share what I learnt today.

We will learn about :

What are State variables ?
How we can make a state variable ?
Why we need state variables ? (mainly we will explore this!!!)

What are State variables ?

State variables maintain the state of your component.

We can make state variables via useState() Hook.

Hooks are JavaScript functions given by React. Period!!!
React has some hooks. Each has some superpowers (logic is written behind the scene).

How we can make a state variable ?

First, You will need to import useState() hook like a named import -

import { useState } from "react";

Initialize useState

const [A,setA] = useState('Hello world');

useState() hook returns an array with 2 values.

variable which have the respective value(Hello world in above case)
The function to update the value

Now our state variable A has Hello world value and via setA() method we can change the value A.

How to change the value via above method ?

Simply pass the updated value in function.
setA('Bye world');

Now the value of A is being updated to Bye world.

Why we need state variables ?

Let's understand with an example here -

We need to add a toggle functionality i.e. feature of Login/Logout button, If a user is logged out ,then button text should be Login and if click on it, text should change to Logout and vice versa.

It sounds easy right!!
We can make a variable and store a value in it and on click of the button, change the text.

In below code snippet -

We made a variable SessionStatus and its initial value is Login.
We added a onClick handler to change the text accordingly.
Added a simple logic to change the button text to Logout if its value is Login and vice versa.

Also added a log statement to check if our onClick handler is getting called and our variable is getting updated or not.
Please try -

Code snippet 1

If you will see in the console, the variable value is changing that means our click Handler is getting called but we are NOT able to see the change in button text in our UI.
It's really weird!!!

Let's try making SessionStatus a state variable and try the same

Code snippet 2

Here it is working. Text of button is ALSO changing in UI. But why ???

State variables syncs UI layer with data layer. Period!!!
They maintain the state of your component.

Here the value of state variable is changing and when ever state variables changes/updates, React re-renders the whole component or we can say react reloads the whole component or we can say react calls the component again with the updated values this time.

React does it via Diff Algorithm, i.e. calculates the difference between previous Virtual DOM and new Virtual DOM and then that difference is applied to Actual DOM.
Here only button value is changing, so react re-renders the component again with that change only in the DOM.

Virtual DOM - React keeps a track of UI (the DOM) in memory in the form of object and it is Virtual DOM.

React makes the DOM operations superfast.
This is the core of react.

Here is an interesting observation if you want to understand it one level deep -

You will observe something weird in code snippet 2.

Let's say the first time, the text in the button is currently is Login and on click, it changes to Logout but in console it's value is still printing as Login.
Why is that ??
We put console.log() after value being updated right ??
Then why it does not printed the updated value then and there ??

The answer to this is that Setting it does not change the state variable you already have, but instead triggers a re-render.
React will make a new instance of state variable with the new value in a new render cycle. Period!!!
The value which is printing on clicking the button is the value of the variable in the component before the re-render triggered.

Got any doubt or wanna chat? Reach out to me on linkedIn or twitter.

Forem: Shubham Kant