Forem: Nick

Block Time

Nick — Thu, 21 Dec 2023 15:46:34 +0000

Block Time of the most popular blockchains

Block time differs for every blockchain. Some allow faster block times than others. Depending on the blockchain, a new block can be mined in a matter of seconds, or it can take a few minutes.

Here are the Block Time metrics for the most popular blockchains. These metrics are relevant on Feb 12, 2024. For real-time metrics check out our dashboard

Algorand block time is 2.87s

Arbitrum block time is 0.25s

Avalanche block time is 2.01s

Base block time is 2s

Bitcoin block time is 5m 58s

BNB Chain block time is 3s

BNB Greenfield block time is 2.61s

Celo block time is 5s

Cronos block time is 5.64s

Crust block time is 12.56s

Ethereum block time is 12.04s

Fantom block time is 1.49s

Gnosis Chain block time is 5.25s

Hedera block time is 2s

Integritee block time is 12.33s

IoTeX block time is 5s

opBNB block time is 1s

Optimism block time is 2s

Polkadex block time is 12s

Polkadot block time is 6.03s

Polygon block time is 2.13s

Scroll block time is 3s

Sirius block time is 15.07s

Solana block time is 0.42s

Starknet block time is 32.82s

Telos block time is 0.5s

Tron block time is 3s

Zeitgeist block time is 12.3s

Website | Twitter | Discord

Why Hedera has the highest TPS on Chainspect?

Nick — Fri, 17 Nov 2023 15:47:17 +0000

To understand how Hedera handles so many transactions per second, we will start with the Scalability Trilemma. In the blockchain space, Scalability Trilemma is a common concept. It revolves around the belief that blockchain can only have two of three benefits at any given time: decentralization, security, and scalability. It means that any improvement in one of the areas will result in deterioration in two other areas. It’s one of the main problems in blockchain space, which many great minds aim to solve.

Let’s dive deeper into each component of the Scalability Trilemma:

1. Decentralization

Decentralization is one of the core value propositions of the blockchain technology. It simply means the decision-making process is not bound to any single entity. You can think of it in the context of countries: there are democratic countries — decentralized ones and countries run by kings and dictators — centralized. The level of decentralization depends on the number of entities participating in the decision-making process, the weight of their vote, and the level of trust that participants must place in one another.

2. Security

Any blockchain network consists of numerous software components and consensus algorithm. Blockchain security includes standard software security practices and defense from blockchain-specific attacks: Routing attack, Sybil attack, 51% attack. The main point of blockchain attacks is to overtake the consensus mechanism to control the order and content of blocks. These attacks are more probable if the number of nodes producing blocks is low.

3. Scalability

Scalability indicates the blockchain’s ability to support high transactional throughput and future growth. This means that as the number of users and use cases increases, the performance of the blockchain won’t suffer. Blockchains that perform poorly as adoption increases are said to lack scalability. The Scalability Trilemma tells us that greater scalability is possible, but security, decentralization, or both, will suffer as a consequence.

So why is Hedera transactions per second metric so high?

The answer to this question lies in Hedera’s architecture. Hedera is a public network that utilizes a hashgraph consensus algorithm. Unlike a traditional blockchain, which selects a single miner/validator to choose the next block, the community of nodes running hashgraph comes to an agreement on which transactions to add to the ledger as a collective. Through gossip-about-gossip and virtual voting, the hashgraph network comes to a consensus on both the validity and the consensus timestamp of every transaction.

In blockchain, consensus rules require that blocks eventually settle in a single, longest chain, agreed upon by the community. In hashgraph, every container of transactions is incorporated into the ledger — none are discarded. All the branches continue to exist forever and are woven together into a single whole.

Check out chainspect.app dahsboard to find out real-time TPS for Hedera and 18 more chains!

Transactions Per Second (TPS)

Nick — Wed, 08 Nov 2023 13:04:42 +0000

In the blockchain world, transactions per second (TPS) metrics measure the number of transactions a blockchain can process in a second.

There are 3 most common types of TPS:

Real-time TPS
Max Recorded TPS
Max Theoretical TPS

Real-time TPS

Real-time TPS shows how many transactions per second the blockchain is processing. It’s probably the most important of all three metrics because it is based on real-time blockchain data and can’t be inflated. It shows the adoption level of the blockchain and its actual throughput.

Max Recorded TPS

Max recorded TPS indicates the peak TPS blockchain has ever reached. It shows how many transactions a blockchain can process during times of high workload. Typically, it happens when the market is volatile, and a lot of people want to transact at the same time.

Max Theoretical TPS

Max theoretical TPS shows how many transactions per second the blockchain is theoretically capable of handling. To calculate this metric, divide the block size measured in gas or bytes by the size of the smallest transaction possible. In most blockchains, the least possible transaction is a transfer of a native token.

For example, the Ethereum block size is 30 million gas, the block time is 12 seconds, and the transfer of Ether takes 21,000 of gas. It means each block can contain 30 million / 21,000 = 1428 transactions. So, the maximum theoretical TPS is 1428 transactions / 12s = 119 transactions per second. Of course, the reality is often different due to the different block times, block sizes, and other real-world nuances.

TPS metrics of the most popular blockchains

The following metrics are relevant on Feb 12, 2024. For real-time TPS check out our dashboard.

Algorand TPS is 18.02 transactions per second
Algorand Max TPS is 3,227 transactions per second

Arbitrum TPS is 10.6 transactions per second
Arbitrum Max TPS is 380 transactions per second

Avalanche TPS is 2.41 transactions per second
Avalanche Max TPS is 92.74 transactions per second

Base TPS is 5.41 transactions per second
Base Max TPS is 34.52 transactions per second

Bitcoin TPS is 8.59 transactions per second
Bitcoin Max TPS is 10.92 transactions per second

BNB Chain TPS is 42.42 transactions per second
BNB Chain Max TPS is 1,731 transactions per second

BNB Greenfield TPS is 0.13 transactions per scond
BNB Greenfield Max TPS is 2.25 transactions per second

Celo TPS is 4.39 transactions per second
Celo Max TPS is 268 transactions per second

Cronos TPS is 0.31 transactions per second
Cronos Max TPS is 142 transactions per second

Crust TPS is 0 transactions per second
Crust Max TPS is 0.01 transactions per second

Ethereum TPS is 11.75 transactions per second
Ethereum Max TPS is 62.34 transactions per second

Fantom TPS is 3.2 transactions per second
Fantom Max TPS is 181 transactions per second

Gnosis Chain TPS is 2.36 transactions per second
Gnosis Chain Max TPS is 80.9 transactions per second

Hedera TPS is 1,332 transactions per second
Hedera Max TPS is 3,287 transactions per second

Integritee TPS is 0.0006 transactions per second
Integritee Max TPS is 0.04 transactions per second

IoTeX TPS is 0.13 transactions per second
IoTeX Max TPS is 223 transactions per second

opBNB TPS is 46.44 transactions per second
opBNB Max TPS is 229 transactions per second

Optimism TPS is 4.59 transactions per second
Optimism Max TPS is 32.87 transactions per second

Polkadex TPS is 0.0036 transactions per second
Polkadex Max TPS is 0.45 transactions per second

Polkadot TPS is 0.15 transactions per second
Polkadot Max TPS is 112 transactions per second

Polygon TPS is 44.33 transactions per second
Polygon Max TPS is 282 transactions per second

Scroll TPS is 3.01 transactions per second
Scroll Max TPS is 25.86 transactions per second

Sirius TPS is 0.01 transactions per second
Sirius Max TPS is 0.02 transactions per second

Solana TPS is 896 transactions per second
Solana Max TPS is 1,608 transactions per second

Starknet TPS is 1.89 transactions per second
Starknet Max TPS is 22.87 transactions per second

Telos TPS is 3.2 transactions per second
Telos Max TPS is 7.5 transactions per second

Tron TPS is 56.52 transactions per second
Tron Max TPS is 236 transactions per second

Zeitgeist TPS is 0.0011 transactions per second
Zeitgeist Max TPS is 0.08 transactions per second

Website | Twitter | Discord

TPScore: transactions per second metrics made easy

Nick — Tue, 26 Sep 2023 10:56:55 +0000

Basic idea

TPScore simplifies TPS Data Analysis for non-technical users in the Polkadot Ecosystem.

TPScore aims to provide non-technical users in the Polkadot ecosystem with an accessible and user-friendly platform for analyzing TPS (Transactions per Second) data. Our goal is to bridge the gap between technical intricacies and user-friendly visualization, empowering individuals to make informed decisions about blockchain adoption, investment, and development.

How it was build

The project was build for the Web3 Foundation Grants Program. TPScore consists of two main parts:

ETL System

We retrieve blockchain data using either the Subscan API or connect to the public endpoints of parachains using the Substrate interface library. Also we use Apache Airflow to ensure streamlined data processing.

To calculate the average TPS, we take the number of transactions within the last 100 blocks. We fetch raw data at regular intervals of every 10 minutes. This raw data then undergoes processing within Airflow's DAGs using Python Operators, ensuring efficient data transformation and preparation. Finally, the processed data is stored in a MySQL database.

User Interface

We use Next.js as our full-stack framework. It allows to both retrieve data from the MySQL database and render React app on a server.

To visualize data, we use a simple and concise UI: the grid of cards with the blockchain's name and TPS. We expect one common use case: users go to our website and scan through all chains to find a desired one. So we simplify this process by adding handy sorting and searching functionality.

How to use it

Go to tpscore.xyz and grasp real-time transactions per second metrics for the desired blockchain in Polkadot ecosystem.

How to contribute

We provide detailed guide for both ETL System and User Interface. You can easily spin up local development setup with Docker by following simple steps from READMEs. Also we provide inline documentation for you. Core logic is fully covered by unit tests, so you can contribute without fear of breaking anything.

Examining Blockchain Transaction Speed: Real Performance vs. Marketing Claims

Nick — Wed, 13 Sep 2023 09:09:38 +0000

Introduction

In the ever-changing world of blockchain technology, there's often a lot of talk about how many transactions it can handle per second. But let's take a closer look beyond the marketing hype and dive into the actual world of blockchain speed, without all the complicated terms and fancy talk.

Understanding Blockchain Speed

In the world of blockchain, you often see big flashy numbers like "maximum transactions per second" advertised on websites and in marketing materials. But as people who use blockchain tech, we can tell fact from fiction. Today we will explore the real-time transaction speed versus those big "maximum transactions per second" claims that might change how you see things.

Setting the Stage: Real-Time vs. Maximum Theoretical Throughput

We expect there to be a difference between how many transactions a blockchain can handle in real-time and what's often advertised as the maximum throughput. Our goal is to dig deep and provide a detailed understanding that goes beyond surface-level numbers.

Our Approach: Revealing Actual Network Activity

Our method involves connecting to blockchain networks, fetching transactions, and calculating the average TPS based on data from the last 100 blocks. Every blockchain has its own pace with varying block times, but we're not going to take block time into consideration today for simplicity purposes.

Examining Well-Known Blockchain Projects

Let's take a good look at some well-known blockchain networks – Solana, Arbitrum, Avalanche, Ethereum, and Bitcoin – and see how they really perform.

Solana might have said they can do "65,000 transactions per second" on their website, but in reality, they're clocking in at a pretty impressive 299.91! That's a huge 217 times more than what they claimed.

Arbitrum advertised a solid "40,000 transactions per second," but our investigation shows that they're really doing just 8.07 transactions per second. That's a massive difference of 4956 times – a real wake-up call for accurate reporting.

Avalanche claimed "4,500 transactions per second," but the actual speed is much lower at 2.01 transactions per second. This significant difference of 2500 times shows the importance of being transparent about real-world performance.

Ethereum hasn't been making big claims about speed. Their maximum recorded speed is 56, and their current speed is around 11.14 transactions per second. While it's just five times less, it shows they're not overhyping their capabilities.

Bitcoin has never tried to be the fastest. Theoretically, it can handle about 7 transactions per second, but in practice, it's around 4.18. It's just 1.67 times less, but Bitcoin is all about trustworthiness and resilience.

Closing Thoughts: More Than Just Numbers

These findings highlight the big difference between what blockchain projects say they can do and what they actually do in the real world. While big numbers can be impressive, they're not the only measure of success. What really matters is how these technologies are adopted and used.

Data Source and Verification

We got our data from chainspect.app 🚀, but we encourage you to double-check our analysis. Blockchain's strength lies in its transparency and being able to verify things for yourself. Explore, scrutinize, and let the truth speak for itself.

10 Must-Have Tools for Every Developer in 2023

Nick — Mon, 27 Mar 2023 10:02:27 +0000

As the technology landscape continues to evolve, so do the tools that developers rely on to create software. With the start of the new year, it's time to take a look at the top 10 must-have tools for developers in 2023.

GitHub Copilot: This AI-powered coding assistant is a game-changer for developers. It uses machine learning to suggest code snippets and autocomplete code, making coding faster and more efficient.
Docker: Docker containers allow developers to create and deploy applications quickly and reliably. It's a must-have tool for those who want to streamline their development workflow.
VS Code: This lightweight, open-source code editor has become the go-to tool for many developers. It offers a wide range of features, including debugging, syntax highlighting, and Git integration.
CircleCI: This cloud-based platform automates the testing and deployment process, making it easier for developers to deliver high-quality code faster.
Postman: This API development tool simplifies the process of testing and debugging APIs. It's a must-have for developers who work with APIs regularly.
React Native: This JavaScript framework allows developers to build native mobile apps for iOS and Android using a single codebase. It's a great tool for those who want to develop mobile apps quickly.
Elasticsearch: This distributed search and analytics engine is a must-have for developers who work with large amounts of data. It offers fast search and indexing capabilities, making it easy to find and analyze data.
Sentry: This error tracking tool helps developers quickly identify and fix bugs in their code. It integrates with many popular frameworks and languages, including JavaScript, Python, and Ruby.
GitLab: This web-based Git repository management tool offers a wide range of features, including continuous integration and deployment, code review, and issue tracking.
Terraform: This infrastructure-as-code tool allows developers to manage their infrastructure as code. It simplifies the process of managing and scaling infrastructure, making it easier to deploy applications to the cloud.

In conclusion, these are the 10 must-have tools for every developer in 2023. Whether you're a beginner or an experienced developer, these tools will help you streamline your workflow, increase your productivity, and deliver high-quality code faster. So, what are you waiting for? Start exploring these tools today and take your development skills to the next level! [Generated by ChatGPT]

My dream habit tracker

Nick — Thu, 02 Mar 2023 21:40:40 +0000

After almost a year of having no side activity whatsoever, it seems like I’m finally getting back on track!

I've built my dream habit tracker with Vue 3 & PocketBase!

If you have any pain points with your current habit tracker, let me know in the comments, because I have a lot of them with tons of habit trackers I've tried throughout my life!

What's the difference between compiler, transpiler, and interpreter?

Nick — Fri, 25 Feb 2022 17:54:22 +0000

Implementations of different programming languages use various techniques to execute the code. Let's figure out the difference between them.

Compilers

A compiler is a program that translates a high-level language to bytecode or machine code.
At the same time, a compiler itself doesn't execute the resulting code. The user has to do it instead.

Examples of compilers: GCC, javac, rustc

Transpilers

A transpiler is similar to a compiler, but it translates source code to another high-level language instead of bytecode/machine code.
A transpiler doesn't execute the resulting code too.

Examples of transpilers: babel, tsc

Interpreters

An interpreter, in turn, takes in the source code and executes it immediately. In other words, it runs it from the source.

Examples of interpreters: Ruby MRI (CRuby), PHP3

The combination

There are a lot of programming languages implementations that use compiling and interpreting techniques together. Robert Nystrom captured such implementations for his "Crafting Interpreters" book.

This combination allows getting the best from both worlds.
The execution will be faster because it's generally easier to optimize bytecode. At the same time, it's more convenient for the user to run source code with a single command.

For example, CPython works like this.

P.S. Follow me on Twitter for more content like this.

// Detect dark theme var iframe = document.getElementById('tweet-1496152664039735309-972'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1496152664039735309&theme=dark" }

JSX.Element vs ReactElement vs ReactNode

Nick — Mon, 14 Feb 2022 19:34:32 +0000

These three types usually confuse novice React developers. It seems like they are the same thing, just named differently.
But it's not quite right.

`JSX.Element` vs `ReactElement`

Both types are the result of React.createElement()/jsx() function call.

They are both objects with:

type
props
key
a couple of other "hidden" properties, like ref, $$typeof, etc

`ReactElement`

ReactElement type is the most basic of all. It's even defined in React source code using flow!

// ./packages/shared/ReactElementType.js

export type ReactElement = {|
  $$typeof: any,
  type: any,
  key: any,
  ref: any,
  props: any,
  // ReactFiber
  _owner: any,

  // __DEV__
  _store: {validated: boolean, ...},
  _self: React$Element<any>,
  _shadowChildren: any,
  _source: Source,
|};

This type is also defined in DefinitelyTyped package.

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

`JSX.Element`

It's more generic type. The key difference is that props and type are typed as any in JSX.Element.

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
    // ...
  }
}

This gives flexibility in how different libraries implement JSX.
For example, Preact has its own implementation with different API.

`ReactNode`

ReactNode type is a different thing. It's not a return value of React.createElement()/jsx() function call.

const Component = () => {
  // Here it's ReactElement
  return <div>Hello world!</div>
}

// Here it's ReactNode
const Example = Component();

React node itself is a representation of the virtual DOM. So ReactNode is the set of all possible return values of a component.

type ReactChild = ReactElement | ReactText;

type ReactFragment = {} | Iterable<ReactNode>;

interface ReactPortal extends ReactElement {
  key: Key | null;
  children: ReactNode;
}

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;

What to use for `children`?

Generally speaking, ReactNode is the correct way to type the children prop. It gives the most flexibility while maintaining the proper type checking.

But it has a caveat, because ReactFragment allows a {} type.

const Item = ({ children }: { children: ReactNode }) => {
  return <li>{children}</li>;
}

const App = () => {
  return (
    <ul>
      // Run-time error here, objects are not valid children!
      <Item>{{}}</Item>
    </ul>
  );
}

P.S. Follow me on Twitter for more content like this!

// Detect dark theme var iframe = document.getElementById('tweet-1490749477346553861-711'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1490749477346553861&theme=dark" }

How do React Fragments work under the hood?

Nick — Sun, 13 Feb 2022 09:33:09 +0000

React aims to stay neat and clean that's why fragments are out there. They allow getting rid of excess wrappers while rendering multiple elements!

That's pretty cool, but how do they work under the hood?

👉 React Fragment is just a React Element of a special type!

JSX is a syntax sugar for calling React.createElement
This function expects only three possible groups of types:

tag name for basic HTML elements
class/function for user-defined components
React fragment type

// what you write
const Items = () => {
  return (
    <>
      <li>First element</li>
      <li>Second element</li>
      <li>Third element</li>
    </>
  );
}

// what React gets after babel transpilation
const Items = () => {
  return React.createElement(
    React.Fragment, 
    null,
    React.createElement("li", null, "First element"),
    React.createElement("li", null, "Second element"),
    React.createElement("li", null, "Third element")
  );
};

👉 How does React work with fragments?

After all, there are no corresponding DOM elements!

React doesn't need real DOM elements to deal with fragments.
It forms a virtual DOM instead 💡

// Items() return this
{
  "type": Symbol(react.fragment),
  "key": null,
  "ref": null,
  "props": {
    "children": [
      {
        "type": "li",
        "key": null,
        "ref": null,
        "props": {
          "children": "First element"
        },
      },
      // ...
    ]
  }
}

ReactDOM, in turn, ignores fragments and renders all children without any wrappers.

👉 Verify that it works yourself!

Go to reactjs.org and paste the Items component.

If DOM looks the same as here 👇, you've done a great job!

<div id="___gatsby">
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</div>

P.S. Follow me on Twitter for more content like this!

// Detect dark theme var iframe = document.getElementById('tweet-1492403718284886016-23'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1492403718284886016&theme=dark" }

How does React allow creating custom components?

Nick — Sun, 13 Feb 2022 08:41:10 +0000

React strives to give its users the ability to build encapsulated, reusable components, but how does it implement this logic in JSX?

Here is a simple example of a custom user-defined component, named Greeting. It renders inside a well-known App component.

// Greeting.jsx
const Greeting = ({name}) => {
  return <span>Hi, {name} 👋</span>;
}

// App.jsx
const App = () => {
  return (
    <div>
      <Greeting name="Nikita" />
    </div>
  );
}

Let's break it down!

👉 How `Greeting` works?

Greeting is just a function, which returns JSX. JSX is syntax sugar for calling React.createElement
React.createElement expects three arguments:
- type
- props
- children

Let's rewrite our Greeting component with this new knowledge.

// Greeting.jsx
const Greeting = ({name}) => {
  return React.createElement(
    'span', 
    null, 
    'Hi, ', name, ' 👋');
}

👉 How to use the `Greeting` now?

Turns out, createElement expects three values as type:

tag name, like div or span
a class or a function, that defines custom component
React fragment type

// App.jsx
const App = () => {
 return React.createElement(
   'div',
   null,
   React.createElement(Greeting, {name})
 );
}

Simply put, createElement calls the passed function internally and uses its return value to form the component tree.

// Internal intermediate result
const App = () => {
 return React.createElement(
   'div',
   null,
   React.createElement(
     'span', 
     null, 
     'Hi, ', 'Nikita', ' 👋'
   )
 );
}

👉 Verify that it works yourself!

Go to reactjs.org, open the console and paste the last code snippet there.

Then call the App() and see the end result.
If it's the same as here 👇, you've done a great job!

{
  "type": "div",
  "key": null,
  "ref": null,
  "props": {
    "children": {
      "type": "span",
      "key": null,
      "ref": null,
      "props": {
        "children": [
          "Hi, ",
          "Nikita",
          " 👋"
        ]
      },
      "_owner": null
    }
  },
  "_owner": null
}

P.S. Follow me on Twitter for more content like this!

// Detect dark theme var iframe = document.getElementById('tweet-1486750941814484995-29'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1486750941814484995&theme=dark" }

How React components work?

Nick — Wed, 09 Feb 2022 15:14:08 +0000

React Components are the fundamental building blocks of any React app. They allow us to simplify complex UIs by breaking them down into small chunks.

But as always every abstraction has its cost and the very concept of React Components confuses a lot of beginners, so let's figure it out!

React Component vs React Component instance vs React Element

These three terms seemingly refer to a single thing - UI element on the screen. But it's not true.

React Component

React Component is either a function or an ES6 class - nothing more, nothing less. You manage the state, handle events and implement other custom logic here.
It never renders anything to the screen. Instead, you create its instance to do that.

const TextButton = ({text}) => {
  return <button>{text}</button>;
}

// It becomes more obvious with class-based component
// because you extend React.Component, not React.Element
class ListItem extends React.Component {
  render() {
    return <li>{this.props.children}</li>;
  }
}

React Component Instance

It's exactly what it sounds like. You may have an instance of the React Component only at run time.
Also, you may have multiple instances, each with its own properties and local state. It happens when you use React Component more than once.

class ListItem extends React.Component {
  constructor(props) {
    super(props);
    console.log(`This is instance ${this}`);
  }

  render() {
    return <li>{this.props.children}</li>;
  }
}

const App = () => {
  return (
    <ul>
      <ListItem>First item</ListItem>
      <ListItem>Second item</ListItem>
      <ListItem>Third item</ListItem>
    </ul>
  );
}

React Element

React Element is what React Component Instance returns at run-time. It's a plain JavaScript object that completely describes a DOM node.
Multiple React Elements together form a virtual DOM, a tree-like structure that describes the UI of your React app.

// After Babel
const App = () => {
  return React.createElement('ul', null, 
    React.createElement(ListItem, {children: 'First item'}),
    React.createElement(ListItem, {children: 'Second item'}),
    React.createElement(ListItem, {children: 'Third item'})
  )
}

// At run-time
const App = () => {
  return {
    "type": "ul", 
    "key": null, 
    "ref": null, 
    "props": { 
      "children": [
        { 
          "type": class ListItem,
          "key": null, 
          "ref": null, 
          "props": { 
            "children": "First item" 
          },
        },
        // ...
      ]
    }
  }
}

The big picture of how React Components work

React developers create either function-based or class-based React Components, that return JSX.
Babel transpiles JSX to React.createElement() or jsx() at build-time.
React creates necessary React Components Instances at run-time, and they return React Elements.
ReactDOM renders the virtual DOM, that consists of React Elements.

P.S. That's all for today! Follow me on Twitter for future content!

// Detect dark theme var iframe = document.getElementById('tweet-1486411651175915527-493'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1486411651175915527&theme=dark" }

Forem: Nick

Block Time

Block Time of the most popular blockchains

Why Hedera has the highest TPS on Chainspect?

1. Decentralization

2. Security

3. Scalability

So why is Hedera transactions per second metric so high?

Transactions Per Second (TPS)

Real-time TPS

Max Recorded TPS

Max Theoretical TPS

TPS metrics of the most popular blockchains

TPScore: transactions per second metrics made easy

Basic idea

How it was build

ETL System

User Interface

How to use it

How to contribute

Examining Blockchain Transaction Speed: Real Performance vs. Marketing Claims

Introduction

Understanding Blockchain Speed

Setting the Stage: Real-Time vs. Maximum Theoretical Throughput

Our Approach: Revealing Actual Network Activity

Examining Well-Known Blockchain Projects

Closing Thoughts: More Than Just Numbers

Data Source and Verification

10 Must-Have Tools for Every Developer in 2023

My dream habit tracker

What's the difference between compiler, transpiler, and interpreter?

Compilers

Transpilers

Interpreters

The combination

JSX.Element vs ReactElement vs ReactNode

JSX.Element vs ReactElement

ReactElement

JSX.Element

ReactNode

What to use for children?

How do React Fragments work under the hood?

👉 React Fragment is just a React Element of a special type!

👉 How does React work with fragments?

👉 Verify that it works yourself!

How does React allow creating custom components?

👉 How Greeting works?

👉 How to use the Greeting now?

👉 Verify that it works yourself!

How React components work?

React Component vs React Component instance vs React Element

React Component

React Component Instance

React Element

The big picture of how React Components work

`JSX.Element` vs `ReactElement`

`ReactElement`

`JSX.Element`

`ReactNode`

What to use for `children`?

👉 How `Greeting` works?

👉 How to use the `Greeting` now?