React: Unveiling the Story Behind Its Name and Iconic Logo!

Geetansh Chahal — Thu, 30 Jan 2025 18:39:03 +0000

The React name and logo—so sleek, so vibrant—have an interesting story that blends creativity with a touch of scientific inspiration! React, the popular JavaScript library for building user interfaces, is celebrated for its simple yet powerful design. But have you ever wondered about the glowing atomic symbol in its logo? Or the story behind its name?🧐

It all began in 2013 when React was created by Jordan Walke and his team at Facebook. The goal was to make UI development easier and more efficient, especially as web applications became increasingly complex. The logo and name, however, wasn't just a random thing. It was crafted to symbolize the core of React itself.🚀

At that time, Facebook's front-end team was developing a sophisticated UI, namely Bolt.js🔩, a client-side MVC framework. This framework integrated various JavaScript tools to manage the intricate interactions required for features like the Facebook timeline, chat, news feed, and other advanced applications.

This was around the time when Facebook acquired Instagram. Jordan Walke, who was working on Ads, came up with an interesting idea to transform Bolt by making it more functional—removing the MVC architecture and introducing the concept of re-rendering. Initially named FBolt ⚙️ (Functional Bolt), it later evolved with the addition of JSX syntax and state management based on the Flux architecture, and was renamed React. The new name reflected the library’s philosophy: breaking down complexity into clean and reusable smaller units.

The night before making it open source, a designer named Michael, who was working at Instagram, designed the iconic React logo. The design resembles an atom, and if you look closely at the empty cutout in the center of the logo, you'll see a top view of a bolt.

If you like the post, React⚛️ to it and share your views.

Short-Circuit Evaluation in JavaScript: Boost Performance and Simplify Logic!

Geetansh Chahal — Sat, 25 Jan 2025 06:13:22 +0000

Have you ever wondered how ??, ||, and && work internally to determine the result they return? Is the result always correct? What’s the difference between them? No worries, buddy—let’s break it down and solve this peculiar mystery!🧐

Short-circuit evaluation in JavaScript refers to a programming concept where logical operators evaluate expressions from left to right and stop as soon as the result is determined.

Logical AND (&&):

It returns the first falsy value it encounters or the last value if all are truthy.

let x = 5;
let y = 0;

console.log(x && y);  // 0
console.log(x && true);  // true

Logical OR (||):

It returns the first truthy value it encounters or the last value if all are falsy.

let a = null;
let b = "Hello";

console.log(a || b);  // Hello
console.log(a || false);  //false

Nullish Coalescing Operator (??):

It’s used to provide a default value only when the left-hand operand is null or undefined.

let userName = null;
let result = 0 ?? 100;

console.log(result);  // 0
console.log(userName ?? "Guest")  // Guest

Combined Usage:

We can use them together as well, but it is recommended to use parentheses to avoid confusion and undesired results.

let a = null;
let b = 0;
let c = 10;
let d= 20

let result = (a ?? b) || (c && d);
console.log(result);  // 20

(a ?? b) → (null ?? 0) → 0 //since left is null
(c && d) → (10 && 20) → 20 //since left is truthy
(a ?? b) || (c && d) → ( 0 || 20) → 20 //since left is falsy

Merits:

Optimizes performance by skipping unnecessary evaluations.
Make the code cleaner and more readable.
Prevent runtime errors by avoiding operations on null or undefined values.

Demerits:

If a condition fails, it can be challenging to identify the issue during debugging.
Can confuse readers about the intent.
Can lead to unintended results

Best Practices:

Use it for simple logic.
Add comments to improve understanding of the logic for other coders.
Use ?? instead of || when dealing with null or undefined values to avoid overriding falsy values like 0 or "".

Short-circuit evaluation is not limited to JavaScript; it is widely used in many programming languages such as Python, Java, C/C++, Kotlin, Go, Swift, and more. However, the symbols and usage can vary slightly depending on the language's syntax and conventions.

If you like the post, react to it and share your views.
Connect on LinkedIn:- www.linkedin.com/in/geetansh-chahal-b7473b1b4/

DEV Community: Geetansh Chahal